得益於 esbuild 的超高性能，vite 在誕生之初就備受關注，且一直保持着活躍的開發迭代。截至目前，vite 已經迭代到了 2.7.10 版本，各方面也基本具備了在生產使用的條件。這段時間，我在項目中嘗試了使用 vite 進行打包構建，本文就是這次構建的過程記錄。
基礎配置
首先使用vite 官方腳手架生成項目。
yarn create vite vite-demo --template react-ts
上面這行命令使用
react-ts模板創建了一個叫vite-demo的項目。由於我在的團隊日常使用 react 和 typescript 開發居多，因此選擇了react-ts這個模板，vite 官方支持的模板還有很多，可以在 create-vite 中查看。
項目初始化完成以后，目錄結構如下：
.
|____index.html
|____.gitignore
|____package.json
|____tsconfig.json
|____vite.config.ts
|____src
| |____App.tsx
| |____main.tsx
| |____App.css
| |____index.css
| |____vite-env.d.ts
| |____logo.svg
| |____favicon.svg
其中 vite.config.ts 內容如下：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()]
})
可以看出，vite 官方已經做了比較完善的封裝，相較於之前版本，開發體驗提升了很多。
按照指示安裝完依賴，啟動應用以后，速度確實很快。現在我們來做一些基本改造。
我通常使用 less 來寫樣式，vite 已經做了很好的支持，在安裝完依賴以后，只需要直接在代碼中引用 xxx.less 即可。對於一個久經考驗的開發者來說，樣式還是要引入作用域的，通常使用 css modules。
安裝 less 預處理器，
yarn add --dev less
然后修改 vite.config.ts 文件，添加 css modules 配置：
export default defineConfig({
...
css: {
modules: {
localsConvention: 'camelCaseOnly', // 我們使用駝峰形式
},
},
...
})
添加完配置以后，只要將原來的 xxx.less 改成 xxx.module.less 即可，這點與 create-react-app 是一樣的。
這里推薦一個 vscode 插件 clinyong.vscode-css-modules 可以實現編碼時樣式類名的智能提示，同時點擊樣式類名可以跳轉到樣式定義的地方，非常好用。如果在編寫樣式時使用的是中划線形式的命名方式，比如
.xxx-container，那么需要額外配置這個 vscode 插件，如下：{ "cssModules.camelCase": true }這樣可以實現編寫樣式時使用中划線形式，在代碼中使用的還是駝峰式的。
由於我開發的是一個中后台項目，使用了 antd 和 lodash，大家都知道，這兩個是按需加載大戶，以前我們使用 babel-plugin-import 來處理，vite 生態里也有很多類似的方案。我選用了 vite-plugin-imp 這個插件，修改 vite.config.ts 如下：
import vitePluginImp from 'vite-plugin-imp';
export default defineConfig({
...
plugins: [
...
vitePluginImp({
libList: [
{
libName: 'lodash',
libDirectory: '',
camel2DashComponentName: false,
},
{
libName: 'antd',
style(name) {
// use less
return `antd/es/${name}/style/index.js`;
},
},
],
}),
],
css: {
...
preprocessorOptions: {
less: {
javascriptEnabled: true,
},
},
},
});
antd 已經默認支持了 Tree Shaking，上面的配置最終只會處理樣式的按需加載。lodash 不支持 Tree Shaking，我們也可以使用 ESM 版本 lodash-es，這樣就可以不使用 vite-plugin-imp 了，配置如下：
export default defineConfig({ resolve: { alias: [{ find: /^lodash$/, replacement: 'lodash-es', }], }, });
通常，我們在開發前端項目時，需要一些代理來調用后端 API 接口，vite 配置如下：
export default defineConfig({
...
server: {
proxy: {
'/api_path/': {
target: 'http://xxx.server.domain.com/',
changeOrigin: true,
},
},
},
});
代理底層都是基於 http-proxy 實現，這里不做過多說明了。
現在可以愉快的開發代碼了。
支持微前端構建
因為我們的中后台應用是使用微前端（qiankun）來管理的，上面的配置，打包完成后不能被 qiankun 識別，主要原因可以看看這里，我們需要做一些額外處理。
我們知道，使用 webpack 構建微前端是，需要添加如下三個配置項：
{
output: {
libraryTarget: 'umd',
library: `${APP_NAME}-[name]`,
jsonpFunction: `webpackJsonp_${APP_NAME}`,
}
}
在 vite 中，可以直接通過設置 build.rollupOptions.format 為 umd 來設置 UMD 規范，但是實際構建結果卻不能被 qiankun 識別，猜想是可能跟 vite 使用 html entry 有關系。
換一個思路，我們把當前整個應用當做一個 library 來構建，輸出為 UMD 規范，然后手動寫入一個 html 文件，加載這個輸出的 JS。
修改配置如下：
export default defineConfig({
...
build: {
lib: {
name,
entry: path.resolve(__dirname, 'src/index.tsx'),
formats: ['umd'],
},
},
...
})
配置完成之后，執行 yarn build 提示如下錯誤：
UMD and IIFE output formats are not supported for code-splitting builds.
因為我們的應用中有路由，使用了按需加載。我們將 rollup 的 inlineDynamicImports 配置打開：
export default defineConfig({
...
build: {
rollupOptions: {
output: {
inlineDynamicImports: true,
},
},
},
...
})
這樣，構建完成之后，dist 目錄下有兩個文件 style.css 和 xxx.umd.js。
現在我們要生成 index.html 了。
因為 vite 在開發態直接使用 ES Modules，是不打包的，因此生成開發態的 index.html 和生產的 index.html 是不同的。
我們修改項目根目錄下的 index.html 為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<!-- style placeholder -->
</head>
<body>
<div id="root"></div>
<!-- script placeholder -->
</body>
</html>
注意當中的兩行注釋，我們會在開發態和生產構建做不同的處理。
vite 插件 API 中有一個 transformindexhtml 可以定制開發態的 html 內容，因此，我們開發態的配置如下：
// https://vitejs.dev/config/
export default defineConfig({
...
plugins: [
...
{
name: 'dev html',
apply: 'serve',
transformIndexHtml(indexHtml: string) {
return indexHtml
.replace('<!-- style placeholder -->', '')
.replace('<!-- script placeholder -->', '<script type="module" src="/src/index.tsx"></script>');
},
},
...
],
});
生產構建需要借助於 @rollup/plugin-html 這個插件來實現定制 html 內容。
import html from '@rollup/plugin-html';
import fs from 'fs';
const entryHtml = fs.readFileSync('./index.html', { encoding: 'utf-8' });
export default defineConfig({
...
plugins: [
...
{
name: 'build html',
apply: 'build',
...html({
template: () => {
return entryHtml
.replace(
'<!-- style placeholder -->',
'<link rel="stylesheet" type="text/css" href="style.css" />',
)
.replace(
'<!-- script placeholder -->',
`<script type="text/javascript" src="${name}.umd.js"></script>`,
);
},
}),
},
...
],
});
通過上面的配置，再次構建，qiankun 可以加載這個子應用了。
其他說明
1. 老舊瀏覽器的支持
由於我這次的項目是中后台項目，對老舊瀏覽器的支持訴求不強烈，就沒有在項目中做處理。其實 vite 官方也是給了解決方案的，就是 @vitejs/plugin-legacy 這個插件。
原理也非常簡單，就是通過 <script nomodule> 來實現在不支持 ES Modules 的瀏覽器執行相關腳本，同時使用 SystemJS 來加載模塊。
2. 關於 TypeScript 的說明
腳手架初始化完成以后就可以用 TypeScript 開發，這里格外說明一點，就是需要開啟編譯器選項 isolatedModules:true，因為 vite 使用 esbuild 處理 ts 文件，只將 ts轉換成 js 而不做類型檢查（依賴編輯器處理類型檢查，比如 vscode）。因此，當遇到一些純類型的導入導出時，會出錯，需要開啟 isolatedModules:true 來避免這個問題。如果因為一些原因無法開啟這個選項，則可以使用 rollup-plugin-friendly-type-imports 這個包來處理，這個包的 README 里也說明了為什么會有這樣的問題。
3. 對接 CDN
基於上面的配置構建出來的結果，瀏覽器在加載資源的時候，都是使用的根路徑（/）加載，如果使用 CDN 的話會出現資源加載 404 的問題。
我們可以配置 base 來設置基礎路徑，類似於 webpack 的 PUBLIC_PATH。
export default defineConfig({
base: '/some/public/path',
})
4. 構建出錯
4.1 找不到包
報錯信息為：
[plugin: vite:dep-scan] Failed to resolve entry for package "xxx"
通常是依賴包未在 package.json 正確配置 main、module 等字段，導致 vite 無法找到包的入口。
可以設置通過設置別名的方式，將其映射到正確的文件上。
export default defineConfig({
resolve: {
alias: [{
find: /^SOME_PACKAGE_NAME$/,
replacement: 'SOME_PACKAGE_NAME/dist/xxx.es.js',
}],
},
});
4.2 請求超時
報錯信息為：
net::ERR_ABORTED 408 (Request Timeout)
啟動開發服務器后，瀏覽器出現請求超時錯誤。是因為 vite 檢測到對依賴包的請求，且該依賴尚未被 vite 處理過，這時候會會觸發預構建，導致請求超時以及頁面重載。
我們可以多刷新幾次等 vite 完成預構建，也可以將依賴加入 optimizeDeps.include 來提前處理。
4.3 導入模塊出錯
報錯信息為：
Internal server error: Failed to resolve import "./chunk-7L3SPMWF.js" from "node_modules/.vite/antd.js?v=7bec0e27". Does the file exist?
可能是因為一些依賴包輸出的格式 vite 還不支持，可以看看這個 issue。
這個錯誤只在開發服務器運行處理過程中存在，待頁面正常展示后就不出現了，忽略這個錯誤之后，目前看也沒產生什么影響。
小結
總體來說，vite 已經基本具備了生產使用的條件。如果是常規的應用開發，vite 的配置非常簡單，可以說是開箱即用。如果需要添加額外的配置也非常方便。
目前比較大的問題是周邊生態還不是特別成熟，很多已經成熟的包對於 vite（ES Modules）的支持比較弱。同時，如果團隊內基建氛圍比較濃厚的話，自己開發的工具包也要考慮這方面的問題。
常見面試知識點、技術方案分析、教程，都可以掃碼關注公眾號“眾里千尋”獲取，或者來這里 https://everfind.github.io/posts/ 。
