【Vue2.7 + TypeScript 實戰】後台前端架構：Webpack 優化全攻略

Image source:Webpack

前言： 在許多公司因專案規模與人力資源限制而難以迅速升級到 Vue3 的現實背景下，如何在現有 Vue2 架構上持續提升前端效能和維護性成為一大挑戰。本系列將以我在舊公司實踐 Vue2.7 穩定版、結合 TypeScript 與 JavaScript Class 模式的寶貴經驗為例，分享一套後台前端架構設計及 Webpack 優化的實戰方案。從解析常見後台功能的應用案例到探討如何運用 class 寫法重構程式碼，本文旨在為正處於技術升級抉擇邊緣的團隊提供一個切實可行的參考藍圖。未來系列文章將進一步介紹 Vue2.7 與新功能的銜接技巧，以及面向 Vue3 的架構翻新規劃，期待為大家帶來更多啟發與實用建議。

以下是官方聲明：

Vue 2 已經到達終止支援 (EOL) 時間

Vue 2.0 發佈於 7 年前的 2016 年。這是 Vue 成為主流框架過程中的一個重要里程碑。目前的許多 Vue 用戶都是在 Vue 2 時代開始使用 Vue 的，並用它構建了許多出色的專案。 然而，同時維護兩個大版本對我們來說是無法長期持續的。隨著 Vue 3 及其生態系統的逐步成熟，團隊是時候繼續前進，將精力集中在最新的大版本上了。 Vue 2 已於 2023 年 12 月 31 日達到終止支援時間。它不再會有新增功能、更新或問題修復。不過，它仍然可以從所有現有的分發管道 (CDN、套件管理器、GitHub 等) 上取得。 如果你要啟動一個新項目，請從 Vue 的最新版本 (3.x) 開始。我們也強烈建議目前的 Vue 2 使用者了解(遷移指南)，儘管我們理解並非所有使用者都有足夠的資源或動力進行升級。如果你需要繼續使用 Vue 2，但又對不在維護的軟體有合規性或安全性要求，請移步了解 HeroDevs 對 Vue 2 的無限期支援 (NES)。

但迫於現實種種無奈，好在官方還留有一個最終穩定版，接者我們來依照文檔來重溫 vue2 吧~

安裝

相容性 Vue 不支援 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支援所有與 ECMAScript 5 相容的瀏覽器。

語意化版本控制 Vue 在其所有專案中公佈的功能和行為都遵循語義化版本控制。對於未公佈的或內部暴露的行為，其變更會描述在發布說明中。

更新日誌 最新穩定版本：2.7.16

安裝 nvm

為了確保與各種現代化開發工具（例如 Webpack、Babel 等）有更好的相容性與效能，使用 Node 14 或 16 會是較佳選擇。

環境安裝流程請參照文檔

或直接安裝 nvm-windows

然後使用以下命令確認安裝是否成功：

command -v nvm

如果成功，會顯示 nvm 的路徑或版本號。這樣你就可以開始使用 nvm 管理多個 Node.js 版本了。

Webpack build 優化

由於官方文檔已引導舊專案遷移使用 vite，以下就介紹我以前維護 Webpack 專案所使用的編譯優化設定(vue.config.js)

1. 使用 externals 與 CDN

在 production 模式下，透過設定 externals 將如 Vue、Vue Router、Vuex、axios、moment 等第三方庫排除出 bundle，再由 CDN 提供資源，減少打包體積，並提升載入速度與瀏覽器快取效果。

/** cdn設置 */
configureWebpack: (config) => {
  if (isProduction) {
    // eslint-disable-next-line no-param-reassign
    config.externals = {
      vue: "Vue",
      "vue-router": "VueRouter",
      vuex: "Vuex",
      axios: "axios",
      moment: "moment", // 現在建議換成輕量化的 day.js
      // ...其他 UI 套件
    };
  }
},

2. 分割代碼與優化 chunk

透過 webpack 的 splitChunks 配置，我們將 node_modules 中的第三方庫分割出來，並利用動態命名（例如用 package 名稱作為 chunk 名），使得各 chunk 能夠充分利用瀏覽器緩存，並且降低單一檔案的體積。

configureWebpack: (config) => {
  if (isProduction) {
    config.optimization = {
      splitChunks: {
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `${packageName.replace('@', '')}`;
            },
          },
        },
      },
    };
  }
},

3. 資源處理與忽略

在 chainWebpack 中，我們透過 copy 插件忽略不必要的資源（如 JSON、通用模組、圖片等），這可以避免將非必要的檔案也一起打包到正式上線的資源中，達到更精簡的輸出。

chainWebpack: (config) => {
  config.resolve.alias.set("@", resolve("vendor"));

  if (isProduction) {
    config.plugin("html-index").tap((args) => {
      // eslint-disable-next-line no-param-reassign
      args[0].cdn = cdn;
      return args;
    });
  }
},

4. 動態輸出與部署目標區分

我們利用環境變數（例如 VUE_APP_FOLDER 與 VUE_APP_AREA）來控制不同部署目標的輸出資料夾和全域樣式，這樣可以依據不同的域名或環境生成對應的 build 結果，方便運維與上線管理。

// vue.config.js
const path = require('path');

// 根據環境變數設定預設值
const folder = process.env.VUE_APP_FOLDER || 'default-folder';
const area = process.env.VUE_APP_AREA || 'default-area';

module.exports = {
  // 根據生產或開發環境設定 publicPath
  publicPath: process.env.NODE_ENV === 'production' ? `/${folder}/` : '/',
  // 動態設定輸出目錄
  outputDir: path.resolve(__dirname, 'dist', folder),
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/global-${area}.scss";`
      }
    }
  }
}

5. 其他優化措施

• 如果需要進一步壓縮，我們也可以啟用 TerserPlugin 來移除多餘的註解和空白，進一步縮小 bundle 體積。

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false,
            },
          },
          extractComments: false,
        }),
      ],
    },
  },
}

• 對於正式上線的版本，我們會關閉 productionSourceMap，避免暴露源碼並加快加載速度。

module.exports = {
  productionSourceMap: process.env.VUE_APP_PRODUCTION_TYPE !== 'online'
}

結語

儘管 Vue 官方推薦轉向 Vite，但對於無法立即遷移的專案來說，深入優化 webpack 依然是一個切實可行的方案。透過靈活運用各項優化技術，不僅能提升效能，也能延長專案的壽命。希望這些建議能為你的專案帶來新的突破。