如何优化 webpack 的构建速度
1.使用更高版本的webpack
2.可以进行多进程多实例构架，比如thread-loader进行构建
3.压缩代码 通过多进程并行压缩
- webpack-paralle-uglify-plugin
- terser-webpack-plugin 开启paralle 等等都可以开启多进程压缩
- mini-css-extract-plugin 压缩css相关内容，来提取chunk里的css到单独css文件中。通过css loader的mini-css来开启css压缩
4.图片压缩
- imagemin
- image-webpack-plugin
5.缩小打包作用域 避免对无效文件的打包
- exclude/include 确定loader规则范围
- resolve.extensions 减少后缀的可能性
- resolve.modules 之名第三方模块的绝对路径
6.提取页面公共的资源 基础包的分离
- html-webpack-externals-plugin 将基础包通过cdn引入不打入bundle中
- 使用splitchunksplugin 进行公共脚本 基础包 页面公共文件分离
7.充分利用缓存提升二次构建速度
- babel-loader开启缓存
- terser-webpack-plugin开启缓存
- cache-loader 或者hard-source-webpack-plugin
8.tree-sharking 没有用到的模块进行标记，从最终bundle中去掉 （要禁用掉babel-loader的模块依赖解析，否则webpack接收到的就是它转换过后的commonjs形式的模块，无法进行treeshaking）
