基礎(chǔ)庫分離

• 思路： 將react、react-dom基礎(chǔ)包通過cdn引入，不打入bundle中
• 方法： 使用 html-webpack-externals-plugin
  
  image.png

打包好的基礎(chǔ)包會通過cdn的方式引入。

利用 SplitChunksPlugin 進(jìn)行公共腳本分離

Webpack4 內(nèi)置的，替代CommonsChunkPlugin插件
chunks 參數(shù)說明：

• async 異步引入的庫進(jìn)行分離（默認(rèn)）
• initial 同步引入的庫進(jìn)行分離
• all 所有引入的庫進(jìn)行分離 （推薦）

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 分離基礎(chǔ)包

image.png

利用 SplitChunksPlugin 分離頁面的公共文件

image.png