如何使用webpack提取页面公共资源

基础库分离

• 思路： 将react、react-dom基础包通过cdn引入，不打入bundle中
• 方法： 使用 html-webpack-externals-plugin
  
  image.png

打包好的基础包会通过cdn的方式引入。

利用 SplitChunksPlugin 进行公共脚本分离

Webpack4 内置的，替代CommonsChunkPlugin插件
chunks 参数说明：

• async 异步引入的库进行分离（默认）
• initial 同步引入的库进行分离
• all 所有引入的库进行分离 （推荐）

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,        
      minRemainingSize: 0,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  }
};

利用 SplitChunksPlugin 分离基础包

image.png

利用 SplitChunksPlugin 分离页面的公共文件

image.png