Webpack 是目前前端開發最重要的構建工具。無論是自己的日常開發，還是準備面試，都應該掌握一些關于 Webpack 的優化技巧。 在這篇文章中，我將從三個方面分享一些我常用的技巧： 提高優化速度 壓縮打包文件的大小 改善用戶體驗。
01、線程加載器
多線程可以提高程序的效率，我們也可以在 Webpack 中使用。而thread-loader是一個可以在Webpack中啟用多線程的加載器。
安裝：
npm i thread-loader -D
配置：
{ test: /\.js$/, use: [ 'thread-loader', 'babel-loader' ], }
02、緩存加載器
在我們的項目開發過程中，Webpack 需要多次構建項目。為了加快后續構建，我們可以使用緩存，與緩存相關的加載器是緩存加載器。
安裝：
npm i cache-loader -D
配置：
{ test: /\.js$/, use: [ 'cache-loader', 'thread-loader', 'babel-loader' ], }
03、Hot update
當我們在項目中修改一個文件時，Webpack 默認會重新構建整個項目，但這并不是必須的。我們只需要重新編譯這個文件，效率更高，這種策略稱為Hot update。
Webpack 內置了Hot update插件，我們只需要在配置中開啟Hot update即可。
配置：
const webpack = require('webpack');
然后：
{ plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true } } 04、exclude & include
在我們的項目中，一些文件和文件夾永遠不需要參與構建。所以我們可以在配置文件中指定這些文件，防止Webpack取回它們，從而提高編譯效率。
當然，我們也可以指定一些文件需要編譯。
exclude : 不需要編譯的文件
include : 需要編譯的文件
使用過濾方法的代碼幾乎相同，但使用方法會改變訪問模板內值的方式。但是，如果我們希望能夠將變量傳遞給過濾過程，那么就應該選擇方法這條路。
配置：
{ 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(), ], }