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