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