Gatsby: Share common chunks

[ThisNameWasTaken]

Summary

Share common chunks of code to the components that need them.

Basic example

In this example I am going to refer to the default boilerplate which gatsby new creates.
As of right now, importing the default layout component inside the 404.js, index.js and page-2.js creates three separates css files (component---src-pages-404-js.[hash].css, component---src-pages-index-js.[hash].css and component---src-pages-page-2-js.[hash].css) that have the same content. I would expect gatsby to group such chunks into a common file and share it only to the components that need it.

Motivation

Simply requesting the same code from a different file for each page of your website is highly inefficient and a huge waste of bandwidth. Imagine if you have a website which has 100 pages that all use mostly the same css, which is about 10KB, all of a sudden you would have to request 1MB of (already downloaded) css. Not only that, but you could get it from the cache rather than making another network request, if another component has already requested that chunk.

Workaround

So far to (somewhat) achieve this behavior I have to import my common chunks inside the gatsby-browser.js file which would share them across all of my components. However this only solves the case where all of my components share that portion of code, but it does not cover the case where only some components share a particular chunk of code.

Current setup

__gatsby version:__ 2.4.8
__node version:__ 10.13.0
__os version:__ Windows 10.0.17763.253

[sidharthachatterjee]

Thank you for opening this @ThisNameWasTaken

So far to (somewhat) achieve this behavior I have to import my common chunks inside the gatsby-browser.js file which would share them across all of my components. However this only solves the case where all of my components share that portion of code, but it does not cover the case where only some components share a particular chunk of code.

On a side note, you can override the webpack config provided by Gatsby by using the onCreateWebpackConfig hook in gatsby-node.js

Take a look at the documentation at https://www.gatsbyjs.org/docs/add-custom-webpack-config/

[ThisNameWasTaken]

After taking a look over this example from the gatsby docs and this one from webpack, I came up with the following solution.

Inside the gatsby-node.js file I have added this code which mimics the behavior I was expecting.

exports.onCreateWebpackConfig = ({
  actions,
  getConfig
}) => {
  let config = getConfig();

  if (!config.optimization) { return; } // not writing this check throws an error; TypeError: Cannot set property 'splitChunks' of undefined

  config.optimization.splitChunks = {
    chunks: 'all',
    name: false,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        reuseExistingChunk: true
      },
      commons: {
        minChunks: 2, // setting this to less than 2 seems to break the lazy image loading
        reuseExistingChunk: true
      }
    }
  };

  actions.replaceWebpackConfig(config);
}

[gatsbot[bot]]

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’s 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!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!