10 webpack提取页面公共资源

多个页面中有公共模块

基础库分离

思路：基础包用CDN引入，不打入bundle中，如react，react-dom

方法：html-webpack-externals-plugin   ， 在配置的同时也需要在html文件中引入

 

 

方法：使用webpack4内置的SplitChunksPlugin进行公共脚本分割

chunks参数：async异步引入的库进行分离（默认），initial 同步引入的库进行分离，all 所有引入的库进行分离（推荐）

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};