利用webpack自带的stats查看打包情况
如下所示修改指令：然后运行
速度分析插件：speed-measure-webpack-plugin
分析打包总耗时，每个插件/loader耗时
1. npm i speed-measure-webpack-plugin -D
2. 引入插件
3. 运行
体积分析插件：webpack-bundle-analyzer
1. npm i webpack-bundle-analyzer -D
2. 引入插件
3. npm run build 会在8888端口生成分析页面
提高打包速度
1. 使用高版本的nodejs和webpack
2. 多进程/多实例构建：资源并行解析可选方案
webpack4 官方出品
复制五份文件夹，共7个多页面，使用thread-loader后反而慢了？
在使用 thread-loader前：
使用 thread-loader后
多进程/多实例：并行压缩
2. ulifyjs-webpack-plugin 开启parallel参数
3. terser-webpack-plugin
预编译分包
1. html-webpack-externals-plugin 缺点：基础包(框架基础包，业务基础包)太多，产生太多基础包
2. split-chuncks 缺点：每次都会对基础包进行分析
3. DLLplugin，DllReferencePlugin，将react react-dom等包分离出来生成包文件，及manifest.json引用
DLLPlugin使用方法：
1. 创建webpack.dll.js文件，并添加如下配置
2. package.json中添加指令：
3. 在webpack.prod.js中引用
4. 构建前后对比
使用前：
使用后：
缓存提升二次构建速度
1. 开启babel-loader的缓存 loader: 'babel-loader?cacheDirectory=true',
2. 开启terser-webpack-plugin 缓存 cache:true
可以看见node_modules目录下面多出了一个插件的缓存目录
3. 使用 hard-source-webpack-plugin
缩小构建目标
目的：尽可能减少构建模块
比如babel-loader不接信息node_modules
treeshaking去除无用CSS引用
使用purgecss-webpack-plugin和mini-css-extract-plugin配合使用
图片压缩
有很多定制选项：引入更多的第三方优化插件；支持多种图片格式
压缩原理
动态polyfill
第三种 es-shimes
根据不同的userAgent来返回对应的polyfill
国内浏览器厂商会魔改userAgent，导致polyfill失败
降级方案：运行一下polyfill文件，如果失败就全部引入polyfill文件。
