CODEWITHSUNDEEP
vue.jswebpack
user2997637
user2997637

Reputation: 47

How to prevent downloading unused node modules chunks with webpack?

I am working on a big app and decided to do some optimizations with webpack.

I used this article by Hackernoon and I can recommend it to anyone: https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

I followed the instructions of the author to separate node modules in multiple webpack chunks:

splitChunks: {
    chunks: "all",
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
      vendor: {
        chunks: "all",
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          // get the name. E.g. node_modules/packageName/not/this/part.js
          // or node_modules/packageName
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

          // npm package names are URL-safe, but some servers don't like @ symbols
          return `_npm.${packageName.replace("@", "")}`;
        },
        enforce: true
      },
    },
  },

However, now all the vendor chunks get downloaded on the first app load, and not just the ones that the current page needs (and is dependent on).

And I have some big libraries like lodash and moment, that I just don't need on the homepage and I don't want them to be downloaded. I want them to be downloaded right after the user has visited a page that is dependent on them.

How can I achieve this?

Upvotes: 0

Views: 480

Answers (1)

user2997637
user2997637

Reputation: 47

Found the issue.

Some not-needed shared components, dependent on the external library, are bundled with a needed shared component in the same chunk.

So downloading the needed shared component downloads also the not-needed ones and they trigger the download of the external libraries.

Upvotes: 1

Related Questions