13個你應該知道的 Webpack 優化技巧

在這篇文章中，我將從三個方面分享一些我常用的技巧：

• 提高優化速度
• 壓縮打包檔案的大小
• 改善使用者體驗。

提高速度

1、執行緒載入器

多執行緒可以提高程式的效率，我們也可以在 Webpack 中使用。而thread-loader是一個可以在Webpack中啟用多執行緒的載入器。

安裝：

npm i thread-loader -D

配置：

{
       test: /\.js$/,
       use: [
         'thread-loader',
         'babel-loader'
       ],
}

2、快取載入器

在我們的專案開發過程中，Webpack 需要多次構建專案。為了加快後續構建，我們可以使用快取，與快取相關的載入器是快取載入器。

安裝：

npm i cache-loader -D

配置：

{
       test: /\.js$/,
       use: [
         'cache-loader',
         'thread-loader',
         'babel-loader'
       ],
}

3、Hot update

當我們在專案中修改一個檔案時，Webpack 預設會重新構建整個專案，但這並不是必須的。我們只需要重新編譯這個檔案，效率更高，這種策略稱為Hot update。

Webpack 內建了Hot update外掛，我們只需要在配置中開啟Hot update即可。

配置：

// import webpack
const webpack = require('webpack');

然後：

{
 plugins: [
     new webpack.HotModuleReplacementPlugin()
 ],
 devServer: {
     hot: true
 }
}

4、exclude & include

在我們的專案中，一些檔案和資料夾永遠不需要參與構建。所以我們可以在配置檔案中指定這些檔案，防止Webpack取回它們，從而提高編譯效率。

當然，我們也可以指定一些檔案需要編譯。

exclude : 不需要編譯的檔案

include : 需要編譯的檔案

配置：

{
   test: /\.js$/,
   include: path.resolve(__dirname, '../src'),
   exclude: /node_modules/,
   use: [
       'babel-loader'
   ]
}

減小打包檔案的大小

5、縮小 CSS 程式碼

css-minimizer-webpack-plugin 可以壓縮和去重 CSS 程式碼。

安裝：

npm i css-minimizer-webpack-plugin -D

配置：

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')

和

optimization: {
   minimizer: [
     new CssMinimizerPlugin(),
   ],
 }

6、縮小 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
         },
       },
     }),
   ],
 }

7、tree-shaking

tree-shaking 就是：只編譯實際用到的程式碼，不編譯專案中沒有用到的程式碼。

在 Webpack5 中，預設情況下會啟用 tree-shaking。我們只需要確保在最終編譯時使用生產模式。

module.exports = {
 mode: 'production'
}

8、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'
}

9、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的技巧，希望對你有用。

結論

最後，我們可以通過以下這張思維導圖來總結。