Lazy loading for Pages and nested components in Production mode

I just invested some time to try out Next.js if we would use it for our next project and my first impressions were very good! I also read on the Readme page, that one nice feature is the code splitting, that on the code will be loaded for the current page and all components that are used on this page. So this is a great feature to prevent that in large applications the whole code has to fetched when the user is going to the first page.

So I build a small sample application with two pages and two components and each page is using one of this components. So my expectation would be, that when the user is going to the first page, no code from the second page will be loaded. And when later the user is navigating to the second page, the code for this page and the nested components will be fetched separately.

But unfortunately, the response I got when the second page was fetched was this

          window.__NEXT_REGISTER_PAGE('/about', function() {
            var comp = module.exports=webpackJsonp([2],[],[242]);
            return { page: comp.default }
          })

So this was not the code I expected. I investigated a moment to find out where the code for the second page comes from and the outcome was, that the code is within the app.js and this file was fetched with the initial page request from the first page.

So I’m now a bit irritated about if the code splitting is really working? It seems me that not. Is there any explanation for that behaviour.

I used the version 2.3.1 from Next.js and I create a Production version for my experiments.

[bensalilijames]

No worries 😃 It’s from the minChunks part of webpack’s CommonsChunkPlugin: https://github.com/zeit/next.js/blob/master/server/build/webpack.js#L104

[bensalilijames]

You may be falling victim to the idea that for code to be shared between pages (i.e. in app.js) it needs to be in greater than or equal to 50% of pages.

Because this example only has two pages, it’s putting everything in app.js (nothing is used in less than 50% of the pages). To see the code-splitting benefit, try adding a third page!