一，目標
今天打算做一些webpack打包編譯的速度優化。
二，準備工作
當前webpack版本 4.43.0
首先，既然是做速度優化，就得先知道當前的編譯速度是多少。
推薦這個插件：speed-measure-webpack-plugin
GitHub地址：
https://github.com/stephencookdev/speed-measure-webpack-plugin?github.com/stephencookdev/speed-measure-webpack-plugin
npm i -D speed-measure-webpack-plugin
用法也很簡單，官方文檔里也有
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin(); module.exports = smp.wrap(webpackConfig);
然后我們再運行一下build命令
添加圖片注釋，不超過 140 字（可選）
終端里會出現上面這張圖，還是蠻清晰的，每個模塊的編譯時間，包括plugin的執行時間，都會有，報紅的時間都是超過10s的
（補充：這里的modules with no loaders實際上就是無需編譯瀏覽器可識別的js）
OK，既然已經有了時間了，那我開始優化了。
三，確定方案
Google了一下，目前有兩種主流方案：
happypack和thread-loader
先來看一下happypack，這里是GitHub地址
看了官方文檔后，果斷放棄，為什么？
添加圖片注釋，不超過 140 字（可選）
添加圖片注釋，不超過 140 字（可選）
噗呲，作者都推薦了thread-loader了，那我還有啥好說的，直接上鏈接：
npm install --save-dev thread-loader
按照文檔一通配置，我先來針對eslint-loader試一下效果
{ enforce: 'pre', test: /\.(js|jsx)$/, exclude: [ /node_modules/ ], include: [ path.resolve(__dirname, '../src') ], use: [ { loader: "thread-loader" }, { loader: 'eslint-loader' } ] },
其實就是放到需要優化的loader之前
再次執行
添加圖片注釋，不超過 140 字（可選）
這。。。。。。
重新加一些參數
{ enforce: 'pre', test: /\.(js|jsx)$/, exclude: [ /node_modules/ ], include: [ path.resolve(__dirname, '../src') ], use: [ { loader: "thread-loader", options: { workerParallelJobs: 50, poolParallelJobs: 50 } }, { loader: 'eslint-loader' } ] },
再次執行
添加圖片注釋，不超過 140 字（可選）
好像相比上次好了一點點，但是竟然還是沒有去掉的時候速度快。
不過確實webpack編譯時間每次都不一樣，所以要多編譯幾次，然后看大致的平均時間：
我經過多次編譯對比之后發現，好像確實是不添加的快。。
添加圖片注釋，不超過 140 字（可選）
看到官方的這條提示，我明白了，原來真的不是所有的loader加了這個都會變快的，有的真的甚至會變慢，所以還是需要親自編譯觀察對比才行。
接著我來試一下sass-loader部分：
{ test: /\.(scss|css)$/, use: [ { loader: "thread-loader", options: { workerParallelJobs: 50, poolParallelJobs: 50 } }, { loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { sourceMap: false, modules: { localIdentName: config.defaultLocalIdentName } } }, { loader: 'postcss-loader' }, { loader: 'sass-loader' } ] },
老樣子，將這個thread-loader放到所有的樣式loader的最前面，再次編譯
添加圖片注釋，不超過 140 字（可選）
唉，看來真的沒有變快，依然差不多，甚至有時候還不如不添加。。
補充：這里有一個坑，如果你這么配置，報了這個錯誤
添加圖片注釋，不超過 140 字（可選）
解決方案是將thread-loader放到minicssextractplugin.loader后面就行了，附上issue鏈接
這里還有一個坑，如果你的sass-loader版本是8.0的，那么你直接這么配置會報錯
添加圖片注釋，不超過 140 字（可選）
你需要將sass-loader版本號降到7.3.1，然后再跑就OK了，附上issue鏈接
四，結論
1，使用speed-measure-webpack-plugin進行打包速度檢測，記得多試幾次，看平均時間；
2，Happypack不再維護，特別是Webpack 4+，優先考慮thread-loader；
3，thread-loader一定要記得配置參數，多次對比發現配置比默認要快一些；
4，thread-loader并不是完全正向有效的，如果loader本身執行并不復雜，模塊并不多，使用了可能會拖慢速度，因此是否需要使用還是要自己對比看看。
浙公網安備 33010602011771號