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

語言: CN / TW / HK

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

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

提高速度

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

結論

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