前端開(kāi)發(fā)利器Vite完整版詳解

更新時(shí)間：2023年11月14日 10:42:02 作者：勒布朗-前端

這篇文章主要給大家介紹了關(guān)于前端開(kāi)發(fā)利器Vite完整版詳解的相關(guān)資料,Vite是一種基于ES模塊的開(kāi)發(fā)服務(wù)器和構(gòu)建工具,專為現(xiàn)代化的前端開(kāi)發(fā)而設(shè)計(jì),需要的朋友可以參考下

序論：

開(kāi)發(fā)環(huán)境：ESM+HMR:來(lái)實(shí)現(xiàn)模塊的熱更新;類似于webpack-server

生產(chǎn)環(huán)境：Rollup: 打包工具rollup的產(chǎn)生就是針對(duì)開(kāi)發(fā)js庫(kù)的,生成代碼只是把我們的代碼轉(zhuǎn)碼成目標(biāo)js并無(wú)其他

Vite 的快，主要體現(xiàn)在兩個(gè)方面: 快速的冷啟動(dòng)和快速的熱更新。而 Vite 之所以能有如此優(yōu)秀的表現(xiàn)，完全歸功于 Vite 借助了瀏覽器對(duì) ESM 規(guī)范的支持，采取了與 Webpack 完全不同的 unbundle 機(jī)制。

1.快速冷啟動(dòng)：Vite只啟動(dòng)一臺(tái)靜態(tài)頁(yè)面的服務(wù)器，不會(huì)打包全部項(xiàng)目文件代碼，服務(wù)器根據(jù)客戶端的請(qǐng)求加載不同的模塊處理，實(shí)現(xiàn)按需加載，而我們所熟知的webpack則是，一開(kāi)始就將整個(gè)項(xiàng)目都打包一遍，再開(kāi)啟dev-server，如果項(xiàng)目規(guī)模龐大，打包時(shí)間必然很長(zhǎng)。

2.打包編譯速度：當(dāng)需要打包到?產(chǎn)環(huán)境時(shí)，vite使?傳統(tǒng)的rollup進(jìn)?打包，所以，vite的優(yōu)勢(shì)是體現(xiàn)在開(kāi)發(fā)階段，另外，由于vite使?的是ES Module，所以代碼中不可以使?CommonJs；

3.熱模塊更新：在HRM熱更新??，當(dāng)某個(gè)模塊內(nèi)容改變時(shí)，讓瀏覽器去重新請(qǐng)求該模塊即可，?不是像webpack重新將該模塊的所有依賴重新編譯；

vite優(yōu)缺點(diǎn)：vite優(yōu)點(diǎn) -unbundle 機(jī)制的核心:

模塊之間的依賴關(guān)系的解析由瀏覽器實(shí)現(xiàn)；
文件的轉(zhuǎn)換由 dev server 的 middlewares 實(shí)現(xiàn)并做緩存；
不對(duì)源文件做合并捆綁操作；

vite缺點(diǎn)：由于 unbundle 機(jī)制，首屏期間、懶加載方面需要額外做以下工作:和 Webpack 對(duì)比，Vite 把需要在 dev server 啟動(dòng)過(guò)程中完成的工作，轉(zhuǎn)移到了 dev server 響應(yīng)瀏覽器請(qǐng)求的過(guò)程中，不可避免的導(dǎo)致首屏性能下降。不過(guò)首屏性能差只發(fā)生在 dev server 啟動(dòng)以后第一次加載頁(yè)面時(shí)發(fā)生。之后再 reload 頁(yè)面時(shí)，首屏性能會(huì)好很多。原因是 dev server 會(huì)將之前已經(jīng)完成轉(zhuǎn)換的內(nèi)容緩存起來(lái)。

不對(duì)源文件做合并捆綁操作，導(dǎo)致大量的 http 請(qǐng)求；
dev server 運(yùn)行期間對(duì)源文件做 resolve、load、transform、parse 操作；
預(yù)構(gòu)建、二次預(yù)構(gòu)建操作也會(huì)阻塞首屏請(qǐng)求，直到預(yù)構(gòu)建完成為止。

vite架子分析

1、打包構(gòu)建：

 npm run build

默認(rèn)情況下，構(gòu)建會(huì)輸出到 dist 文件夾中。你可以部署這個(gè) dist 文件夾到任何你喜歡的平臺(tái)。

本地測(cè)試應(yīng)用

vite preview 命令會(huì)在本地啟動(dòng)一個(gè)靜態(tài) Web 服務(wù)器，將 dist 在 http://localhost:4173。這樣在本地環(huán)境下查看該構(gòu)建產(chǎn)物是否正?？捎镁头奖愣嗔?。你可以通過(guò) --port 參數(shù)來(lái)配置服務(wù)的運(yùn)行端口。

現(xiàn)在 preview 命令會(huì)將服務(wù)器運(yùn)行在 http://localhost:8080。

自動(dòng)打開(kāi)瀏覽器：

  "dev": "vite --open",
  "build": "vue-tsc --noEmit && vite build",
  "preview": "vite preview --open"

值得注意的是 vite preview 用作預(yù)覽本地構(gòu)建，而不應(yīng)直接作為生產(chǎn)服務(wù)器。

2、環(huán)境變量

Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：

import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。
import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境。
import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在 server 上。

自定義環(huán)境變量：

(1)創(chuàng)建文件：已存在的環(huán)境變量不會(huì)被以下文件中的覆蓋

.env  # 所有情況下都會(huì)加載
.env.local          # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
.env.[mode]         # 只在指定模式下加載,如.env.production的優(yōu)先級(jí)比.env高
.env.[mode].local   # 只在指定模式下加載，但會(huì)被 git 忽略

加載的環(huán)境變量也會(huì)通過(guò) import.meta.env 以字符串形式暴露給客戶端源碼。

為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) vite 處理的代碼。例如下面這些環(huán)境變量：

只有 VITE_SOME_KEY 會(huì)被暴露為 import.meta.env.VITE_SOME_KEY 提供給客戶端源碼，而 DB_PASSWORD 則不會(huì)。

(2)添加類型聲明

<reference types="vite/client" />
 interface ImportMetaEnv {
 readonly VITE_APP_TITLE: string
              // 更多環(huán)境變量...
 }
  interface ImportMeta {
  readonly env: ImportMetaEnv
  }

3、模式

默認(rèn)情況下，開(kāi)發(fā)服務(wù)器 (dev 命令) 運(yùn)行在 development (開(kāi)發(fā)) 模式，而 build 命令則運(yùn)行在 production (生產(chǎn)) 模式。這意味著當(dāng)執(zhí)行 vite build 時(shí)，它會(huì)自動(dòng)加載 .env.production 中可能存在的環(huán)境變量：

在你的應(yīng)用中，你可以使用 import.meta.env.VITE_APP_TITLE 渲染標(biāo)題。

除了默認(rèn)的developmen和production還可以自定義模式，如可能希望有一個(gè) “staging” (預(yù)發(fā)布|預(yù)上線) 模式，它應(yīng)該具有類似于生產(chǎn)的行為，但環(huán)境變量與生產(chǎn)環(huán)境略有不同

 vite build --mode staging
.env.staging文件存放相關(guān)模式下的環(huán)境變量

4、兼容老瀏覽器

默認(rèn)情況下 Vite 只處理語(yǔ)法轉(zhuǎn)譯，且默認(rèn)不包含任何 polyfill。通過(guò)引入polyfill： polyfill 是一個(gè)js庫(kù)，主要撫平不同瀏覽器之間對(duì)js實(shí)現(xiàn)的差異。可以前往 Polyfill.io 查看，這是一個(gè)基于用戶瀏覽器 User-Agent 字符串自動(dòng)生成 polyfill 包的服務(wù) 通過(guò)插件支持:通過(guò)插件@vitejs/plugin-legacy來(lái)支持，它將自動(dòng)生成傳統(tǒng)版本的 chunk 及與其相對(duì)應(yīng) ES 語(yǔ)言特性方面的 polyfill，兼容版的chunk只會(huì)在不支持原生 ESM 的瀏覽器中進(jìn)行按需加載

5、typescript相關(guān)

(1)esbuild下不支持功能編輯時(shí)報(bào)錯(cuò)

配置類型導(dǎo)入導(dǎo)出、enum、沒(méi)有import、export導(dǎo)入導(dǎo)出的非模塊文件報(bào)錯(cuò)

tsconfig.json
        {
       "compilerOptions": {
       "isolatedModules":true 上述特性會(huì)在編輯時(shí)報(bào)錯(cuò)，否則會(huì)在運(yùn)行時(shí)報(bào)錯(cuò)
            }
 }

(2)導(dǎo)入vite內(nèi)置的一些類型定義

資源導(dǎo)入 (例如：導(dǎo)入一個(gè) .svg 文件)

.import.meta.env 上 Vite 注入的環(huán)境變量的類型定義
.import.meta.hot 上的 HMR API 類型定義

方式一：在.d.ts 中

<reference types="vite/client" />

方式二：在tsconfig.json中

{
    "compilerOptions": {
    "types": ["vite/client"]
              }
}

多頁(yè)面配置

    ├── package.json
    ├── vite.config.js
    ├── index.html
    ├── main.js
    └── nested
        ├── index.html
        └── nested.js
        
      build: {
        rollupOptions: {
          input: {
            main: resolve(__dirname, 'index.html'),
            nested: resolve(__dirname, 'nested/index.html')
          }
        }
      }

6、基本配置

區(qū)分不同環(huán)境配置

command：根據(jù)運(yùn)行的命令區(qū)分配置，serve為開(kāi)發(fā)環(huán)境，否則為build生產(chǎn)環(huán)境
mode：根據(jù)環(huán)境區(qū)分配置

export default defineConfig(async ({ command, mode }) => {
          const config=await fn();    支持使用Promise
          if (command === 'serve') {
            return { 
            }
          } else if(command='build'){
            return {
            }
          }
})

核心配置全集

export default defineConfig({
 
  base: "./", //開(kāi)發(fā)或生產(chǎn)環(huán)境服務(wù)的公共基礎(chǔ)路徑, 絕對(duì) URL 路徑名，例如 /foo/
  // 完整的 URL，例如 https://foo.com/
  // 空字符串或 ./（用于開(kāi)發(fā)環(huán)境）
  // 通過(guò)命令指定：vite build --base=/my/public/path/
  // 代碼中獲取base：import.meta.env.BASE_URL全局變量在代碼中使用，
  //原樣出現(xiàn)(例如import.meta.env['BASE_URL']是無(wú)效的)
  root: process.cwd(), // 項(xiàng)目根目錄（index.html 文件所在的位置絕對(duì)位置或相對(duì)位置）,默認(rèn)process.cwd()
  define: {
    __DEV__: 'dev',
  }, //定義全局常量替換方式。其中每項(xiàng)在開(kāi)發(fā)環(huán)境下會(huì)被定義在全局，而在構(gòu)建時(shí)被靜態(tài)替換
 
  mode: 'development', // 模式將會(huì)把serve和build時(shí)的模式都覆蓋掉。
  //也可以通過(guò)命令行 --mode 選項(xiàng)來(lái)重寫'development'（serve）、'production'（build）
  plugins: [vue()], // 需要用到的插件數(shù)組
  publicDir: 'public', // 靜態(tài)資源服務(wù)的文件夾。該目錄中的文件在開(kāi)發(fā)期間在 / 處提供
  //并在構(gòu)建期間復(fù)制到 outDir 的根目錄，并且始終按原樣提供或復(fù)制而無(wú)需進(jìn)行轉(zhuǎn)換。
  //該值可以是文件系統(tǒng)的絕對(duì)路徑，也可以是相對(duì)于項(xiàng)目的根目錄的相對(duì)路徑。默認(rèn)'public'
  cacheDir: 'node_modules/.vite', // 存儲(chǔ)緩存文件的目錄。此目錄下會(huì)存儲(chǔ)預(yù)打包的依賴項(xiàng)或 vite 
  // 生成的某些緩存文件，使用緩存可以提高性能。如需重新生成緩存文件，你可以使用 --force 命令行選項(xiàng)
  // 或手動(dòng)刪除目錄。此選項(xiàng)的值可以是文件的絕對(duì)路徑，也可以是以項(xiàng)目根目錄為基準(zhǔn)的相對(duì)路徑。
  // 當(dāng)沒(méi)有檢測(cè)到 package.json 時(shí)，則默認(rèn)為 .vite。  默認(rèn)"node_modules/.vite"
 
  // 解析相關(guān)
  resolve: {
    alias: [ // 文件系統(tǒng)路徑別名
      {
        "@": path.resolve(__dirname, "src"),
      },
      //或
      {
        find: /\/@\//, //字符串｜正則
        replacement: pathResolve('src') + '/'
      }
    ],
    dedupe: [], // 強(qiáng)制 Vite 始終將列出的依賴項(xiàng)解析為同一副本，比如當(dāng)安裝了兩個(gè)不同版本的依賴，
    // 如vue2和vue3，通過(guò)這個(gè)聲明最終引入的版本  []
    conditions: [], // 解決程序包中 情景導(dǎo)出 時(shí)的其他允許條件 [{
    //     "exports": {
    //       ".": {
    //         "import": "./index.esm.js",
    //         "require": "./index.cjs.js"
    //       }
    //     }
    //   }]
    mainFields: [], // 解析包入口點(diǎn)嘗試的字段列表 ，根據(jù)package.json中的字段，
    // 在不同環(huán)境中導(dǎo)入庫(kù)的入口文件位置
    // import引入的文件對(duì)應(yīng)module中的路徑
    // require引入的文件對(duì)應(yīng)main中的路徑
    // 默認(rèn)：['module', 'jsnext:main', 'jsnext','main']
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], //  默認(rèn)：['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']導(dǎo)入時(shí)想要忽略的擴(kuò)展名列表 導(dǎo)入時(shí)想要省略的擴(kuò)展名列表。不建議忽略自定義導(dǎo)入類型的擴(kuò)展名（例如：.vue），因?yàn)樗鼤?huì)影響 IDE 和類型支持
    preserveSymlinks: false, // 啟用此選項(xiàng)會(huì)使 Vite 通過(guò)原始文件路徑（即不跟隨符號(hào)鏈接的路徑）而不是真正的文件路徑（即跟隨符號(hào)鏈接后的路徑）確定文件身份
    // 默認(rèn)：false
  },
 
  // css相關(guān)
  css: {
    modules: { //配置 CSS modules 的行為。選項(xiàng)將被傳遞給 postcss-modules。
      scopeBehaviour: 'global' | 'local',
      // ...
    },
    postcss: '', // 內(nèi)聯(lián)的 PostCSS 配置 如果提供了該內(nèi)聯(lián)配置，Vite 將不會(huì)搜索其他 PostCSS 配置源
    preprocessorOptions: { // css的預(yù)處理器選項(xiàng)
      scss: {
        additionalData: `$injectedColor: orange;`
      }
    }
  },
 
  // JSON相關(guān)
  json: {
    namedExports: true, // 是否支持從.json文件中進(jìn)行按名導(dǎo)入
    stringify: false, //  開(kāi)啟此項(xiàng)，導(dǎo)入的 JSON 會(huì)被轉(zhuǎn)換為 export default JSON.parse("...") 會(huì)禁用按名導(dǎo)入
  },
 
  //esbuild相關(guān)
  esbuild: { // 最常見(jiàn)的用例是自定義 JSX
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
    // ESbuild會(huì)被應(yīng)用在 ts、jsx、tsx 文件，以下選項(xiàng)對(duì)要處理的文件類型進(jìn)行配置
    // include：string | RegExp | (string | RegExp)[]
    // exclude：string | RegExp | (string | RegExp)[]
    // jsxInject:自動(dòng)為每一個(gè)被 ESbuild 轉(zhuǎn)換的文件注入內(nèi)容
    //     `import React from 'react'` 
  },
 
  assetsInclude: ['**/*.gltf'], // 指定額外的 picomatch 模式 作為靜態(tài)資源處理
  logLevel: 'info', // 調(diào)整控制臺(tái)輸出的級(jí)別 'info' | 'warn' | 'error' | 'silent'
  clearScreen: true, // 設(shè)為 false 可以避免 Vite 清屏而錯(cuò)過(guò)在終端中打印某些關(guān)鍵信息
  envDir: '/', // 用于加載 .env 文件的目錄
  envPrefix: [], // 以 envPrefix 開(kāi)頭的環(huán)境變量會(huì)通過(guò) import.meta.env 暴露在你的客戶端源碼中
 
  //server相關(guān)
  server: {
    host: '127.0.0.1', // 指定服務(wù)器應(yīng)該監(jiān)聽(tīng)哪個(gè) IP 地址
    port: 5000, // 指定開(kāi)發(fā)服務(wù)器端口
    strictPort: true, // 若端口已被占用則會(huì)直接退出
    https: false, // 啟用 TLS + HTTP/2
    // 當(dāng)為true：?jiǎn)⒂?TLS + HTTP/2。注意：當(dāng) server.proxy 選項(xiàng) 也被使用時(shí)，將會(huì)僅使用 TLS。
    // 這個(gè)值也可以是一個(gè)傳遞給 https.createServer() 的 選項(xiàng)對(duì)象
    open: true, // 啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        ws: true, //WebSocket
      }
    },
    cors: true, // 配置 CORS
    force: true, // 強(qiáng)制使依賴預(yù)構(gòu)建
    hmr: { // 禁用或配置 HMR 連接 熱更新相關(guān)
      // false禁用
      protocol: string, //協(xié)議
      host: string,
      port: number,
      path: string,
      timeout: number,
      overlay: boolean, //為 false 可以禁用開(kāi)發(fā)服務(wù)器錯(cuò)誤的屏蔽
      clientPort: number, //只在客戶端的情況下覆蓋端口，這允許你為 websocket 提供不同的端口，而并非在客戶端代碼中查找。如果需要在 dev-server 情況下使用 SSL 代理，這非常有用。
      server: Server, //當(dāng)使用 server.middlewareMode 或 server.https 時(shí)，你需將 server.hmr.server 指定為你 HTTP(S) 的服務(wù)器，這將通過(guò)你的服務(wù)器來(lái)處理 HMR 的安全連接請(qǐng)求。這在使用自簽證書(shū)或想通過(guò)網(wǎng)絡(luò)在某端口暴露 Vite 的情況下，非常有用。
    },
    watch: { // 傳遞給 chokidar 的文件系統(tǒng)監(jiān)聽(tīng)器選項(xiàng) 監(jiān)聽(tīng)文件改變
      // 通過(guò)命令:vite build --watch
      ignored: ['!**/node_modules/your-package-name/**'] //      默認(rèn)會(huì)忽略對(duì) .git/ 和 node_modules/ 目錄的監(jiān)聽(tīng),如果需要對(duì) node_modules/ 內(nèi)的包進(jìn)行監(jiān)聽(tīng)，可以為 server.watch.ignored 賦值一個(gè)取反的 glob 模式
      // 其他選項(xiàng)：使用的是rollup的選項(xiàng)配置:https://rollupjs.org/guide/en/#watch-options
    },
    middlewareMode: '', // 以中間件模式創(chuàng)建 Vite 服務(wù)器 'ssr' | 'html'    在SSR中使用
    fs: {
      strict: true, // 限制為工作區(qū) root 路徑以外的文件的訪問(wèn)
      allow: [], // 限制哪些文件可以通過(guò) /@fs/ 路徑提供服務(wù)
      deny: ['.env', '.env.*', '*.{pem,crt}'], // 用于限制 Vite 開(kāi)發(fā)服務(wù)器提供敏感文件的黑名單
    },
    origin: 'http://127.0.0.1:8080/', // 用于定義開(kāi)發(fā)調(diào)試階段生成資產(chǎn)的 origin
  },
 
  //build構(gòu)建相關(guān)
  build: {
    target: ['modules'], // 設(shè)置最終構(gòu)建的瀏覽器兼容目標(biāo)   默認(rèn)：'modules'指支持原生 ES 模塊的瀏覽器。
    //  "esnext" ：即假設(shè)有原生動(dòng)態(tài)導(dǎo)入支持，并且將會(huì)轉(zhuǎn)譯得盡可能?。?
    //  如果 build.minify 選項(xiàng)為 'terser'， 'esnext' 將會(huì)強(qiáng)制降級(jí)為 'es2019'。
    //  其他情況下將完全不會(huì)執(zhí)行轉(zhuǎn)譯。
    // 'es2015'：自定義目標(biāo)也可以是一個(gè) ES 版本
    polyfillModulePreload: true, // 是否自動(dòng)注入 module preload 的 polyfill true：此 polyfill 會(huì)被自動(dòng)注入到每個(gè) index.html 入口的 proxy 模塊中
    outDir: 'dist', // 指定輸出路徑
    assetsDir: 'assets', // 指定生成靜態(tài)文件目錄
    assetsInlineLimit: '4096', // 小于此閾值的導(dǎo)入或引用資源將內(nèi)聯(lián)為 base64 編碼
    cssCodeSplit: true, // 啟用 CSS 代碼拆分
    cssTarget: '', // 允許用戶為 CSS 的壓縮設(shè)置一個(gè)不同的瀏覽器 target 與 build.target 一致
    sourcemap: false, // 構(gòu)建后是否生成 source map 文件
    rollupOptions: {}, // 自定義底層的 Rollup 打包配置
    lib: {}, // 構(gòu)建為庫(kù)
    manifest: false, // 當(dāng)設(shè)置為 true，構(gòu)建后將會(huì)生成 manifest.json 文件
    ssrManifest: false, // 構(gòu)建不生成 SSR 的 manifest 文件
    ssr: undefined, // 生成面向 SSR 的構(gòu)建
    minify: 'esbuild', // 指定使用哪種混淆器
    terserOptions: {}, // 傳遞給 Terser 的更多 minify 選項(xiàng)
    write: true, // 啟用將構(gòu)建后的文件寫入磁盤
    emptyOutDir: true, // 構(gòu)建時(shí)清空該目錄
    brotliSize: true, // 啟用 brotli 壓縮大小報(bào)告
    chunkSizeWarningLimit: 500, // chunk 大小警告的限制
    watch: null, // 設(shè)置為 {} 則會(huì)啟用 rollup 的監(jiān)聽(tīng)器
  },
 
  // 構(gòu)建預(yù)覽preview相關(guān)
  preview: {
    port: 5000, // 指定開(kāi)發(fā)服務(wù)器端口
    strictPort: true, // 若端口已被占用則會(huì)直接退出
    https: false, // 啟用 TLS + HTTP/2
    open: true, // 啟動(dòng)時(shí)自動(dòng)在瀏覽器中打開(kāi)應(yīng)用程序
    proxy: { // 配置自定義代理規(guī)則
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },
    cors: true, // 配置 CORS
  },
  optimizeDeps: {
    entries: [], // 指定自定義條目——該值需要遵循 fast-glob 模式
    exclude: [], // 在預(yù)構(gòu)建中強(qiáng)制排除的依賴項(xiàng)
    include: [], // 可強(qiáng)制預(yù)構(gòu)建鏈接的包
    keepNames: false, // true 可以在函數(shù)和類上保留 name 屬性
  },
 
  // SSR相關(guān)
  ssr: {
    external: [], // 列出的是要為 SSR 強(qiáng)制外部化的依賴,
    noExternal: '', // 列出的是防止被 SSR 外部化依賴項(xiàng)
    target: 'node', // SSR 服務(wù)器的構(gòu)建目標(biāo)
  },
 
  // Worker相關(guān)
  worker: {
    format: iife, //worker bundle 的輸出類型。 默認(rèn)： 'iife'   'es',
    plugins: [], //適用于 worker bundle 的 Vite 插件。 []
    rollupOptions: [], //用于構(gòu)建 worker bundle 的 Rollup 配置項(xiàng)
  }
})