速度优化

  1. speed-measure-webpck-plugin分析loader plugin的打包耗时。
  2. 使用高版本的webpack和node。
  3. 开启多进程构建节约loader转化时间，像是对于babel-loader, vue-loader这些需要进行大量数据处理的loader可以使thread-loader开启多进程构建转化
  4. 开启多进程压缩文件，压缩js文件可以使用terser-webpack-plugin，压缩css文件可以使用css-minimizer-webpack-plugin将它们放在optimization.minimizer中即可，不过在webpack5中已经自带了terser-webpack-plugin。
  5. 充分利用缓存提升二次构建的速度，对于有自带缓存属性的loader如babel-loader可以将他的配置项cacheDirectory设为true开启缓存，对于没有自带缓存配置项又需要缓存的loader可以使用cache-loader，还可以使用hard-source-webpack-plugin为模块提供一个中间缓存步骤让二次构建速度加快，在webpack5中则只需要使用cache配置项配置文件缓存。
  6. 减少文件的搜索范围
    1. 优化resolve.modules配置，减少模块搜索层级
    2. 优化resolve.mainFields配置，直接告诉webpack起始入口
    3. 优化resolve.extensions配置, 省略常用后缀名，按常用频率从左向右
    4. 合理使用alias，指定定义标识符的路径

体积优化

  1. webpack-bundle-analyzer分析打包出的各个模块的体积
  2. image-webpack-loader 压缩图片
  3. purgecss-webpack-plugin 对css进行tree-shking