vite構建build選項配置（2024-05-29）

build.target?

類型：?string | string[]
默認：?'modules'
相關內容：?瀏覽器兼容性

設置最終構建的瀏覽器兼容目標。默認值是一個 Vite 特有的值：'modules'，這是指?支持原生 ES 模塊、原生 ESM 動態導入?和?import.meta?的瀏覽器。Vite 將替換?modules?為?['es2020', 'edge88', 'firefox78', 'chrome87', 'safari14']

另一個特殊值是 “esnext” —— 即假設有原生動態導入支持，并且將會轉譯得盡可能小：

如果?build.minify?選項為?'terser'，并且安裝的 Terser 版本小于 5.16.0，'esnext'?將會強制降級為?'es2021'。
其他情況下將完全不會執行轉譯。

轉換過程將會由 esbuild 執行，并且此值應該是一個合法的?esbuild 目標選項。自定義目標也可以是一個 ES 版本（例如：es2015）、一個瀏覽器版本（例如：chrome58）或是多個目標組成的一

build.modulePreload?

類型：?boolean | { polyfill?: boolean, resolveDependencies?: ResolveModulePreloadDependenciesFn }
默認值：?{ polyfill: true }

默認情況下，一個?模塊預加載 polyfill?會被自動注入。該 polyfill 會自動注入到每個?index.html?入口的的代理模塊中。如果構建通過?build.rollupOptions.input?被配置為了使用非 HTML 入口的形式，那么必須要在你的自定義入口中手動引入該 polyfill：

import 'vite/modulepreload-polyfill'

注意：此 polyfill?不適用于?Library 模式。如果你需要支持不支持動態引入的瀏覽器，你應該避免在你的庫中使用此選項。

此 polyfill 可以通過?{ polyfill: false }?來禁用。

每個動態導入要預加載的塊列表將由 Vite 計算。默認情況下，在載入這些依賴時，會使用一個包含?base?的絕對路徑。如果?base?是相對路徑（''?或者 './'），解析時則會使用?import.meta.url，以避免出現依賴于最終部署基路徑的絕對路徑。

目前有一個實驗性功能支持使用?resolveDependencies?函數對依賴項列表及其路徑進行細粒度控制。可以在這里?提供反饋。它期望接收一個?ResolveModulePreloadDependenciesFn?類型的函數:

type ResolveModulePreloadDependenciesFn = (url: string,deps: string[],context: {importer: string},
) => string[]

resolveDependencies?函數將為每個動態導入調用，同時帶著一個它所依賴的 chunk 列表。并且它還會為每個在入口 HTML 文件中導入的 chunk 調用。可以返回一個新的依賴關系數組，可能被過濾后變少了，也可能有更多依賴注入進來了，同時它們的路徑也被修改過。deps?路徑是相對于?build.outDir?的。若在注入該模塊到 HTML head 時使用?new URL(dep, import.meta.url)?獲取絕對路徑，則對于?hostType === 'js'，允許返回一個相對于?hostId?的路徑。

type ResolveModulePreloadDependenciesFn = (url: string,deps: string[],context: {importer: string},
) => string[]

解析得到的依賴路徑可以再在之后使用?experimental.renderBuiltUrl?更改。

build.polyfillModulePreload?

類型：?boolean
默認：?true
已廢棄?請使用?build.modulePreload.polyfill?替代

是否自動注入一個?模塊預加載 polyfill。

build.outDir?

類型：?string
默認：?dist

指定輸出路徑（相對于?項目根目錄).

build.assetsDir?

類型：?string
默認：?assets

指定生成靜態資源的存放路徑（相對于?build.outDir）。在?庫模式?下不能使用。

build.assetsInlineLimit?

類型：?number?|?((filePath: string, content: Buffer) => boolean | undefined)
默認：?4096?(4 KiB)

小于此閾值的導入或引用資源將內聯為 base64 編碼，以避免額外的 http 請求。設置為?0?可以完全禁用此項。

如果傳入了一個回調函數，可以通過返回一個布爾值來選擇是否加入。如果沒有返回任何內容，那么就會應用默認的邏輯。

Git LFS 占位符會自動排除在內聯之外，因為它們不包含其所表示的文件的內容。

注意

如果你指定了?build.lib，那么?build.assetsInlineLimit?將被忽略，無論文件大小或是否為 Git LFS 占位符，資源都會被內聯。

build.cssCodeSplit?

類型：?boolean
默認：?true

啟用/禁用 CSS 代碼拆分。當啟用時，在異步 chunk 中導入的 CSS 將內聯到異步 chunk 本身，并在其被加載時一并獲取。

如果禁用，整個項目中的所有 CSS 將被提取到一個 CSS 文件中。

注意

如果指定了?build.lib，build.cssCodeSplit?會默認為?false。

build.cssTarget?

類型：?string | string[]
默認值：?與?build.target?一致

此選項允許用戶為 CSS 的壓縮設置一個不同的瀏覽器 target，此處的 target 并非是用于 JavaScript 轉寫目標。

應只在針對非主流瀏覽器時使用。最直觀的示例是當你要兼容的場景是安卓微信中的 webview 時，它支持大多數現代的 JavaScript 功能，但并不支持?CSS 中的?#RGBA?十六進制顏色符號。這種情況下，你需要將?build.cssTarget?設置為?chrome61，以防止 vite 將?rgba()?顏色轉化為?#RGBA?十六進制符號的形式。

build.cssMinify?

類型：?boolean | 'esbuild' | 'lightningcss'
默認：?與?build.minify?一致

此選項允許用戶覆蓋 CSS 最小化壓縮的配置，而不是使用默認的?build.minify，這樣你就可以單獨配置 JS 和 CSS 的最小化壓縮方式。Vite 默認使用?esbuild?來最小化 CSS。將此選項設置為?'lightningcss'?可以改用?Lightning CSS?進行壓縮。設置為該項，便可以使用?css.lightningcss?選項來進行配置。

build.sourcemap?

類型：?boolean | 'inline' | 'hidden'
默認：?false

構建后是否生成 source map 文件。如果為?true，將會創建一個獨立的 source map 文件。如果為?'inline'，source map 將作為一個 data URI 附加在輸出文件中。'hidden'?的工作原理與?true?相似，只是 bundle 文件中相應的注釋將不被保留。

build.rollupOptions?

類型：?RollupOptions

自定義底層的 Rollup 打包配置。這與從 Rollup 配置文件導出的選項相同，并將與 Vite 的內部 Rollup 選項合并。查看?Rollup 選項文檔?獲取更多細節。

build.commonjsOptions?

類型：?RollupCommonJSOptions

傳遞給?@rollup/plugin-commonjs?插件的選項。

build.dynamicImportVarsOptions?

類型：?RollupDynamicImportVarsOptions
相關內容：?動態導入

傳遞給?@rollup/plugin-dynamic-import-vars?的選項。

build.lib?

類型：?{ entry: string | string[] | { [entryAlias: string]: string }, name?: string, formats?: ('es' | 'cjs' | 'umd' | 'iife')[], fileName?: string | ((format: ModuleFormat, entryName: string) => string) }
相關內容：?庫模式

構建為庫。entry?是必需的，因為庫不能使用 HTML 作為入口。name?則是暴露的全局變量，并且在?formats?包含?'umd'?或?'iife'?時是必需的。默認?formats?是?['es', 'umd']，如果使用了多個配置入口，則是?['es', 'cjs']。fileName?是輸出的包文件名，默認?fileName?是?package.json?的?name?選項，同時，它還可以被定義為參數為?format?和?entryAlias?的函數。