webpack构建工具优化

webpack构建工具优化

(1) 使用rspack替换webpack，rspack比webpack快好几倍，但是项目太大，如果从webpack改成rspack特别是改动很多的时候就会有很多兼容性问题，一开始我是想这么做，但是做着做着后面就放弃了

(2) 使用HappyPack开启多进程Loader转换，在plugins引用HappPack，重要属性是id、loaders、threadPool，使用的时候是在module的rules下的use使用happypack/loader?id=happyBabel，注意该id是配置的loader的对应id

(3) 压缩代码，使用ParallelUglifyPlugin和webpack内置插件UglifyJsPlugin，在 optimization 的minimizer下写入配置

(4) 压缩css，cssnano基于PostCSS，不仅是删掉空格，还能理解代码含义，例如把color:#ff0000 转换成 color:red，css-loader内置了cssnano，只需要使用 css-loader?minimize 就可以开启cssnano压缩

(5) 开发环境下将devtool设置为cheap-module-eval-source-map，因为生成这种source map的速度最快，能加速构建。在生产环境下将devtool设置为hidden-source-map 这种设置虽然构建速度相对较慢，但它生成的 source map 文件不会暴露给用户（即不会在浏览器中显示），适合于生产环境，能够帮助在出错时进行调试。

压缩打包后的大文件

(1) 使用compression-webpack-plugin压缩打包后的大文件