Vite + Ant Design 初起啟動緩慢問題

記錄一下最近碰到的有趣問題。

Vite v4.2 搭配Ant Design v5 時，會有 run dev 初次啟動極度緩慢的問題，這情況在 Windows 特別明顯。經測試我個人的 PC 要花 6x 秒頁面才會顯示出來。(run dev 之後頁面開啟開始計算)

可參考這篇 issues:

vite 使用 antd 时, 在开发的首次启动非常慢 · Issue #11064 · vitejs/vite

由於這問題得知了一些技術知識點，vite 在處理 HMR 時，會先解析一次依賴關係，並將結果緩存在 /node_module/vite 底下的一個 cache 資料夾中。

可以透過 --force 參數強制更新 cache，或手動移除該資料夾，就能有效的測試冷啟動 (初次啟動) 的速度。

$ pnpm vite --force

由於 vite 的 HMR 原理與 webpack 不同，導致像 tailwind 或是 antd 這種很肥大的 CSS 或 UI 套件，在 dev 啟動時反而會很慢。

tailwind 的問題很早就被解決了，antd 則似乎是在 v5 版本做了一些按需加載的更動，與 vite 的載入方式不是很適配，導致冷啟動很慢的現象。

當時的應急解法是，設定 vite config 的 alias，將 antd 的導入強制指向打包後的 dist 資料夾，以減少內部依賴解析上的諸多計算。

// vite.config.js
export default defineConfig(({ command, mode }) => {
  const isLocalDev = command === 'serve'

  const antdAlias = {
    'antd/dist/reset.css': path.join(__dirname, 'node_modules/antd/dist/reset.css'),
    antd: path.join(__dirname, 'node_modules/antd/dist/antd.js'),
    '@ant-design/icons': path.join(__dirname, 'node_modules/@ant-design/icons/dist/index.umd.js'),
  }

  return {
    // ...
    resolve: {
    alias: {
      // ...
      ...(isLocalDev ? antdAlias : {}),
    },
  }
}

這問題已經在 vite v4.3 被解決。如果未來遇上其他套件也出現類似問題時，也許能用相同的做法來應急處理。