Webpack v4在单个页面上有多个条目，不必要地复制了块

Question

I have a multipage website with a subset of pages that is a SPA. We just upgraded to Webpack V4 and have encountered some new issues that we havent seen before.

Our pages always include a script tag for app.build.js . This file has global inits, and imports our public path. It imports things like Modernizr and builds our site navigation.

Additionally, on a per-page basis we serve a second JS file like account.build.js . Some pages do not have this second file if they are very simple. They still need app.build.js to create the navigation though.

It appears as though Webpack doesn't know about this combination, so there are redundant chunks in the two output files. they both may include a Modernizr test, etc. and all of that gets added to both build files bloating them significantly.

My question is, how do you tell Webpack that app.build.js is globally included??? We do this with SplitChunks for our vendors, but it matches on imports, not on the entry file name.

We also now need to import './public-path'; in every entry file, which isn't ideal. I would prefer to do it once in app.build.js and have it globally recognized.

Bug filed with Webpack here: https://github.com/webpack/webpack/issues/8842

Answer 1

If you want to move all duplicates to a single file ( commons.js ) leaving aside all vendor files in vendors.js you can specify multiple cache groups. This commons.js will contain all modules duplicated across all of your entry points.

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
      commons: {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
        enforce: true,
      },
    }
  }
}