2018 上半年：工程化體系建設與 Vue 深入實踐

2018 上半年的核心工作圍繞三件事：中後台系統的架構升級、內部組件庫的從零搭建、以及工程化流水線的完善。這裏做一個系統性的覆盤，記錄技術選型的思考和實際踩過的坑。

H1 重點項目回顧

中後台系統：Webpack 3 到 4 的遷移 + TypeScript 漸進引入

年初接手了一個跑了兩年的中後台系統，技術棧是 Webpack 3 + Vue 2.3，構建時間穩定在 45 秒左右。當時面臨兩個選擇：一是小修小補繼續維護，二是做一次徹底的工程化升級。考慮到團隊後續要並行維護多箇中後台項目，我選擇了後者。

Webpack 4 升級的核心收益不在版本號，而在於 mode 機制和 Tree Shaking 的優化。遷移過程中最大的阻力來自 plugin 生態的兼容性——好幾個 Webpack 3 的 plugin 還沒跟上 4.x，需要找替代方案或者自己寫適配。最終構建時間從 45s 降到 12s，主要貢獻來自兩處：

// webpack.config.js 關鍵配置
module.exports = {
  mode: 'production',
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

加上 HardSourceWebpackPlugin 做持久化緩存和路由懶加載，開發環境熱更新體驗好了很多。

TypeScript 漸進式遷移是更長期的投入。遺留代碼裏 any 氾濫，不可能一次性改完。採取的策略是：新模塊強制 TS，舊模塊通過 allowJs 逐步覆蓋。到六月底，核心模塊的覆蓋率大概在 60%。這個過程中最大的收穫是理解了類型系統不是"限制"，而是一種編譯期的契約文檔——特別是多人協作場景下，類型定義本身就是最好的接口説明。

組件庫建設

上半年啓動了內部共享組件庫的建設。目標不是造一套新的 UI 框架，而是基於 Element UI 封裝業務層通用組件：權限按鈕、數據字典選擇器、複雜搜索表單、通用 CRUD 表格等。

設計上做了幾個關鍵決策：

Props 驅動，不侵入業務邏輯：組件只關心 UI 和數據流，業務邏輯通過 slot 和 event 委託出去
TypeScript 類型導出：每個組件同時導出類型定義，使用方有完整的類型提示
按需引入：配合 babel-plugin-component，避免全量打包

// 組件類型導出示例
export interface CrudTableProps {
  columns: ColumnConfig[];
  fetchApi: (params: QueryParams) => Promise<PaginatedResult<any>>;
  rowKey?: string;
  toolbar?: ToolbarConfig[];
}

到六月底，組件庫覆蓋了 3 箇中後台項目的 70% 通用場景，新項目初始化時間縮短了約 40%。

工程化改進

CI 集成

之前團隊部署靠手動 npm run build 然後 scp 到服務器，風險很高。上半年接入了 GitLab CI，pipeline 包含 lint -> test -> build -> deploy 四個階段。關鍵配置：

yaml

# .gitlab-ci.yml 核心流程
stages:
  - lint
  - test
  - build
  - deploy

lint:
  stage: lint
  script:
    - npm run lint
    - npm run type-check

build:
  stage: build
  script:
    - npm run build
  artifacts:
    paths:
      - dist/

部署環節接了釘釘通知，構建失敗會自動 at 相關開發。上線事故追溯從"誰部署的"變成了"哪個 MR 引入的"。

代碼質量工具鏈

ESLint + Prettier 的組合在團隊落地花了比預期更長的時間——核心矛盾不是規則本身，而是存量代碼的格式化成本。最終策略是：開啓 lint-staged 只對改動文件做檢查，存量代碼通過一次批量格式化 PR 統一處理。配合 commitlint 規範 commit message，代碼審查效率提升明顯。

踩過的坑

1. TypeScript 與 Vue 的兼容性問題

Vue 2.x 對 TypeScript 的支持並不完美。vue-property-decorator 的裝飾器語法在某些場景下類型推斷會丟失，特別是 mixins 和 provide/inject。最終的解決方案是：mixins 儘量用 composition 的方式替代，provide/inject 顯式聲明類型。

2. Webpack 4 的 sideEffects 配置

Tree Shaking 不工作的排查花了半天，最終發現是 package.json 裏沒聲明 sideEffects: false。加上之後 bundle 體積又減了 15%。這個教訓説明：升級工具鏈不能只改配置文件，依賴庫的 package.json 同樣需要檢查。

3. Nuxt.js SSR 的坑

做內容站 SEO 時用了 Nuxt，window is not defined 的問題反覆出現。根本原因是第三方庫在模塊頂層訪問了瀏覽器 API。解決方案是用 process.client 守衞，或者通過 require 在 mounted 階段動態引入。這個坑讓我認識到：SSR 不是換個框架就行，整條依賴鏈都需要適配。

H2 規劃

技術深度：

TypeScript 高級類型系統：泛型約束、條件類型、模板字面量類型，在組件庫中落地
React 生態跟進：React 16.7 的 Hooks 特性值得深入，計劃用一個內部項目做技術驗證
前端測試體系：目前只有零散的單元測試，目標是搭建組件庫的自動化測試 + CI 集成

工程體系：

前端監控接入 Sentry，覆蓋錯誤捕獲和性能指標上報
微前端調研：中後台系統越來越多，需要評估 qiankun / single-spa 的可行性
Docker 化構建環境，統一團隊的 Node 版本和構建依賴

技術影響力：

在團隊內做 2-3 次技術分享（Webpack 優化、TypeScript 實踐）
組件庫文檔站搭建，降低新人上手成本

小結

完成了中後台系統的 Webpack 4 升級和 TypeScript 漸進遷移，構建效率提升 73%
啓動了業務組件庫建設，覆蓋 3 個項目的通用場景
落地了 GitLab CI 流水線和代碼質量工具鏈，告別手動部署
解決了 Vue + TypeScript 兼容性、Webpack Tree Shaking、Nuxt SSR 等實際問題
H2 重點方向：React 驗證、測試體系、監控體系、微前端調研

2018 上半年：工程化體系建設與 Vue 深入實踐

H1 重點項目回顧 ​

中後台系統：Webpack 3 到 4 的遷移 + TypeScript 漸進引入 ​

組件庫建設 ​

工程化改進 ​

CI 集成 ​

代碼質量工具鏈 ​

踩過的坑 ​

H2 規劃 ​

小結 ​