Gatsby: Code splitting common vendor files

Created on 2 Jul 2019  路  8Comments  路  Source: gatsbyjs/gatsby

Summary

I have a rather large package that is being built into all of my page bundles.

I was under the impression from the docs that this would be ripped out into a common bundle, which is then only imported once? Am I missing a required option for this?

Relevant information

Here is my bundle analysis;

Screen Shot 2019-07-02 at 12 59 31

As you can see Dexie.es.js is present in most of the bundles, along with some smaller common packages.

Environment (if relevant)

  System:
    OS: macOS High Sierra 10.13.2
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Safari: 11.0.2
  npmPackages:
    gatsby: 2.6.0 => 2.6.0 
    gatsby-image: ^2.0.15 => 2.0.25 
    gatsby-plugin-create-client-paths: ^2.0.2 => 2.0.3 
    gatsby-plugin-google-gtag: ^1.0.8 => 1.0.8 
    gatsby-plugin-manifest: ^2.0.5 => 2.0.12 
    gatsby-plugin-offline: ^2.0.11 => 2.0.20 
    gatsby-plugin-page-transitions: ^1.0.7 => 1.0.7 
    gatsby-plugin-react-css-modules: ^2.0.7 => 2.0.7 
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.4 
    gatsby-plugin-sass: ^2.0.10 => 2.0.10 
    gatsby-plugin-sharp: ^2.0.18 => 2.0.18 
    gatsby-plugin-sitemap: ^2.0.12 => 2.0.12 
    gatsby-plugin-transition-link: ^1.12.2 => 1.12.2 
    gatsby-plugin-twitter: ^2.0.8 => 2.0.8 
    gatsby-plugin-webpack-bundle-analyzer: ^1.0.5 => 1.0.5 
    gatsby-source-filesystem: ^2.0.4 => 2.0.12 
    gatsby-transformer-sharp: ^2.1.12 => 2.1.12 

File contents (if changed)

Can include these if relevant.

bug

Most helpful comment

Will try and find time this week.

All 8 comments

That's weird. We should use the default value of splitChunks plugins in webpack which should fix this. It seems like we aren't. Thanks for reporting.

Do you have the time to create a small repro so I can get this fixed?

Will try and find time this week.

Hiya!

This issue has gone quiet. Spooky quiet. 馃懟

We get a lot of issues, so we currently close issues after 30 days of inactivity. It鈥檚 been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 馃挭馃挏

Not stale, I will find time!

@Jivings maybe you can try to play with webpack code splitting heuristics

The default settings may prevent the code splitting to happen. For example webpack won't create an extra bundle if it would weight less than 30kb, so maybe your Dexie is smaller than this default thrreshold?

Also, take a look at this issue: https://github.com/gatsbyjs/gatsby/issues/16661

@Jivings can you test if [email protected] works better for you?

@wardpeet is doesn't appear to have helped. Dexie.js is still present in many bundles.

Screenshot 2019-09-06 at 15 52 56

I'm guessing this line is the reason?

minChunks: componentsCount > 2 ? componentsCount * 0.5 : 2

Dexie appears in 13 of my 34 packages, so it wont meet this minChunk requirement right?

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ghost picture ghost  路  3Comments

mikestopcontinues picture mikestopcontinues  路  3Comments

theduke picture theduke  路  3Comments

3CordGuy picture 3CordGuy  路  3Comments

magicly picture magicly  路  3Comments