Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dependencies specified in _app are duplicated in other pages. #5923

Closed
akotlar opened this issue Dec 19, 2018 · 9 comments
Closed

Dependencies specified in _app are duplicated in other pages. #5923

akotlar opened this issue Dec 19, 2018 · 9 comments

Comments

@akotlar
Copy link

@akotlar akotlar commented Dec 19, 2018

Bug report

Describe the bug

Dependencies not properly shared across pages and _app.js

To Reproduce

Create a number of pages. Add a module to _app.js.
Increase the number of times a module is included from once to N times, track progress

Takes at least 2 pages for a dep included in _app.js to be factored out.

Expected behavior

Once a module has been included in _app, it should never be packed again.

Screenshots

In a 4 page + _app + _document app

// _app only (_app.js includes Auth)
screen shot 2018-12-19 at 1 29 25 pm

// 1 page (_app.js + submit.js include Auth)
screen shot 2018-12-19 at 1 30 22 pm

// 2 pages (_app.js + submit.js + scorecard.js include Auth)
screen shot 2018-12-19 at 1 31 00 pm

System information

  • OS: Mac OS X
  • Version of Next.js: canary, 7.0.2

Additional context

Related to: #3818 (though in this case import isn't being exported as in HOC)
Related to: #118 and #253

Potential solutions: expose or document modifying the threshold for placing a dependency in the common bundle.

However, it seems there should be a more intelligent procedure, in which unnecessary data is not bundled for any descendants of _app.js.

@akotlar

This comment has been minimized.

Copy link
Author

@akotlar akotlar commented Dec 19, 2018

Fixed by

if (!options.isServer) {
  config.optimization.splitChunks.cacheGroups.commons.minChunks = 2;
}

This is a simple fix, effectively just needs documentation of default of 3. This may be somewhat confusing, as Webpack's default is 1, and "shared" implies 2.

@jamessimone

This comment has been minimized.

Copy link

@jamessimone jamessimone commented Dec 29, 2018

@akotlar that snippet seems out of date when investigating the cacheGroups object returned by the most recent version of webpack bundled with Next:

After console.logging(config.optimizations.splitChunks.cacheGroups) on startup (with zeit/next-css generating the "styles" prop):

{ cacheGroups:
   { default: false,
     vendors: false,
     styles:
      { name: 'styles',
        test: /\.+(css)$/,
        chunks: 'all',
        enforce: true }
 } 
}

Looking at the documentation for the SplitChunksPlugin it seems you can set up the commons object as you are suggesting; I am wondering if that or either of these lines would do the trick on newer versions:

if (!isServer) {  
    const chunkingDefaults = { minChunks: 2, reuseExistingChunk: true };
    config.optimization.splitChunks.cacheGroups.default = chunkingDefaults;
    config.optimization.splitChunks.minChunks = 2;  
}
@chirag04

This comment has been minimized.

Copy link

@chirag04 chirag04 commented Mar 22, 2019

I can confirm this is happening with our app bundles too.

@timneutkens

This comment has been minimized.

Copy link
Member

@timneutkens timneutkens commented Mar 22, 2019

@dav-is is working on fixing this.

@sheerun

This comment has been minimized.

Copy link
Contributor

@sheerun sheerun commented Apr 17, 2019

Cheering for fixing this as well.. Our app is 2x more heavy than necessary because of this bug

@sheerun

This comment has been minimized.

Copy link
Contributor

@sheerun sheerun commented Apr 17, 2019

Currently I have best results when using following:

    if (!isServer) {
      const cacheGroups = config.optimization.splitChunks.cacheGroups

      delete cacheGroups.react

      cacheGroups.default = false

      cacheGroups.vendors = {
        name: 'vendors',
        test: /[\\/](node_modules|packages)[\\/]/,
        enforce: true,
        priority: 20
      }

      cacheGroups.commons = {
        name: 'commons',
        minChunks: 2,
        priority: 10
      }
    }

This forces all dependencies from node_modules to vendor chunk (nice, because yarn.lock ensures this chunk won't change very often), then it forces all common non-vendor application code to commons chunk (nice because pages are loading faster when browsing on client side).

The only issue I have currently is that _app.js is separate page while I'd like it to be a part of commons chunk... Also runtime chunk that I'd like also to be a part of commons chunk. Any help appreciated..

@dav-is dav-is removed their assignment Jul 8, 2019
@Timer Timer added this to the 9.0.x milestone Jul 18, 2019
@Timer Timer modified the milestones: 9.0.x, backlog Aug 30, 2019
@isBatak

This comment has been minimized.

Copy link

@isBatak isBatak commented Oct 28, 2019

Any updates regarding this issue?

@timneutkens

This comment has been minimized.

Copy link
Member

@timneutkens timneutkens commented Oct 28, 2019

This should be fixed in #7696

module.exports = {
  experimental: {
    granularChunks: true
  }
}
@timneutkens

This comment has been minimized.

Copy link
Member

@timneutkens timneutkens commented Nov 9, 2019

Closing this as it should be solved by #7696

@timneutkens timneutkens closed this Nov 9, 2019
@Timer Timer removed this from the backlog milestone Jan 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.