Javscript bundles are full of duplicate packages

[shendriksza]

Description

I have noticed some fairly large Javascript files on my site. Most of them in the range 100-400KB. Examination with source-map-explorer showed that most of the size of them consists of duplicate libraries. I'm aware that Gatsby bundles packages that are used multiple times in the commons-*.js file. But for some reason, my build does not seem to make one. I know I've seen it be created before, but now my build only contains component-*.js files. I cannot place how or when the commons-*.js is created and would like some guidance in understanding when it happens? And will the bundling occur the same during develop and build commands?

Steps to reproduce

Unfortunately I have not identified how to reproduce

Expected result

There should always be a bundled commons-*.js file created

Actual result

commons-*.js bundle is not always created, even when the build will greatly benefit from it

Environment

  System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 11.10.1 - /usr/local/bin/node
    Yarn: 1.15.2 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 75.0.3770.100
    Firefox: 67.0.3
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.11.0 => 2.11.0
    gatsby-background-image: ^0.7.3 => 0.7.3
    gatsby-image: ^2.2.3 => 2.2.3
    gatsby-plugin-advanced-sitemap: ^1.1.1 => 1.1.1
    gatsby-plugin-google-gtag: ^1.1.0 => 1.1.0
    gatsby-plugin-manifest: ^2.2.0 => 2.2.0
    gatsby-plugin-netlify: ^2.1.0 => 2.1.0
    gatsby-plugin-nprogress: ^2.1.0 => 2.1.0
    gatsby-plugin-react-helmet: ^3.1.0 => 3.1.0
    gatsby-plugin-remove-fingerprints: 0.0.2 => 0.0.2
    gatsby-plugin-sharp: ^2.2.1 => 2.2.1
    gatsby-plugin-styled-components: ^3.1.0 => 3.1.0
    gatsby-source-filesystem: ^2.1.1 => 2.1.1
    gatsby-source-graphql: ^2.1.0 => 2.1.0
    gatsby-source-wordpress: ^3.1.2 => 3.1.2
    gatsby-transformer-sharp: ^2.2.0 => 2.2.0
  npmGlobalPackages:
    gatsby-cli: 2.6.2

[prestonso]

Hi @shendriksza,

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💪 💜

[wardpeet]

@shendriksza, commons.js is only used for development. On production, we create app-[hash].js to bundle all common code. All the rest is added to the page itself.

[shendriksza]

@wardpeet Thanks! That makes perfect sense. I had a reach-router on the /app path which completely threw me off from making that connection