Same dependencies are bundled multiple times (once per page)

[sdirix]

I'm maintaining a Docusaurus2 (2.0.0-alpha.73) based site. In it we showcase a rather expensive React component on multiple pages including the landing page. Our dependencies include for example Material UI, Moment and Ajv.

The problem I'm facing is that these dependencies are bundled again and again for each page separately during the Docusaurus build. When visiting the landing page not only need these dependencies be loaded once, but then the preloading of all pages kicks in, loading the bundled JS of all pages and therefore loading all of these expensive dependencies over and over. This results in a large amount of JS being loaded (over 25 MB uncompressed) before the landing page becomes reactive.

Is this the expected behavior? Any suggestions on what I might be doing wrong or can workaround the issue?

In case you want to look at the code, the repo is here.

[slorber]

Hi,

This is definitively not the behavior we want and not sure why this happens.

We upgraded to Webpack 5 in alpha 75, maybe try to upgrade and see if it improves? (I don't think it will).

This problem is related to our code splitting config, which is far from perfect IMHO but it not so easy to fine-tune (there's good inspiration to take from Next.js here as they worked with Chrome team to improve their).

https://webpack.js.org/plugins/split-chunks-plugin/

Our current config is:

{
            name: false,
            cacheGroups: {
              default: false,
              common: {
                name: 'common',
                minChunks: totalPages > 2 ? totalPages * 0.5 : 2,
                priority: 40,
              },
              styles: {
                name: 'styles',
                type: 'css/mini-extract',
                chunks: `all`,
                enforce: true,
                priority: 50,
              },
            },
          },

Looks to me like the minChunks: totalPages > 2 ? totalPages * 0.5 : 2, is a bad heurristic, as it will only move your heavy code in common.js only if it's used in more than half the pages, which may not be the case for your site.

Maybe try to override this minChunks setting by using plugin.configureWebpack() and tell us if it improves your site code-splitting?

I'll look into this but it's what I should focus on in the very short term.

[sdirix]

I see, thanks! We actually use the component in less than half the pages, so this looks promising 👍 I let you know once we tried it.

[TheZoker]

Thanks! Where do we need to set this plugin.configureWebpack() Within the docusaurus.config.js file?
I could only find this reference, but not sure where this belongs:
https://docusaurus.io/docs/lifecycle-apis#configurewebpackconfig-isserver-utils

[slorber]

You have to create a custom plugin as a separate file. It's a little bit of boilerplate, we'll make this more convenient soon Le mar. 4 mai 2021 à 12:46, Florian Gareis ***@***.***> a écrit :

…

Thanks! Where do we need to set this plugin.configureWebpack() Within the docusaurus.config.js file? I could only find this reference, but not sure where this belongs: https://docusaurus.io/docs/lifecycle-apis#configurewebpackconfig-isserver-utils — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#4721 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFW6PWURKAY7GZJ3GUNK2TTL7F7LANCNFSM44BC6YZA> .

[sdirix]

We tried customizing the chunks and it works like a charm 👍

This is the plugin we ended up with:

module.exports = function () {
  return {
    name: 'custom-webpack',
    configureWebpack() {
      return {
        optimization: {
          splitChunks: {
            cacheGroups: {
              common: {
                minChunks: 5,
              },
            },
          },
        },
      };
    },
  };
};

@slorber Thank you again for your quick replies!

[slorber]

Thanks for the feedback, happy to hear it solved your problem.

Hope to come up with a solution so that this is not necessary