[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow":1054,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow":1079},{"source":4,"connector":5,"page":6},"sqlite","better-sqlite3",{"path":7,"title":8,"description":9,"category":10,"tags":11,"date":14,"pinned":15,"draft":15,"body":16,"seo":1050,"stem":1051,"id":1052,"extension":1053},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow","工作原理","Vite 是面向现代浏览器的前端构建工具：开发阶段利用原生 ES 模块与按需编译；生产构建由 Rollup 完成。对比见 Webpack 与 Vite、工程化概览。","技能小册",[12,13],"vite","workflow","2020-06-15",false,{"type":17,"value":18,"toc":1042},"minimark",[19,22,52,55,60,63,68,80,90,94,107,111,118,136,143,167,171,175,228,235,241,245,254,265,268,379,383,389,393,501,505,512,536,539,672,676,679,704,708,711,715,726,734,740,862,865,869,902,905,909,980,983,987,990,1038],[20,21,8],"h1",{"id":8},[23,24,25,32,33,37,38,41,42,46,47,51],"p",{},[26,27,31],"a",{"href":28,"rel":29},"https:\u002F\u002Fcn.vite.dev\u002F",[30],"nofollow","Vite"," 是面向现代浏览器的前端构建工具：开发阶段利用",[34,35,36],"strong",{},"原生 ES 模块","与按需编译；生产构建由 ",[34,39,40],{},"Rollup"," 完成。对比见 ",[26,43,45],{"href":44},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fproject\u002Fwebpack-vite","Webpack 与 Vite","、",[26,48,50],{"href":49},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fbasics","工程化概览","。",[23,53,54],{},"下面从开发服务器、预构建、插件与 HMR 四方面说明核心机制。",[56,57,59],"h3",{"id":58},"一开发服务器原生-esm-架构","一、开发服务器原生 ESM 架构",[23,61,62],{},"传统的 Webpack 等打包工具在开发模式下需要构建整个应用的依赖图，启动慢、热更新慢。Vite 将开发模式下的模块处理交给了现代浏览器。",[64,65,67],"h4",{"id":66},"_1-利用浏览器原生-es-模块","1. 利用浏览器原生 ES 模块",[23,69,70,71,75,76,79],{},"Vite 启动开发服务器后直接提供源码。浏览器通过 ",[72,73,74],"code",{},"\u003Cscript type=\"module\">"," 加载入口，遇到 ",[72,77,78],{},"import"," 再请求对应模块，由 Vite 拦截并返回编译后的结果。",[81,82,83,87],"ul",{},[84,85,86],"li",{},"无需将整个应用打包成一个 bundle，浏览器自行管理模块加载。",[84,88,89],{},"开发服务器只处理当前请求的模块，极大的冷启动速度。",[64,91,93],{"id":92},"_2-按需编译只编译请求的模块","2. 按需编译：只编译请求的模块",[23,95,96,97,46,100,46,103,106],{},"当浏览器请求某个 ",[72,98,99],{},".vue",[72,101,102],{},".jsx",[72,104,105],{},".ts"," 文件时，Vite 才会对该文件进行实时编译（转换 TS、编译 JSX、解析 Vue SFC 等）。这意味着项目中有大量文件时，不会在启动时全部编译，只编译请求的模块，启动时间与项目规模解耦。",[64,108,110],{"id":109},"_3-依赖预构建pre-bundling的作用","3. 依赖预构建（Pre-bundling）的作用",[23,112,113,114,117],{},"虽然 Vite 提倡使用原生 ESM，但 ",[72,115,116],{},"node_modules"," 中的依赖通常有两种问题：",[81,119,120,126],{},[84,121,122,125],{},[34,123,124],{},"多模块依赖","：许多 CommonJS 或 UMD 库无法直接在浏览器中使用。",[84,127,128,131,132,135],{},[34,129,130],{},"大量内部模块","：一个依赖可能包含成百上千个模块（如 ",[72,133,134],{},"lodash-es","），直接引入会导致请求瀑布。",[23,137,138,139,142],{},"预构建（pre-bundling）使用 ",[34,140,141],{},"esbuild"," 将依赖统一打包成单个或少量 ESM 模块，然后提供给浏览器。好处：",[81,144,145,151,157],{},[84,146,147,150],{},[34,148,149],{},"兼容性","：将 CommonJS\u002FUMD 转换成 ESM。",[84,152,153,156],{},[34,154,155],{},"性能","：将多个内部模块合并，减少请求数量。",[84,158,159,162,163,166],{},[34,160,161],{},"缓存","：预构建产物写入 ",[72,164,165],{},"node_modules\u002F.vite\u002Fdeps","，下次启动直接使用。",[56,168,170],{"id":169},"二预构建机制详解","二、预构建机制详解",[64,172,174],{"id":173},"_1-预构建触发条件","1. 预构建触发条件",[81,176,177,194,208,222],{},[84,178,179,182,183,186,187,189,190,193],{},[34,180,181],{},"首次启动","：自动扫描 ",[72,184,185],{},"index.html"," 中的 ",[72,188,74],{}," 以及入口中的 ",[72,191,192],{},"optimizeDeps.entries"," 配置，收集依赖并预构建。",[84,195,196,199,200,203,204,207],{},[34,197,198],{},"手动强制","：使用 ",[72,201,202],{},"server.force"," 配置或 ",[72,205,206],{},"vite --force"," 命令。",[84,209,210,213,214,217,218,221],{},[34,211,212],{},"依赖变更","：当 ",[72,215,216],{},"package.json"," 中的依赖版本变化或锁定文件变化，Vite 会重新预构建（通过 ",[72,219,220],{},"_metadata.json"," 的哈希判断）。",[84,223,224,227],{},[34,225,226],{},"未预构建的依赖被导入","：如果某些依赖未被预构建，Vite 也会在运行时触发预构建。",[64,229,231,232,234],{"id":230},"_2-_metadatajson-缓存机制","2. ",[72,233,220],{}," 缓存机制",[23,236,237,240],{},[72,238,239],{},"node_modules\u002F.vite\u002Fdeps\u002F_metadata.json"," 文件记录了预构建的依赖列表、文件哈希、配置哈希等信息。Vite 在启动时对比当前依赖和缓存的哈希，若一致则直接使用缓存，否则重新预构建。",[64,242,244],{"id":243},"_3-预构建产物存放位置与手动清除","3. 预构建产物存放位置与手动清除",[23,246,247,248,251,252,51],{},"产物存放在 ",[72,249,250],{},"node_modules\u002F.vite\u002Fdeps\u002F"," 目录下，文件名包含内容哈希。如果需要强制重新构建，可以删除该目录或执行 ",[72,253,206],{},[64,255,257,258,261,262],{"id":256},"_4-自定义-optimizedepsinclude-exclude","4. 自定义 ",[72,259,260],{},"optimizeDeps.include"," \u002F ",[72,263,264],{},"exclude",[23,266,267],{},"某些第三方库可能因为动态导入或特殊的 CommonJS 导出导致预构建失败，可以通过配置强制包含或排除：",[269,270,275],"pre",{"className":271,"code":272,"language":273,"meta":274,"style":274},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","\u002F\u002F vite.config.js\nexport default {\n  optimizeDeps: {\n    include: [\"some-package\"], \u002F\u002F 强制预构建\n    exclude: [\"@vue\u002Fruntime-core\"], \u002F\u002F 排除，让浏览器直接加载原始 ESM\n  },\n};\n","js","",[72,276,277,286,300,312,343,367,373],{"__ignoreMap":274},[278,279,282],"span",{"class":280,"line":281},"line",1,[278,283,285],{"class":284},"sutJx","\u002F\u002F vite.config.js\n",[278,287,289,293,296],{"class":280,"line":288},2,[278,290,292],{"class":291},"sVHd0","export",[278,294,295],{"class":291}," default",[278,297,299],{"class":298},"sP7_E"," {\n",[278,301,303,307,310],{"class":280,"line":302},3,[278,304,306],{"class":305},"skxfh","  optimizeDeps",[278,308,309],{"class":298},":",[278,311,299],{"class":298},[278,313,315,318,320,324,328,332,334,337,340],{"class":280,"line":314},4,[278,316,317],{"class":305},"    include",[278,319,309],{"class":298},[278,321,323],{"class":322},"su5hD"," [",[278,325,327],{"class":326},"sjJ54","\"",[278,329,331],{"class":330},"s_sjI","some-package",[278,333,327],{"class":326},[278,335,336],{"class":322},"]",[278,338,339],{"class":298},",",[278,341,342],{"class":284}," \u002F\u002F 强制预构建\n",[278,344,346,349,351,353,355,358,360,362,364],{"class":280,"line":345},5,[278,347,348],{"class":305},"    exclude",[278,350,309],{"class":298},[278,352,323],{"class":322},[278,354,327],{"class":326},[278,356,357],{"class":330},"@vue\u002Fruntime-core",[278,359,327],{"class":326},[278,361,336],{"class":322},[278,363,339],{"class":298},[278,365,366],{"class":284}," \u002F\u002F 排除，让浏览器直接加载原始 ESM\n",[278,368,370],{"class":280,"line":369},6,[278,371,372],{"class":298},"  },\n",[278,374,376],{"class":280,"line":375},7,[278,377,378],{"class":298},"};\n",[56,380,382],{"id":381},"三插件架构与-hooks-执行顺序","三、插件架构与 hooks 执行顺序",[23,384,385,386,51],{},"Vite 的插件体系兼容 Rollup 插件，并扩展了一些 Vite 特有的钩子。插件生命周期主要分为三个阶段：",[34,387,388],{},"解析 → 加载 → 转换 → HTML 转换 → 生成 \u002F 写入",[64,390,392],{"id":391},"_1-插件关键-hooks","1. 插件关键 hooks",[394,395,396,412],"table",{},[397,398,399],"thead",{},[400,401,402,406,409],"tr",{},[403,404,405],"th",{},"钩子",[403,407,408],{},"作用",[403,410,411],{},"执行时机",[413,414,415,433,446,459,475,488],"tbody",{},[400,416,417,423,430],{},[418,419,420],"td",{},[72,421,422],{},"resolveId",[418,424,425,426,429],{},"解析模块 ID（如 ",[72,427,428],{},"import 'vue'"," 转为真实路径）",[418,431,432],{},"每个模块导入语句",[400,434,435,440,443],{},[418,436,437],{},[72,438,439],{},"load",[418,441,442],{},"加载模块内容（返回源码字符串）",[418,444,445],{},"在 resolve 之后，transform 之前",[400,447,448,453,456],{},[418,449,450],{},[72,451,452],{},"transform",[418,454,455],{},"转换加载后的模块内容（编译 TS、JSX 等）",[418,457,458],{},"每个模块加载后",[400,460,461,466,472],{},[418,462,463],{},[72,464,465],{},"transformIndexHtml",[418,467,468,469,471],{},"转换 ",[72,470,185],{}," 内容",[418,473,474],{},"开发服务器请求 HTML 时或构建打包时",[400,476,477,482,485],{},[418,478,479],{},[72,480,481],{},"generateBundle",[418,483,484],{},"在 bundle 生成后、写入前修改产物",[418,486,487],{},"构建阶段，Rollup 特有",[400,489,490,495,498],{},[418,491,492],{},[72,493,494],{},"writeBundle",[418,496,497],{},"bundle 写入后执行",[418,499,500],{},"构建阶段",[64,502,504],{"id":503},"_2-插件执行顺序","2. 插件执行顺序",[23,506,507,508,511],{},"通过 ",[72,509,510],{},"enforce"," 属性控制：",[81,513,514,524,530],{},[84,515,516,519,520,523],{},[72,517,518],{},"enforce: 'pre'"," → 在 Vite 核心钩子之前执行（如 ",[72,521,522],{},"alias","）。",[84,525,526,527,529],{},"无 ",[72,528,510],{}," → 正常顺序。",[84,531,532,535],{},[72,533,534],{},"enforce: 'post'"," → 在 Vite 核心钩子之后执行（如压缩、校验）。",[23,537,538],{},"同一组内按插件注册顺序执行。",[269,540,542],{"className":271,"code":541,"language":273,"meta":274,"style":274},"\u002F\u002F 示例插件结构\nconst myPlugin = {\n  name: 'my-plugin',\n  enforce: 'pre',  \u002F\u002F 可选 'pre'、'post'\n  resolveId(source) { ... },\n  load(id) { ... },\n  transform(code, id) { ... },\n};\n",[72,543,544,549,565,584,602,627,645,667],{"__ignoreMap":274},[278,545,546],{"class":280,"line":281},[278,547,548],{"class":284},"\u002F\u002F 示例插件结构\n",[278,550,551,555,559,563],{"class":280,"line":288},[278,552,554],{"class":553},"sbsja","const",[278,556,558],{"class":557},"s_hVV"," myPlugin",[278,560,562],{"class":561},"smGrS"," =",[278,564,299],{"class":298},[278,566,567,570,572,575,578,581],{"class":280,"line":302},[278,568,569],{"class":305},"  name",[278,571,309],{"class":298},[278,573,574],{"class":326}," '",[278,576,577],{"class":330},"my-plugin",[278,579,580],{"class":326},"'",[278,582,583],{"class":298},",\n",[278,585,586,589,591,593,595,597,599],{"class":280,"line":314},[278,587,588],{"class":305},"  enforce",[278,590,309],{"class":298},[278,592,574],{"class":326},[278,594,269],{"class":330},[278,596,580],{"class":326},[278,598,339],{"class":298},[278,600,601],{"class":284},"  \u002F\u002F 可选 'pre'、'post'\n",[278,603,604,608,611,615,618,621,624],{"class":280,"line":345},[278,605,607],{"class":606},"sVXei","  resolveId",[278,609,610],{"class":298},"(",[278,612,614],{"class":613},"s99_P","source",[278,616,617],{"class":298},")",[278,619,620],{"class":298}," {",[278,622,623],{"class":561}," ...",[278,625,626],{"class":298}," },\n",[278,628,629,632,634,637,639,641,643],{"class":280,"line":369},[278,630,631],{"class":606},"  load",[278,633,610],{"class":298},[278,635,636],{"class":613},"id",[278,638,617],{"class":298},[278,640,620],{"class":298},[278,642,623],{"class":561},[278,644,626],{"class":298},[278,646,647,650,652,654,656,659,661,663,665],{"class":280,"line":375},[278,648,649],{"class":606},"  transform",[278,651,610],{"class":298},[278,653,72],{"class":613},[278,655,339],{"class":298},[278,657,658],{"class":613}," id",[278,660,617],{"class":298},[278,662,620],{"class":298},[278,664,623],{"class":561},[278,666,626],{"class":298},[278,668,670],{"class":280,"line":669},8,[278,671,378],{"class":298},[64,673,675],{"id":674},"_3-vite-插件与-rollup-插件的兼容性","3. Vite 插件与 Rollup 插件的兼容性",[23,677,678],{},"绝大多数 Rollup 插件可以在 Vite 中直接使用，因为 Vite 的生产构建就是基于 Rollup。但需要注意：",[81,680,681,687,697],{},[84,682,683,684,686],{},"某些 Rollup 插件假设在打包阶段（如 ",[72,685,481],{},"），在开发阶段可能不会调用。",[84,688,689,690,46,692,46,694,696],{},"Vite 开发环境会调用 ",[72,691,422],{},[72,693,439],{},[72,695,452],{}," 等钩子，因此耗时插件可能影响开发性能。",[84,698,699,700,703],{},"可以通过 ",[72,701,702],{},"apply: 'build' | 'serve'"," 限定插件只在特定模式生效。",[56,705,707],{"id":706},"四hmr热模块替换原理","四、HMR（热模块替换）原理",[23,709,710],{},"Vite 的 HMR 基于原生 ES 模块，利用 WebSocket 实现增量更新，更新速度快且精确。",[64,712,714],{"id":713},"_1-基于-websocket-的模块更新通知","1. 基于 WebSocket 的模块更新通知",[81,716,717,720,723],{},[84,718,719],{},"开发服务器启动后，会建立 WebSocket 连接。",[84,721,722],{},"当文件被编辑时，Vite 会判断受影响的模块链，并向客户端发送更新消息（包含模块 ID 及更新类型）。",[84,724,725],{},"客户端接收消息后，重新请求对应的模块，并在运行时处理替换逻辑。",[64,727,729,730,733],{"id":728},"_2-精确的-hmr-边界importmetahot-api","2. 精确的 HMR 边界：",[72,731,732],{},"import.meta.hot"," API",[23,735,736,737,739],{},"Vite 暴露了 ",[72,738,732],{}," 对象，允许框架和模块定义自定义热更新行为：",[269,741,743],{"className":271,"code":742,"language":273,"meta":274,"style":274},"if (import.meta.hot) {\n  import.meta.hot.accept((newModule) => {\n    \u002F\u002F 模块更新后执行，可以重新渲染\n  });\n  import.meta.hot.dispose(() => {\n    \u002F\u002F 模块废弃前的清理工作\n  });\n}\n",[72,744,745,769,803,808,818,844,849,857],{"__ignoreMap":274},[278,746,747,750,753,755,758,761,763,766],{"class":280,"line":281},[278,748,749],{"class":291},"if",[278,751,752],{"class":322}," (",[278,754,78],{"class":291},[278,756,757],{"class":298},".",[278,759,760],{"class":557},"meta",[278,762,757],{"class":298},[278,764,765],{"class":322},"hot) ",[278,767,768],{"class":298},"{\n",[278,770,771,774,776,778,780,783,785,789,791,793,796,798,801],{"class":280,"line":288},[278,772,773],{"class":291},"  import",[278,775,757],{"class":298},[278,777,760],{"class":557},[278,779,757],{"class":298},[278,781,782],{"class":322},"hot",[278,784,757],{"class":298},[278,786,788],{"class":787},"sGLFI","accept",[278,790,610],{"class":305},[278,792,610],{"class":298},[278,794,795],{"class":613},"newModule",[278,797,617],{"class":298},[278,799,800],{"class":553}," =>",[278,802,299],{"class":298},[278,804,805],{"class":280,"line":302},[278,806,807],{"class":284},"    \u002F\u002F 模块更新后执行，可以重新渲染\n",[278,809,810,813,815],{"class":280,"line":314},[278,811,812],{"class":298},"  }",[278,814,617],{"class":305},[278,816,817],{"class":298},";\n",[278,819,820,822,824,826,828,830,832,835,837,840,842],{"class":280,"line":345},[278,821,773],{"class":291},[278,823,757],{"class":298},[278,825,760],{"class":557},[278,827,757],{"class":298},[278,829,782],{"class":322},[278,831,757],{"class":298},[278,833,834],{"class":787},"dispose",[278,836,610],{"class":305},[278,838,839],{"class":298},"()",[278,841,800],{"class":553},[278,843,299],{"class":298},[278,845,846],{"class":280,"line":369},[278,847,848],{"class":284},"    \u002F\u002F 模块废弃前的清理工作\n",[278,850,851,853,855],{"class":280,"line":375},[278,852,812],{"class":298},[278,854,617],{"class":305},[278,856,817],{"class":298},[278,858,859],{"class":280,"line":669},[278,860,861],{"class":298},"}\n",[23,863,864],{},"对于无 HMR 适配的模块，Vite 会通过 fallback 进行页面重载。",[64,866,868],{"id":867},"_3-与框架vuereact的深度集成","3. 与框架（Vue\u002FReact）的深度集成",[81,870,871,891],{},[84,872,873,878,879,882,883,886,887,890],{},[34,874,875],{},[72,876,877],{},"@vitejs\u002Fplugin-vue","：针对 Vue 单文件组件实现了精细的 HMR。当修改 ",[72,880,881],{},"\u003Ctemplate>"," 或 ",[72,884,885],{},"\u003Cstyle>"," 时，只更新对应部分，保留组件状态；修改 ",[72,888,889],{},"\u003Cscript>"," 时，会触发组件重新加载。",[84,892,893,898,899,901],{},[34,894,895],{},[72,896,897],{},"@vitejs\u002Fplugin-react","：利用 React Refresh（官方 HMR 方案），保持组件状态。它会在编译时将组件转换为支持热更新的代码，并注入 ",[72,900,732],{}," 逻辑。",[23,903,904],{},"这些框架插件通过分析文件变更范围，将更新粒度缩小到组件级别，从而保留状态。",[56,906,908],{"id":907},"五总结","五、总结",[394,910,911,924],{},[397,912,913],{},[400,914,915,918,921],{},[403,916,917],{},"核心机制",[403,919,920],{},"关键点",[403,922,923],{},"收益",[413,925,926,939,952,965],{},[400,927,928,933,936],{},[418,929,930],{},[34,931,932],{},"原生 ESM 开发服务器",[418,934,935],{},"浏览器直接加载模块，按需编译",[418,937,938],{},"冷启动极快，无打包开销",[400,940,941,946,949],{},[418,942,943],{},[34,944,945],{},"依赖预构建",[418,947,948],{},"esbuild 打包依赖，合并模块、转 ESM",[418,950,951],{},"减少请求，兼容 CommonJS",[400,953,954,959,962],{},[418,955,956],{},[34,957,958],{},"插件体系",[418,960,961],{},"兼容 Rollup 钩子 + enforce 顺序",[418,963,964],{},"强扩展性，复用 Rollup 生态",[400,966,967,972,977],{},[418,968,969],{},[34,970,971],{},"HMR",[418,973,974,975,733],{},"WebSocket 推送 + ",[72,976,732],{},[418,978,979],{},"模块级热更新，保有状态",[23,981,982],{},"Vite 通过充分利用浏览器原生能力、智能预构建和精细化的热更新，为现代前端开发提供了极致的开发体验。在生产环境下，它通过 Rollup 打包输出优化后的产物，兼顾运行性能。",[984,985,986],"h2",{"id":986},"参考文献",[23,988,989],{},"以下链接在编写时均可正常访问：",[394,991,992,1002],{},[397,993,994],{},[400,995,996,999],{},[403,997,998],{},"资料",[403,1000,1001],{},"说明",[413,1003,1004,1016,1027],{},[400,1005,1006,1013],{},[418,1007,1008],{},[26,1009,1012],{"href":1010,"rel":1011},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fwhy",[30],"Vite：工作原理",[418,1014,1015],{},"官方",[400,1017,1018,1024],{},[418,1019,1020],{},[26,1021,945],{"href":1022,"rel":1023},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fdep-pre-bundling",[30],[418,1025,1026],{},"optimizeDeps",[400,1028,1029,1036],{},[418,1030,1031],{},[26,1032,1035],{"href":1033,"rel":1034},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fapi-hmr",[30],"HMR API",[418,1037,732],{},[1039,1040,1041],"style",{},"html pre.shiki code .sutJx, html code.shiki .sutJx{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#6A737D;--shiki-dark-font-style:inherit}html pre.shiki code .sVHd0, html code.shiki .sVHd0{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#D73A49;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sP7_E, html code.shiki .sP7_E{--shiki-light:#39ADB5;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .skxfh, html code.shiki .skxfh{--shiki-light:#E53935;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sjJ54, html code.shiki .sjJ54{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s_sjI, html code.shiki .s_sjI{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sbsja, html code.shiki .sbsja{--shiki-light:#9C3EDA;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s_hVV, html code.shiki .s_hVV{--shiki-light:#90A4AE;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVXei, html code.shiki .sVXei{--shiki-light:#E53935;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s99_P, html code.shiki .s99_P{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#E36209;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .sGLFI, html code.shiki .sGLFI{--shiki-light:#6182B8;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":274,"searchDepth":288,"depth":288,"links":1043},[1044,1045,1046,1047,1048,1049],{"id":58,"depth":302,"text":59},{"id":169,"depth":302,"text":170},{"id":381,"depth":302,"text":382},{"id":706,"depth":302,"text":707},{"id":907,"depth":302,"text":908},{"id":986,"depth":288,"text":986},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fworkflow","knowledge\u002Fknowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fworkflow.md","md",{"items":1055},[1056,1060,1064,1068,1072,1076],{"path":1057,"title":1058,"description":1059,"category":10,"score":369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fdeploy","部署实践","Vite 项目的 CI\u002FCD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。",{"path":1061,"title":1062,"description":1063,"category":10,"score":369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fplugin","插件开发","Vite 插件兼容 Rollup 插件，并扩展 config、configureServer、transformIndexHtml 等钩子。原理见 工作原理。",{"path":1065,"title":1066,"description":1067,"category":10,"score":369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced","进阶配置","Vite 进阶：server.proxy、resolve.alias、SSR、多页面、库模式、vite preview 等。环境变量见 env。",{"path":1069,"title":1070,"description":1071,"category":10,"score":369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild","生产构建","vite build 使用 Rollup 打包并应用内置优化。开发阶段原理见 工作原理。",{"path":1073,"title":1074,"description":1075,"category":10,"score":369},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite","create-vite","pnpm create vite 实际执行的是 npm 包 create-vite（与 vite 本体不同）。工程化背景见 工程化概览、工作原理。",{"path":1077,"title":8,"description":1078,"category":10,"score":314},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fwebpack\u002Fworkflow","Webpack 是静态模块打包器：从入口递归解析依赖，经 Loader 转换后输出一个或多个 bundle。与 Vite 对比见 Webpack 与 Vite。",{"series":1080,"title":12,"items":1081,"index":345,"prev":1093,"next":1094},"booklet\u002Fproject\u002Fvite",[1082,1084,1086,1088,1090,1092],{"path":1065,"title":1066,"date":1083,"pinned":15},"2022-05-08",{"path":1069,"title":1070,"date":1085,"pinned":15},"2021-07-24",{"path":1073,"title":1074,"date":1087,"pinned":15},"2021-03-05",{"path":1057,"title":1058,"date":1089,"pinned":15},"2025-10-12",{"path":1061,"title":1062,"date":1091,"pinned":15},"2023-03-27",{"path":7,"title":8,"date":14,"pinned":15},{"path":1061,"title":1062,"date":1091,"pinned":15},null]