英文 | https://medium.com/frontend-canteen/13-webpack-optimization-tips-you-should-know-668666f8c020
翻譯 | 楊小愛
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即可。
配置：
// import webpack
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(),
],
} 06、縮小 JavaScript 代碼
terser-webpack-plugin 可以壓縮和去重 JavaScript 代碼。
安裝：
npm i terser-webpack-plugin -D 配置：
const TerserPlugin = require('terser-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // remove console statement
},
},
}),
],
} 07、tree-shaking
tree-shaking 就是：隻編譯實際用到的代碼，不編譯項目中沒有用到的代碼。
在 Webpack5 中，預設情況下會啟用 tree-shaking。我們隻需要確定在最終編譯時使用生産模式。
module.exports = {
mode: 'production'
} 08、source-map
當我們的代碼出現bug時，source-map可以幫助我們快速定位到源代碼的位置。但是這個檔案很大。
為了平衡性能和準确性，我們應該：在開發模式下生成更準确（但更大）的 source-map；在生産模式下生成更小（但不那麼準确）的源映射。
開發模式：
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
} 生産方式：
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
} 09、Bundle Analyzer
我們可以使用 webpack-bundle-analyzer 來檢視打包後的 bundle 檔案的體積，然後進行相應的體積優化。
安裝：
npm i webpack-bundle-analyzer -D 配置：
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
// config
plugins: [
new BundleAnalyzerPlugin(),
] 改善使用者體驗
10、子產品延遲加載
如果子產品沒有延遲加載，整個項目的代碼會被打包成一個js檔案，導緻單個js檔案體積非常大。那麼當使用者請求網頁時，首屏的加載時間會更長。
使用子產品懶加載後，大js檔案會被分割成多個小js檔案，加載時網頁按需加載，大大提高了首屏的加載速度。
要啟用延遲加載，我們隻需要編寫如下代碼：
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// lazy-load
component: () => import('../views/home/home.vue'),
},
] 11、壓縮包
Gzip是一種常用的檔案壓縮算法，可以提高傳輸效率。但是，此功能需要後端配合。
安裝：
npm i compression-webpack-plugin -D 配置：
const CompressionPlugin = require('compression-webpack-plugin')
// config
plugins: [
// gzip
new CompressionPlugin({
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
] 12、base64
對于一些小圖檔，可以轉成base64編碼，這樣可以減少使用者的HTTP請求次數，提升使用者體驗。url-loader 在 webpack5 中已被棄用，我們可以使用 assets-module 代替。
配置：
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
// Conditions for converting to base64
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator: {
filename: 'images/[contenthash][ext][query]',
},
}, 13、正确配置哈希
我們可以将哈希添加到捆綁檔案中，這樣可以更輕松地處理緩存。
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,
}, 以上就是我跟你分享的13個關于Webpack的技巧，希望對你有用。
結論
最後，我們可以通過以下這張思維導圖來總結。
感謝你的閱讀，喜歡的話，請記得點贊我。