Help needed with noProductionJavascript and Disqus Component

[cutemachine]

Some days ago I decided not to use the bundle.js and set noProductionJavascript to true.

Now, my Disqus Component broke:
var ReactDisqusThread = require('react-disqus-thread');

Which was expected, but what is the best way to make it work?

Thanks

[KyleAMathews]

You have to include the bundle.js. Why did you decide to turn off
javascript?
On Fri, May 13, 2016 at 11:25 AM Jo Meenen [email protected] wrote:

Some days ago I decided not to use the bundle.js and set
noProductionJavascript to true.

Now, my Disqus Component broke:
var ReactDisqusThread = require('react-disqus-thread');

Which was expected, but what is the best way to make it work?

Thanks

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub
#288

[cutemachine]

Well, the generated bundle.js is 8MB. And the page load is quite fast, so I did not see the benefit of having a SPA.

[KyleAMathews]

Oh wow, that's huge :-) how many pages? How long does it take to generate
the site?

Turning off JavaScript generation altogether is a blunt tool as you've
noticed. With code splitting, this would be much more manageable as each
page could load just the JS for that page.
On Fri, May 13, 2016 at 12:47 PM Jo Meenen [email protected] wrote:

Well, the generated bundle.js is 8MB. And the page load is quite fast, so
I did not see the benefit of having a SPA.

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#288 (comment)

[cutemachine]

Yesterday, I wrote a new post with Markdown which had two images.When I built the site, the build.js grew to 12MB. Not good :)

I realized I had configured a URL loader:

                config.removeLoader('png')
                config.loader('png', function(cfg) {
                  cfg.test = /\.png$/
                  cfg.loader = 'url-loader'
                  return cfg
                })

It thought that the url loader would only be used when I require the images. I did not realize that the url loader would also inline the images I use in my Markdown posts.

I remove the loader and the size of the bundle.js went down to 700KB.

I'm not sure whether this is the normal behavior, but if it is, please close the issue.

[KyleAMathews]

This is definitely a bug. There's an open issue for it #208

I haven't fixed it yet as I haven't decided on the right pathway forward. The right solution is you add support for "content types" individually with plugins and only they get loaded into the bundle (e.g. add gatsby-plugin-markdown) but people (like you) keep running into problems so I think the easiest short-term fix is to only require the current list of page extensions when creating the require context for the pages directory here https://github.com/gatsbyjs/gatsby/blob/master/lib/utils/load-context.js

[sebastienbarre]

@cutemachine just curious if you solved your issue somehow? Instant navigation is not a huge selling point to me either, for large blogs.

@KyleAMathews Shouldn't html.jsskip including bundle.js when noProductionJavascript is true? I see this is not the case in the blog starter kit. Would you like a PR for that one, or is it all going to be rendered moot when code splitting is implemented in Gatsby? (I couldn't find a roadmap). Thanks

[KyleAMathews]

@sebastienbarre I don't want to add too much structure to html.js files. You often need to customize it when building out a site.

And yes, code splitting is coming and there'll be far less interest I assume in turning off Javascript then. See https://www.bricolage.io/gatsby-open-source-work/ for a loose roadmap. Will be posting more tomorrow.

[sebastienbarre]

Thanks @KyleAMathews. BTW, a RSS feed on https://www.bricolage.io/ would be great, to keep up with the news ;)

[KyleAMathews]

Haha there was one but I broke it when I upgraded to what will be
Gatsby-1.0-alpha1

On Tue, Aug 30, 2016 at 6:16 PM Sébastien Barré [email protected]
wrote:

Thanks @KyleAMathews https://github.com/KyleAMathews. BTW, a RSS feed
on https://www.bricolage.io/ would be great, to keep up with the news ;)

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#288 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAEVh9KPzK_LjXUW9A1mHfF4NbBxFIS9ks5qlNXsgaJpZM4IeRBc
.

[cutemachine]

@sebastienbarre Sorry for the late reply. My main problem was related to images ending up in the bundle, as outlined above.

After several more posts my bundle size is now exactly 1 MB, which is still pretty big. But it is a size I think readers will tolerate.

So, in short, I am also looking forward to code splitting :)

[sebastienbarre]

Hi @KyleAMathews; revisiting this thread a few months later. I was wondering what the status of noProductionJavascript is at this point? I'm trying to build a workflow where I can use React to create re-usable components, but output completely static HTML file -- no Javascript at all, no fast page transition, no need for code splitting, just plain old HTML. Is this something that can be accomplished with 1.0? Thank you.

[KyleAMathews]

@sebastienbarre if you don't need Javascript, just don't load it :-) Then React is just your templating tool. noProductionJavascript is just a way to tell Gatsby to skip building the Javascript which speeds up your build somewhat. I'm not 100% sure if I'll include that option in 1.0 but you can use it now in 0.x.

[sebastienbarre]

Thanks. I'm planning on using 1.0, looks nice, and I guess feedback on 1.0 could help.

[sebastienbarre]

Now this is unrelated, so forgive me for tacking that on. Say you have a blog with a few hundreds page, and you want to tweak the layout, CSS, etc, but not the contents. You probably focus on one single page/post while doing so, to see how the new layout/css looks. Can you prevent Gatsby from regenerating all the other pages while you are doing your adjustments, for better performance? Then regenerate everything once you are happy with the new layout/css? Thanks.

[KyleAMathews]

That's exactly what the development server does — it builds everything than rebuilds only the file(s) you're changing and hot reloads the changes so you can quickly see what's chaned.

[sebastienbarre]

Yes that's the dependency mechanism I'm curious about. In the scenario I'm describing, I would be working on the React components that output the HTML for the layout, I would not be working on the contents per se (the Markdown, for example). They would control how columns are laid out, where the sidebars go, etc. This is HTML that technically go on everything single page of the blog. All the pages depend on these layout components. So it would make sense that everything would be rebuilt if you modify them -- every single page. Don't get me wrong, I wouldn't blame Gatsby for not knowing my intent here: I'm only changing the layout components. Would it make sense to have an option to tell Gatsby: "hey, even though the layout components changed, please don't rebuild hundreds of pages that depend on the corresponding HTML, just this single page that I happen to be looking at because I'm working on the layout for now, not the contents. I don't need you to rebuild everything, just build this page fast so I can tweak the layout fast". Does it make sense? Thank you.

[sebastienbarre]

Congrats on the upcoming 1.0; been keeping an eye on this project, chiming in once a year apparently :) I was wondering if noProductionJavascript will be in 1.0?