Webpack优化

拆包 optimization.splitChunks

const optimization = {
    splitChunks: {
      cacheGroups: {
          name: {
           	  test: /vue/, // 正则匹配需要拆包的文件
          	  name: '',
              priority: 100, // 权重
              // 全部|异步|同步，多页也可以写成函数返回对应的chunk
              chunks: 'all' | 'async' | 'initial'
              chunks(chunk) {
                  return chunk.name === 'chunk'
              }
          }
      }
    }
}

分析打包情况

1. webpack-bundle-analyzer可视化打包内容

   // 分析包内容
   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
   module.exports = {
     plugins: [
       // 开启 BundleAnalyzerPlugin
       new BundleAnalyzerPlugin(),
     ],
   };
   

2. speed-measure-webpack-plugin测量打包时间

   / 分析打包时间
   const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
   const smp = new SpeedMeasurePlugin();
   // ...
   module.exports = smp.wrap(prodWebpackConfig)
   

DLL

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  // ......
  plugins: [
    new HardSourceWebpackPlugin() // <- 直接加入这行代码就行
  ]
}