Webpack 是目前前端開發最重要的(de)構建工具。無論是自己的(de)日常開發，還(hái)是準備面試，都應該掌握一些關于 Webpack 的(de)優化(huà)技巧。 在這(zhè)篇文章(zhāng)中，我将從三個(gè)方面分(fēn)享一些我常用(yòng)的(de)技巧： 提高(gāo)優化(huà)速度 壓縮打包文件的(de)大(dà)小 改善用(yòng)戶體驗。
01、線程加載器
多(duō)線程可(kě)以提高(gāo)程序的(de)效率，我們也(yě)可(kě)以在 Webpack 中使用(yòng)。而thread-loader是一個(gè)可(kě)以在Webpack中啓用(yòng)多(duō)線程的(de)加載器。
安裝：
npm i thread-loader -D
配置：
{ test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], }
02、緩存加載器
在我們的(de)項目開發過程中，Webpack 需要多(duō)次構建項目。爲了(le)加快(kuài)後續構建，我們可(kě)以使用(yòng)緩存，與緩存相關的(de)加載器是緩存加載器。
安裝：
npm i cache-loader -D
配置：
{ test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], }
03、Hot update
當我們在項目中修改一個(gè)文件時(shí)，Webpack 默認會重新構建整個(gè)項目，但這(zhè)并不是必須的(de)。我們隻需要重新編譯這(zhè)個(gè)文件，效率更高(gāo)，這(zhè)種策略稱爲Hot update。
Webpack 内置了(le)Hot update插件，我們隻需要在配置中開啓Hot update即可(kě)。
配置：
const webpack = require('webpack');
然後：
{ plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true } } 04、exclude & include
在我們的(de)項目中，一些文件和(hé)文件夾永遠(yuǎn)不需要參與構建。所以我們可(kě)以在配置文件中指定這(zhè)些文件，防止Webpack取回它們，從而提高(gāo)編譯效率。
當然，我們也(yě)可(kě)以指定一些文件需要編譯。
exclude : 不需要編譯的(de)文件
include : 需要編譯的(de)文件
使用(yòng)過濾方法的(de)代碼幾乎相同，但使用(yòng)方法會改變訪問模闆内值的(de)方式。但是，如果我們希望能夠将變量傳遞給過濾過程，那麽就應該選擇方法這(zhè)條路。
配置：
{ test: /\.js$/, include: path.resolve(__dirname, '../src'), exclude: /node_modules/, use: [ 'babel-loader' ] }
減小打包文件的(de)大(dà)小 05、縮小 CSS 代碼
css-minimizer-webpack-plugin 可(kě)以壓縮和(hé)去重 CSS 代碼。
安裝：
npm i css-minimizer-webpack-plugin -D
配置：
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
和(hé)
optimization: { minimizer: [ new CssMinimizerPlugin(), ], }