背景

最近發現專案(基於Vue2)構建比較慢，一次上線釋出需要 15 分鐘，效率低下。

如今這個時代，時間就是金錢，效率就是生命。

於是這兩天抽空對專案做了一次構建優化，線上(多國家)構建時間, 從 10分鐘 優化到 4分鐘, 本地單次構建時間，從 300秒 優化到 90秒，效果還不錯。

整個過程，改造成本不大，但是收益很可觀。

今天把 詳細的改造過程 和相關 技術原理 整理出來分享給大家，希望對大家有所幫助。

正文

首先看一下襬在面前的問題：

可以明顯看出： 整體構建環節耗時過長，效率低下，影響業務的釋出和回滾。

線上構建流程：

其中， Build base 和 Build Region 階段存在優化空間。

Build base 階段的優化，和運維團隊溝通過，後續會增加快取處理。

本次主要關注 Build Region 階段。

初步優化後，達到效果如下：

下面介紹這次優化的細節。

專案優化實戰

面對耗時大這個問題，首先要做耗時資料分析。

這裡引入 SpeedMeasurePlugin, 示例程式碼如下：

# vue.config.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

configureWebpack: (config) => {
  config.plugins.push(new SpeedMeasurePlugin());
}

得到結果如下：

得到： 

SMP  ⏱  Loaders

cache-loader, and 

vue-loader, and 

eslint-loader took 3 mins, 39.75 secs

  module count = 1894

cache-loader, and 

thread-loader, and 

babel-loader, and 

ts-loader, and 

eslint-loader took 3 mins, 35.23 secs

  module count = 482

cache-loader, and 

thread-loader, and 

babel-loader, and 

ts-loader, and 

cache-loader, and 

vue-loader took 3 mins, 16.98 secs

  module count = 941

cache-loader, and 

vue-loader, and 

cache-loader, and 

vue-loader took 3 mins, 9.005 secs

  module count = 947

mini-css-extract-plugin, and 

css-loader, and 

vue-loader, and 

postcss-loader, and 

sass-loader, and 

cache-loader, and 

vue-loader took 3 mins, 5.29 secs

  module count = 834

modules with no loaders took 1 min, 52.53 secs

  module count = 3258

mini-css-extract-plugin, and 

css-loader, and 

vue-loader, and 

postcss-loader, and 

cache-loader, and 

vue-loader took 27.29 secs

  module count = 25

css-loader, and 

vue-loader, and 

postcss-loader, and 

cache-loader, and 

vue-loader took 27.13 secs

  module count = 25

file-loader took 12.049 secs

  module count = 30

cache-loader, and 

thread-loader, and 

babel-loader took 11.62 secs

  module count = 30

url-loader took 11.51 secs

  module count = 70

mini-css-extract-plugin, and 

css-loader, and 

postcss-loader took 9.66 secs

  module count = 8

cache-loader, and 

thread-loader, and 

babel-loader, and 

ts-loader took 7.56 secs

  module count = 3

css-loader, and 

// ...


Build complete.

fetch translations

en has been saved!

id has been saved!

sp-MX has been saved!

vi has been saved!

zh-TW has been saved!

zh-CN has been saved!

th has been saved!

$ node ./script/copy-static-asset.js

✨  Done in 289.96s.

統計出耗時比較大的幾個loader:


Vue-loader 
eslint-loader
babel-loader
Ts-loader,
Thread-loader,
cache-loader

一般而言，程式碼編譯時間和程式碼規模正相關。

根據以往優化經驗，程式碼靜態檢查可能會佔據比較多時間，目光鎖定在 eslint-loader 上。

在生產構建階段， eslint 提示資訊價值不大，考慮在 build 階段去除，步驟前置。

比如在 commit 的時候做檢查，或者在 merge 的時候加一條流水線，專門做靜態檢查。

給出部分示例程式碼：

image: harbor.shopeemobile.com/shopee/nodejs-base:16

stages:
  - ci

ci_job:
  stage: ci
  allow_failure: false
  only:
    - merge_requests
  script:
    - npm i -g pnpm
    - pnpm pre-build && pnpm lint && pnpm test
  cache:
    paths:
      - node_modules
    key: project

於此，初步確定兩個優化方向:

優化構建流程，在生產構建階段去除不必要的檢查。
整合 esbuild，加快底層構建速度。

1. 優化構建流程

檢查專案的配置發現：

# vue.config.js

lintOnSave: true,

修改為：

# vue.config.js

lintOnSave: process.env.NODE_ENV !== 'production',

即：生產環境的構建不做 lint 檢查。

Vue 官網對此也有相關描述：https://cli.vuejs.org/zh/conf...

再次構建，得到如下資料：

 SMP  ⏱  Loaders
cache-loader, and 
vue-loader took 1 min, 34.33 secs
  module count = 2841
cache-loader, and 
thread-loader, and 
babel-loader, and 
ts-loader took 1 min, 33.56 secs
  module count = 485
vue-loader, and 
cache-loader, and 
thread-loader, and 
babel-loader, and 
ts-loader, and 
cache-loader, and 
vue-loader took 1 min, 31.41 secs
  module count = 1882
vue-loader, and 
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader, and 
sass-loader, and 
cache-loader, and 
vue-loader took 1 min, 29.55 secs
  module count = 1668
css-loader, and 
vue-loader, and 
postcss-loader, and 
sass-loader, and 
cache-loader, and 
vue-loader took 1 min, 27.75 secs
  module count = 834
modules with no loaders took 59.89 secs
  module count = 3258
...

Build complete.
fetch translations
vi has been saved!
zh-TW has been saved!
en has been saved!
th has been saved!
sp-MX has been saved!
zh-CN has been saved!
id has been saved!
$ node ./script/copy-static-asset.js

✨  Done in 160.67s.

有一定提升，其他 loader 耗時資料無明顯異常。

下面開始整合 esbuid。

整合 esbuild

這部分的工作，主要是：整合 esbuild 外掛到腳手架中。

具體程式碼的修改，要看具體情況，大體分為兩類：

自己用 webpack 實現了打包邏輯。
用的是 cli 自帶的打包配置，比如 vue-cli。

這兩種方式我都會介紹，雖然形式上有所差異，但是原理都是一樣的。

核心思路如下：

rules: [
    {
        test: /\.(js|jsx|ts|tsx)$/,
        loader: 'esbuild-loader',
        options: {
            charset: 'utf8',
            loader: 'tsx',
            target: 'es2015',
            tsconfigRaw: require('../../tsconfig.json'),
        },
        exclude: /node_modules/,
    },
    ...
]

const { ESBuildMinifyPlugin } = require('esbuild-loader');

optimization: {
    minimizer: [
        new ESBuildMinifyPlugin({
            target: 'es2015',
            css: true,
        }),
    ],
    ...
}

具體實現上，簡單區分為兩類，詳細配置如下：

一、webpack.config.js

npm i -D esbuild-loader

1. Javascript & JSX transpilation (eg. Babel)

In webpack.config.js:

  module.exports = {
    module: {
      rules: [
-       {
-         test: /\.js$/,
-         use: 'babel-loader',
-       },
+       {
+         test: /\.js$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'jsx',  // Remove this if you're not using JSX
+           target: 'es2015'  // Syntax to compile to (see options below for possible values)
+         }
+       },

        ...
      ],
    },
  }

2. TypeScript & TSX

In webpack.config.js:

  module.exports = {
    module: {
      rules: [
-       {
-         test: /\.tsx?$/,
-         use: 'ts-loader'
-       },
+       {
+         test: /\.tsx?$/,
+         loader: 'esbuild-loader',
+         options: {
+           loader: 'tsx',  // Or 'ts' if you don't need tsx
+           target: 'es2015',
+            tsconfigRaw: require('./tsconfig.json'), // If you have a tsconfig.json file, esbuild-loader will automatically detect it.
+         }
+       },

        ...
      ]
    },
  }

3. JS Minification (eg. Terser)

esbuild 在程式碼壓縮上，也有不錯的表現：

詳細對比資料見：https://github.com/privatenum...

In webpack.config.js:

+ const { ESBuildMinifyPlugin } = require('esbuild-loader')

  module.exports = {
    ...,

+   optimization: {
+     minimizer: [
+       new ESBuildMinifyPlugin({
+         target: 'es2015'  // Syntax to compile to (see options below for possible values)
+         css: true  // Apply minification to CSS assets
+       })
+     ]
+   },
  }

4. CSS in JS

如果你的 css 樣式不匯出為 css 檔案，而是通過比如'style-loader'載入的，也可以通過esbuild來優化。

In webpack.config.js:


  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            'css-loader',
+           {
+             loader: 'esbuild-loader',
+             options: {
+               loader: 'css',
+               minify: true
+             }
+           }
          ]
        }
      ]
    }
  }

更多 esbuild 案例，可以參考： https://github.com/privatenum...

二、vue.config.js

配置比較簡單，直接貼程式碼了：

// vue.config.js

const { ESBuildMinifyPlugin } = require('esbuild-loader');

module.exports = {
  // ...

  chainWebpack: (config) => {
    // 使用 esbuild 編譯 js 檔案
    const rule = config.module.rule('js');

    // 清理自帶的 babel-loader
    rule.uses.clear();

    // 新增 esbuild-loader
    rule
      .use('esbuild-loader')
      .loader('esbuild-loader')
      .options({
        loader: 'ts', // 如果使用了 ts, 或者 vue 的 class 裝飾器，則需要加上這個 option 配置， 否則會報錯： ERROR: Unexpected "@"
        target: 'es2015',
        tsconfigRaw: require('./tsconfig.json')
      })

    // 刪除底層 terser, 換用 esbuild-minimize-plugin
    config.optimization.minimizers.delete('terser');

    // 使用 esbuild 優化 css 壓縮
    config.optimization
      .minimizer('esbuild')
      .use(ESBuildMinifyPlugin, [{ minify: true, css: true }]);
  }
}

這一番組合拳打完，本地單次構建：