上一篇，總結(jié)了 webpack4.0 進階，其中包括：
- px 自動轉(zhuǎn)rem
- Tree Shaking 的使用和原理分析
- Scope Hositing 使用和原理分析
- 優(yōu)化構(gòu)建命令行的顯示日志
這篇，我們從兩速度和體積來分析代碼，進行優(yōu)化。
速度分析
插件：speed-measure-webpack-plugin
作用：
- 分析整個打包總耗時
- 每個loader和插件的耗時情況
代碼如下：
體積分析
插件：webpack-bundle-analyzer
作用：
- 依賴的第三方模塊文件大小
- 業(yè)務(wù)里面組件代碼大小
代碼如下：
體積分析-多進程/多實例構(gòu)建
可選方案：parallel-webpack、HappyPack、thread-loader（官方推薦）
thread-loader / HappyPack 原理：每次 webpack 解析一個模塊，thread-loader/HappyPack 會將它及它的依賴分配給 node worker 線程中
代碼如下：
體積分析-多進程/多實例 并行壓縮
方法一：parallet-uglify-plugin
方法二：Uglifyjs-webpack-plugin 開啟 parallet 參數(shù)
方法三：terser-webpack-plugin 開啟 parallet 參數(shù)
方法二和方法三 區(qū)別：后者可以壓縮 es6 語法
代碼如下：
開啟 parallet 參數(shù)，構(gòu)建速度將100ms ——> 80ms
體積分析-緩存
目的：提升二次構(gòu)建速度
思路：
babel-loader 開啟緩存，js 語法轉(zhuǎn)化
terser-webpack-plugin 開啟緩存，在代碼壓縮階段提升速度
使用 cache-loader 或者 hard-source-webpack-plugin，提升模塊轉(zhuǎn)換階段
代碼如下：
耗時從 50ms —>10ms
體積分析-縮小構(gòu)建目標
目的：盡可能的減少構(gòu)建模塊
比如：babel-loader 不解析 node_modules
減少文件搜素范圍：
- 優(yōu)化 resolve.modules 配置，盡量減少模塊搜索層級，在當(dāng)前根目錄查找
- 優(yōu)化 resolve.mainFields 配置，減少查找鏈路
- 優(yōu)化 resolve.extensions 配置，縮小查找范圍
- 合理使用 alias，縮小查找時間
代碼如下：
體積分析-tree shaking 擦除無用 css
插件：
purifycss-webpack-plugin
purgecss-webpack-plugin(最新)
webpack4：MiniCssExtractPlugin 配合使用
webpack3：ExtractTextWebpackPlugin 配合使用
代碼如下：
注意：path是絕對路徑
體積分析-圖片壓縮
插件：image-webpack-loader
相關(guān)參數(shù)：https://github.com/tcoopman/image-webpack-loader
該插件基于 Node 庫的 imagemin 或者 tinypng API
imagemin 庫的優(yōu)點：
- 有很多定制選項
- 可以引入更多第三方優(yōu)化插件，如 pngquart
- 可以處理多種圖片格式
代碼如下：
當(dāng)然，webpack 優(yōu)化還有很多，大家感興趣可以多去學(xué)習(xí)
