[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"knowledge-\u002Fapi\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild":3,"knowledge-related-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild":2209,"knowledge-series-\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild":2233},{"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":2205,"stem":2206,"id":2207,"extension":2208},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fbuild","生产构建","vite build 使用 Rollup 打包并应用内置优化。开发阶段原理见 工作原理。","技能小册",[12,13],"vite","build","2021-07-24",false,{"type":17,"value":18,"toc":2193},"minimark",[19,22,41,44,52,58,101,110,117,126,365,372,405,455,458,462,473,481,484,806,810,816,859,866,870,883,887,890,897,913,919,971,974,1018,1034,1038,1045,1048,1092,1101,1112,1138,1289,1293,1308,1312,1319,1330,1375,1378,1385,1409,1457,1465,1469,1476,1603,1610,1614,1621,1631,1734,1746,1754,1758,1761,1768,1774,1796,1925,1934,1941,1944,1987,1994,1998,2130,2133,2136,2139,2189],[20,21,8],"h1",{"id":8},[23,24,25,29,30,34,35,40],"p",{},[26,27,28],"code",{},"vite build"," 使用 ",[31,32,33],"strong",{},"Rollup"," 打包并应用内置优化。开发阶段原理见 ",[36,37,39],"a",{"href":38},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fworkflow","工作原理","。",[23,42,43],{},"下面从 Rollup 配置透传、目标环境、代码分割、资源与压缩等方面说明。",[45,46,48,49,51],"h3",{"id":47},"一构建命令-vite-build-背后的-rollup-打包","一、构建命令 ",[26,50,28],{}," 背后的 Rollup 打包",[23,53,54,55,57],{},"当执行 ",[26,56,28],{}," 时，Vite 会：",[59,60,61,69,76,87,94],"ol",{},[62,63,64,65,68],"li",{},"解析用户配置（",[26,66,67],{},"vite.config.js","）。",[62,70,71,72,75],{},"调用 ",[26,73,74],{},"rollup.rollup()"," 创建 Rollup 构建。",[62,77,78,79,82,83,86],{},"应用内置插件（如 ",[26,80,81],{},"@vitejs\u002Fplugin-vue","、",[26,84,85],{},"@vitejs\u002Fplugin-react"," 等）。",[62,88,89,90,93],{},"合并 ",[26,91,92],{},"build.rollupOptions"," 中的 Rollup 配置。",[62,95,96,97,100],{},"输出优化的产物到 ",[26,98,99],{},"dist"," 目录。",[23,102,103,106,107,109],{},[31,104,105],{},"关键点","：Vite 的 ",[26,108,13],{}," 命令完全基于 Rollup，因此大部分 Rollup 插件和配置选项都可以直接使用。",[111,112,114,115],"h4",{"id":113},"透传-rollup-配置buildrollupoptions","透传 Rollup 配置：",[26,116,92],{},[23,118,119,120,122,123,125],{},"你可以在 ",[26,121,67],{}," 中通过 ",[26,124,92],{}," 直接传递 Rollup 配置：",[127,128,133],"pre",{"className":129,"code":130,"language":131,"meta":132,"style":132},"language-js shiki shiki-themes material-theme-lighter github-light github-dark","export default {\n  build: {\n    rollupOptions: {\n      input: 'src\u002Fmain.js',           \u002F\u002F 多入口时使用\n      output: {\n        dir: 'dist',\n        format: 'es',\n        entryFileNames: 'assets\u002F[name].[hash].js',\n        chunkFileNames: 'assets\u002F[name].[hash].js',\n        assetFileNames: 'assets\u002F[name].[hash].[ext]',\n        manualChunks: { ... },        \u002F\u002F 自定义代码分割\n      },\n      external: ['lodash'],           \u002F\u002F 排除某些依赖不打包\n    },\n  },\n};\n","js","",[26,134,135,151,163,173,199,209,226,243,260,276,293,314,320,347,353,359],{"__ignoreMap":132},[136,137,140,144,147],"span",{"class":138,"line":139},"line",1,[136,141,143],{"class":142},"sVHd0","export",[136,145,146],{"class":142}," default",[136,148,150],{"class":149},"sP7_E"," {\n",[136,152,154,158,161],{"class":138,"line":153},2,[136,155,157],{"class":156},"skxfh","  build",[136,159,160],{"class":149},":",[136,162,150],{"class":149},[136,164,166,169,171],{"class":138,"line":165},3,[136,167,168],{"class":156},"    rollupOptions",[136,170,160],{"class":149},[136,172,150],{"class":149},[136,174,176,179,181,185,189,192,195],{"class":138,"line":175},4,[136,177,178],{"class":156},"      input",[136,180,160],{"class":149},[136,182,184],{"class":183},"sjJ54"," '",[136,186,188],{"class":187},"s_sjI","src\u002Fmain.js",[136,190,191],{"class":183},"'",[136,193,194],{"class":149},",",[136,196,198],{"class":197},"sutJx","           \u002F\u002F 多入口时使用\n",[136,200,202,205,207],{"class":138,"line":201},5,[136,203,204],{"class":156},"      output",[136,206,160],{"class":149},[136,208,150],{"class":149},[136,210,212,215,217,219,221,223],{"class":138,"line":211},6,[136,213,214],{"class":156},"        dir",[136,216,160],{"class":149},[136,218,184],{"class":183},[136,220,99],{"class":187},[136,222,191],{"class":183},[136,224,225],{"class":149},",\n",[136,227,229,232,234,236,239,241],{"class":138,"line":228},7,[136,230,231],{"class":156},"        format",[136,233,160],{"class":149},[136,235,184],{"class":183},[136,237,238],{"class":187},"es",[136,240,191],{"class":183},[136,242,225],{"class":149},[136,244,246,249,251,253,256,258],{"class":138,"line":245},8,[136,247,248],{"class":156},"        entryFileNames",[136,250,160],{"class":149},[136,252,184],{"class":183},[136,254,255],{"class":187},"assets\u002F[name].[hash].js",[136,257,191],{"class":183},[136,259,225],{"class":149},[136,261,263,266,268,270,272,274],{"class":138,"line":262},9,[136,264,265],{"class":156},"        chunkFileNames",[136,267,160],{"class":149},[136,269,184],{"class":183},[136,271,255],{"class":187},[136,273,191],{"class":183},[136,275,225],{"class":149},[136,277,279,282,284,286,289,291],{"class":138,"line":278},10,[136,280,281],{"class":156},"        assetFileNames",[136,283,160],{"class":149},[136,285,184],{"class":183},[136,287,288],{"class":187},"assets\u002F[name].[hash].[ext]",[136,290,191],{"class":183},[136,292,225],{"class":149},[136,294,296,299,301,304,308,311],{"class":138,"line":295},11,[136,297,298],{"class":156},"        manualChunks",[136,300,160],{"class":149},[136,302,303],{"class":149}," {",[136,305,307],{"class":306},"smGrS"," ...",[136,309,310],{"class":149}," },",[136,312,313],{"class":197},"        \u002F\u002F 自定义代码分割\n",[136,315,317],{"class":138,"line":316},12,[136,318,319],{"class":149},"      },\n",[136,321,323,326,328,332,334,337,339,342,344],{"class":138,"line":322},13,[136,324,325],{"class":156},"      external",[136,327,160],{"class":149},[136,329,331],{"class":330},"su5hD"," [",[136,333,191],{"class":183},[136,335,336],{"class":187},"lodash",[136,338,191],{"class":183},[136,340,341],{"class":330},"]",[136,343,194],{"class":149},[136,345,346],{"class":197},"           \u002F\u002F 排除某些依赖不打包\n",[136,348,350],{"class":138,"line":349},14,[136,351,352],{"class":149},"    },\n",[136,354,356],{"class":138,"line":355},15,[136,357,358],{"class":149},"  },\n",[136,360,362],{"class":138,"line":361},16,[136,363,364],{"class":149},"};\n",[111,366,368,371],{"id":367},"buildtarget-指定浏览器兼容目标",[26,369,370],{},"build.target"," 指定浏览器兼容目标",[23,373,374,376,377,383,384,390,391,394,395,82,398,401,402,40],{},[26,375,370],{}," 用于设置最终打包代码的浏览器兼容目标。",[31,378,379,380],{},"Vite 7 起默认值已改为 ",[26,381,382],{},"'baseline-widely-available'","（对应 Chrome\u002FEdge ≥111、Firefox ≥114、Safari ≥16.4 等，跟随 ",[36,385,389],{"href":386,"rel":387},"https:\u002F\u002Fweb-platform-dx.github.io\u002Fweb-features\u002F",[388],"nofollow","Baseline"," 标准逐年更新；Vite 5\u002F6 时代默认值为已废弃的 ",[26,392,393],{},"'modules'","）。你也可以设置为具体的版本如 ",[26,396,397],{},"'es2015'",[26,399,400],{},"'es2020'","，或浏览器目标如 ",[26,403,404],{},"'chrome87'",[127,406,408],{"className":129,"code":407,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    target: \"es2015\", \u002F\u002F 转译到 ES5 级别（更广兼容，但体积稍大）\n  },\n};\n",[26,409,410,418,426,447,451],{"__ignoreMap":132},[136,411,412,414,416],{"class":138,"line":139},[136,413,143],{"class":142},[136,415,146],{"class":142},[136,417,150],{"class":149},[136,419,420,422,424],{"class":138,"line":153},[136,421,157],{"class":156},[136,423,160],{"class":149},[136,425,150],{"class":149},[136,427,428,431,433,436,439,442,444],{"class":138,"line":165},[136,429,430],{"class":156},"    target",[136,432,160],{"class":149},[136,434,435],{"class":183}," \"",[136,437,438],{"class":187},"es2015",[136,440,441],{"class":183},"\"",[136,443,194],{"class":149},[136,445,446],{"class":197}," \u002F\u002F 转译到 ES5 级别（更广兼容，但体积稍大）\n",[136,448,449],{"class":138,"line":175},[136,450,358],{"class":149},[136,452,453],{"class":138,"line":201},[136,454,364],{"class":149},[23,456,457],{},"需要注意的是，降低 target 会增加 polyfill 和转译代码的体积，因此建议在用户群体允许的情况下保持较高目标。",[45,459,461],{"id":460},"二代码分割策略","二、代码分割策略",[23,463,464,465,468,469,472],{},"Vite 默认会根据动态导入（",[26,466,467],{},"import()","）自动进行代码分割，也可以通过 ",[26,470,471],{},"manualChunks"," 进行更精细的控制。",[111,474,476,477,480],{"id":475},"_1-buildrollupoptionsoutputmanualchunks-自定义拆分","1. ",[26,478,479],{},"build.rollupOptions.output.manualChunks"," 自定义拆分",[23,482,483],{},"你可以提供一个函数，根据模块路径返回 chunk 名称，从而将特定模块分组。",[127,485,487],{"className":129,"code":486,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    rollupOptions: {\n      output: {\n        manualChunks(id) {\n          if (id.includes(\"node_modules\")) {\n            \u002F\u002F 将 node_modules 中的模块按包名拆分\n            const pkgName = id.match(\u002Fnode_modules\\\u002F(@[^\u002F]+\\\u002F[^\u002F]+|[^\u002F]+)\u002F)?.[1];\n            if (pkgName) return `vendor-${pkgName.replace(\"@\", \"\")}`;\n            return \"vendor\";\n          }\n          \u002F\u002F 可以将业务公共模块提取\n          if (id.includes(\"src\u002Fcommon\u002Futils\")) return \"utils\";\n        },\n      },\n    },\n  },\n};\n",[26,488,489,497,505,513,521,538,570,575,672,725,739,744,749,783,788,792,796,801],{"__ignoreMap":132},[136,490,491,493,495],{"class":138,"line":139},[136,492,143],{"class":142},[136,494,146],{"class":142},[136,496,150],{"class":149},[136,498,499,501,503],{"class":138,"line":153},[136,500,157],{"class":156},[136,502,160],{"class":149},[136,504,150],{"class":149},[136,506,507,509,511],{"class":138,"line":165},[136,508,168],{"class":156},[136,510,160],{"class":149},[136,512,150],{"class":149},[136,514,515,517,519],{"class":138,"line":175},[136,516,204],{"class":156},[136,518,160],{"class":149},[136,520,150],{"class":149},[136,522,523,526,529,533,536],{"class":138,"line":201},[136,524,298],{"class":525},"sVXei",[136,527,528],{"class":149},"(",[136,530,532],{"class":531},"s99_P","id",[136,534,535],{"class":149},")",[136,537,150],{"class":149},[136,539,540,543,546,548,551,555,557,559,562,564,567],{"class":138,"line":211},[136,541,542],{"class":142},"          if",[136,544,545],{"class":156}," (",[136,547,532],{"class":330},[136,549,550],{"class":149},".",[136,552,554],{"class":553},"sGLFI","includes",[136,556,528],{"class":156},[136,558,441],{"class":183},[136,560,561],{"class":187},"node_modules",[136,563,441],{"class":183},[136,565,566],{"class":156},")) ",[136,568,569],{"class":149},"{\n",[136,571,572],{"class":138,"line":228},[136,573,574],{"class":197},"            \u002F\u002F 将 node_modules 中的模块按包名拆分\n",[136,576,577,581,585,588,591,593,596,598,601,604,608,611,614,618,621,624,626,629,631,633,635,637,639,642,644,646,648,650,652,654,656,658,661,663,667,669],{"class":138,"line":245},[136,578,580],{"class":579},"sbsja","            const",[136,582,584],{"class":583},"s_hVV"," pkgName",[136,586,587],{"class":306}," =",[136,589,590],{"class":330}," id",[136,592,550],{"class":149},[136,594,595],{"class":553},"match",[136,597,528],{"class":156},[136,599,600],{"class":183},"\u002F",[136,602,561],{"class":603},"sQRbd",[136,605,607],{"class":606},"sjYin","\\\u002F",[136,609,528],{"class":610},"s-KJb",[136,612,613],{"class":603},"@",[136,615,617],{"class":616},"s39Yj","[",[136,619,620],{"class":306},"^",[136,622,600],{"class":623},"stzsN",[136,625,341],{"class":616},[136,627,628],{"class":306},"+",[136,630,607],{"class":606},[136,632,617],{"class":616},[136,634,620],{"class":306},[136,636,600],{"class":623},[136,638,341],{"class":616},[136,640,641],{"class":306},"+|",[136,643,617],{"class":616},[136,645,620],{"class":306},[136,647,600],{"class":623},[136,649,341],{"class":616},[136,651,628],{"class":306},[136,653,535],{"class":610},[136,655,600],{"class":183},[136,657,535],{"class":156},[136,659,660],{"class":149},"?.",[136,662,617],{"class":156},[136,664,666],{"class":665},"srdBf","1",[136,668,341],{"class":156},[136,670,671],{"class":149},";\n",[136,673,674,677,679,682,685,688,691,694,697,699,701,704,707,709,711,713,715,718,720,723],{"class":138,"line":262},[136,675,676],{"class":142},"            if",[136,678,545],{"class":156},[136,680,681],{"class":330},"pkgName",[136,683,684],{"class":156},") ",[136,686,687],{"class":142},"return",[136,689,690],{"class":183}," `",[136,692,693],{"class":187},"vendor-",[136,695,696],{"class":183},"${",[136,698,681],{"class":330},[136,700,550],{"class":183},[136,702,703],{"class":553},"replace",[136,705,528],{"class":706},"sfo-9",[136,708,441],{"class":183},[136,710,613],{"class":187},[136,712,441],{"class":183},[136,714,194],{"class":183},[136,716,717],{"class":183}," \"\"",[136,719,535],{"class":706},[136,721,722],{"class":183},"}`",[136,724,671],{"class":149},[136,726,727,730,732,735,737],{"class":138,"line":278},[136,728,729],{"class":142},"            return",[136,731,435],{"class":183},[136,733,734],{"class":187},"vendor",[136,736,441],{"class":183},[136,738,671],{"class":149},[136,740,741],{"class":138,"line":295},[136,742,743],{"class":149},"          }\n",[136,745,746],{"class":138,"line":316},[136,747,748],{"class":197},"          \u002F\u002F 可以将业务公共模块提取\n",[136,750,751,753,755,757,759,761,763,765,768,770,772,774,776,779,781],{"class":138,"line":322},[136,752,542],{"class":142},[136,754,545],{"class":156},[136,756,532],{"class":330},[136,758,550],{"class":149},[136,760,554],{"class":553},[136,762,528],{"class":156},[136,764,441],{"class":183},[136,766,767],{"class":187},"src\u002Fcommon\u002Futils",[136,769,441],{"class":183},[136,771,566],{"class":156},[136,773,687],{"class":142},[136,775,435],{"class":183},[136,777,778],{"class":187},"utils",[136,780,441],{"class":183},[136,782,671],{"class":149},[136,784,785],{"class":138,"line":349},[136,786,787],{"class":149},"        },\n",[136,789,790],{"class":138,"line":355},[136,791,319],{"class":149},[136,793,794],{"class":138,"line":361},[136,795,352],{"class":149},[136,797,799],{"class":138,"line":798},17,[136,800,358],{"class":149},[136,802,804],{"class":138,"line":803},18,[136,805,364],{"class":149},[111,807,809],{"id":808},"_2-动态导入自动分割-chunk","2. 动态导入自动分割 chunk",[23,811,812,813,815],{},"任何动态 ",[26,814,467],{}," 语句都会自动生成一个独立的异步 chunk，这是最自然的代码分割方式。",[127,817,819],{"className":129,"code":818,"language":131,"meta":132,"style":132},"\u002F\u002F 路由懒加载\nconst UserPage = () => import(\".\u002Fpages\u002FUserPage.vue\");\n",[26,820,821,826],{"__ignoreMap":132},[136,822,823],{"class":138,"line":139},[136,824,825],{"class":197},"\u002F\u002F 路由懒加载\n",[136,827,828,831,835,837,840,843,846,848,850,853,855,857],{"class":138,"line":153},[136,829,830],{"class":579},"const",[136,832,834],{"class":833},"sfCm-"," UserPage",[136,836,587],{"class":306},[136,838,839],{"class":149}," ()",[136,841,842],{"class":579}," =>",[136,844,845],{"class":306}," import",[136,847,528],{"class":330},[136,849,441],{"class":183},[136,851,852],{"class":187},".\u002Fpages\u002FUserPage.vue",[136,854,441],{"class":183},[136,856,535],{"class":330},[136,858,671],{"class":149},[23,860,861,862,865],{},"Vite 会为 ",[26,863,864],{},"UserPage.vue"," 及其依赖的模块单独打包为一个 chunk，在需要时加载。",[111,867,869],{"id":868},"_3-第三方库自动分割为独立-vendor-chunk","3. 第三方库自动分割为独立 vendor chunk",[23,871,872,873,875,876,879,880,882],{},"Vite 内置了一个简单的 vendor 分割策略：如果某个模块来自 ",[26,874,561],{}," 且被多个入口引用（或体积大于一定阈值），会被自动提取到 ",[26,877,878],{},"vendor.[hash].js"," 中。你也可以通过 ",[26,881,471],{}," 定制更精细的 vendor 策略，例如按包名拆分。",[45,884,886],{"id":885},"三tree-shaking-与-sideeffects","三、Tree Shaking 与 sideEffects",[23,888,889],{},"Vite 在生产模式下默认启用 Tree Shaking，依赖 Rollup 基于 ESM 静态分析的能力。",[111,891,893,894],{"id":892},"确保库正确配置-sideeffects-false","确保库正确配置 ",[26,895,896],{},"sideEffects: false",[23,898,899,901,902,82,905,908,909,912],{},[26,900,896],{}," 告诉打包工具该包的所有模块都没有副作用（即只导出功能，不会在导入时执行额外代码），可以安全地剔除未使用的导出。许多主流库（如 ",[26,903,904],{},"lodash-es",[26,906,907],{},"vue","）已在 ",[26,910,911],{},"package.json"," 中正确配置。",[23,914,915,916,918],{},"如果你的项目中有自定义模块但无副作用，也应在 ",[26,917,911],{}," 中设置：",[127,920,924],{"className":921,"code":922,"language":923,"meta":132,"style":132},"language-json shiki shiki-themes material-theme-lighter github-light github-dark","{\n  \"name\": \"my-lib\",\n  \"sideEffects\": false\n}\n","json",[26,925,926,930,952,966],{"__ignoreMap":132},[136,927,928],{"class":138,"line":139},[136,929,569],{"class":149},[136,931,932,935,939,941,943,945,948,950],{"class":138,"line":153},[136,933,934],{"class":616},"  \"",[136,936,938],{"class":937},"sseR_","name",[136,940,441],{"class":616},[136,942,160],{"class":149},[136,944,435],{"class":183},[136,946,947],{"class":187},"my-lib",[136,949,441],{"class":183},[136,951,225],{"class":149},[136,953,954,956,959,961,963],{"class":138,"line":165},[136,955,934],{"class":616},[136,957,958],{"class":937},"sideEffects",[136,960,441],{"class":616},[136,962,160],{"class":149},[136,964,965],{"class":616}," false\n",[136,967,968],{"class":138,"line":175},[136,969,970],{"class":149},"}\n",[23,972,973],{},"如果某些文件有副作用（如 polyfill、全局样式），则需要显式标记：",[127,975,977],{"className":921,"code":976,"language":923,"meta":132,"style":132},"{\n  \"sideEffects\": [\".\u002Fsrc\u002Fpolyfill.js\", \"*.css\"]\n}\n",[26,978,979,983,1014],{"__ignoreMap":132},[136,980,981],{"class":138,"line":139},[136,982,569],{"class":149},[136,984,985,987,989,991,993,995,997,1000,1002,1004,1006,1009,1011],{"class":138,"line":153},[136,986,934],{"class":616},[136,988,958],{"class":937},[136,990,441],{"class":616},[136,992,160],{"class":149},[136,994,331],{"class":149},[136,996,441],{"class":183},[136,998,999],{"class":187},".\u002Fsrc\u002Fpolyfill.js",[136,1001,441],{"class":183},[136,1003,194],{"class":149},[136,1005,435],{"class":183},[136,1007,1008],{"class":187},"*.css",[136,1010,441],{"class":183},[136,1012,1013],{"class":149},"]\n",[136,1015,1016],{"class":138,"line":165},[136,1017,970],{"class":149},[23,1019,1020,1023,1024,1026,1027,1029,1030,1033],{},[31,1021,1022],{},"注意","：Vite 在生产构建时，Rollup 会读取 ",[26,1025,911],{}," 中的 ",[26,1028,958],{}," 字段。若要强制保留某些模块，可通过 ",[26,1031,1032],{},"treeshake.moduleSideEffects"," 选项覆盖。",[45,1035,1037],{"id":1036},"四资源处理","四、资源处理",[111,1039,1041,1042],{"id":1040},"_1-静态资源内联阈值-buildassetsinlinelimit","1. 静态资源内联阈值 ",[26,1043,1044],{},"build.assetsInlineLimit",[23,1046,1047],{},"默认小于 4KB（4096 字节）的静态资源（图片、字体等）会被内联为 base64。你可以通过以下方式修改：",[127,1049,1051],{"className":129,"code":1050,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    assetsInlineLimit: 8192, \u002F\u002F 改为 8KB\n  },\n};\n",[26,1052,1053,1061,1069,1084,1088],{"__ignoreMap":132},[136,1054,1055,1057,1059],{"class":138,"line":139},[136,1056,143],{"class":142},[136,1058,146],{"class":142},[136,1060,150],{"class":149},[136,1062,1063,1065,1067],{"class":138,"line":153},[136,1064,157],{"class":156},[136,1066,160],{"class":149},[136,1068,150],{"class":149},[136,1070,1071,1074,1076,1079,1081],{"class":138,"line":165},[136,1072,1073],{"class":156},"    assetsInlineLimit",[136,1075,160],{"class":149},[136,1077,1078],{"class":665}," 8192",[136,1080,194],{"class":149},[136,1082,1083],{"class":197}," \u002F\u002F 改为 8KB\n",[136,1085,1086],{"class":138,"line":175},[136,1087,358],{"class":149},[136,1089,1090],{"class":138,"line":201},[136,1091,364],{"class":149},[1093,1094,1095,1098],"ul",{},[62,1096,1097],{},"内联的好处：减少 HTTP 请求。",[62,1099,1100],{},"缺点：增加 bundle 体积，且内联资源无法被浏览器缓存。",[111,1102,1104,1105,1108,1109],{"id":1103},"_2-资源文件命名-buildassetsdir-与-buildrollupoptionsoutputassetfilenames","2. 资源文件命名 ",[26,1106,1107],{},"build.assetsDir"," 与 ",[26,1110,1111],{},"build.rollupOptions.output.assetFileNames",[1093,1113,1114,1122],{},[62,1115,1116,1118,1119,40],{},[26,1117,1107],{},"：指定静态资源输出的子目录，默认为 ",[26,1120,1121],{},"assets",[62,1123,1124,1127,1128,82,1131,82,1134,1137],{},[26,1125,1126],{},"assetFileNames","：更精细地控制资源文件名，支持 ",[26,1129,1130],{},"[name]",[26,1132,1133],{},"[hash]",[26,1135,1136],{},"[ext]"," 占位符。",[127,1139,1141],{"className":129,"code":1140,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    assetsDir: \"static\",\n    rollupOptions: {\n      output: {\n        assetFileNames: (assetInfo) => {\n          if (assetInfo.name.endsWith(\".png\")) {\n            return \"images\u002F[name]-[hash][ext]\";\n          }\n          return \"assets\u002F[name]-[hash][ext]\";\n        },\n      },\n    },\n  },\n};\n",[26,1142,1143,1151,1159,1175,1183,1191,1208,1238,1251,1255,1269,1273,1277,1281,1285],{"__ignoreMap":132},[136,1144,1145,1147,1149],{"class":138,"line":139},[136,1146,143],{"class":142},[136,1148,146],{"class":142},[136,1150,150],{"class":149},[136,1152,1153,1155,1157],{"class":138,"line":153},[136,1154,157],{"class":156},[136,1156,160],{"class":149},[136,1158,150],{"class":149},[136,1160,1161,1164,1166,1168,1171,1173],{"class":138,"line":165},[136,1162,1163],{"class":156},"    assetsDir",[136,1165,160],{"class":149},[136,1167,435],{"class":183},[136,1169,1170],{"class":187},"static",[136,1172,441],{"class":183},[136,1174,225],{"class":149},[136,1176,1177,1179,1181],{"class":138,"line":175},[136,1178,168],{"class":156},[136,1180,160],{"class":149},[136,1182,150],{"class":149},[136,1184,1185,1187,1189],{"class":138,"line":201},[136,1186,204],{"class":156},[136,1188,160],{"class":149},[136,1190,150],{"class":149},[136,1192,1193,1195,1197,1199,1202,1204,1206],{"class":138,"line":211},[136,1194,281],{"class":553},[136,1196,160],{"class":149},[136,1198,545],{"class":149},[136,1200,1201],{"class":531},"assetInfo",[136,1203,535],{"class":149},[136,1205,842],{"class":579},[136,1207,150],{"class":149},[136,1209,1210,1212,1214,1216,1218,1220,1222,1225,1227,1229,1232,1234,1236],{"class":138,"line":228},[136,1211,542],{"class":142},[136,1213,545],{"class":156},[136,1215,1201],{"class":330},[136,1217,550],{"class":149},[136,1219,938],{"class":330},[136,1221,550],{"class":149},[136,1223,1224],{"class":553},"endsWith",[136,1226,528],{"class":156},[136,1228,441],{"class":183},[136,1230,1231],{"class":187},".png",[136,1233,441],{"class":183},[136,1235,566],{"class":156},[136,1237,569],{"class":149},[136,1239,1240,1242,1244,1247,1249],{"class":138,"line":245},[136,1241,729],{"class":142},[136,1243,435],{"class":183},[136,1245,1246],{"class":187},"images\u002F[name]-[hash][ext]",[136,1248,441],{"class":183},[136,1250,671],{"class":149},[136,1252,1253],{"class":138,"line":262},[136,1254,743],{"class":149},[136,1256,1257,1260,1262,1265,1267],{"class":138,"line":278},[136,1258,1259],{"class":142},"          return",[136,1261,435],{"class":183},[136,1263,1264],{"class":187},"assets\u002F[name]-[hash][ext]",[136,1266,441],{"class":183},[136,1268,671],{"class":149},[136,1270,1271],{"class":138,"line":295},[136,1272,787],{"class":149},[136,1274,1275],{"class":138,"line":316},[136,1276,319],{"class":149},[136,1278,1279],{"class":138,"line":322},[136,1280,352],{"class":149},[136,1282,1283],{"class":138,"line":349},[136,1284,358],{"class":149},[136,1286,1287],{"class":138,"line":355},[136,1288,364],{"class":149},[111,1290,1292],{"id":1291},"_3-大资源输出为独立文件","3. 大资源输出为独立文件",[23,1294,1295,1296,1299,1300,1303,1304,1307],{},"对于超过 ",[26,1297,1298],{},"assetsInlineLimit"," 的资源，Vite 会自动输出为独立文件，并在 JavaScript 中生成 ",[26,1301,1302],{},"import.meta.glob"," 或 ",[26,1305,1306],{},"new URL"," 引用路径。无需额外配置。",[45,1309,1311],{"id":1310},"五css-优化","五、CSS 优化",[111,1313,1315,1316],{"id":1314},"_1-提取-css-到单独文件-buildcsscodesplit","1. 提取 CSS 到单独文件 ",[26,1317,1318],{},"build.cssCodeSplit",[23,1320,1321,1322,1325,1326,1329],{},"默认情况下，Vite 会为每个异步 chunk 生成对应的 CSS 文件（",[26,1323,1324],{},"cssCodeSplit: true","）。如果设置为 ",[26,1327,1328],{},"false","，所有 CSS 会被合并到一个文件中。",[127,1331,1333],{"className":129,"code":1332,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    cssCodeSplit: false, \u002F\u002F 关闭 CSS 代码分割，合并成单个 CSS 文件\n  },\n};\n",[26,1334,1335,1343,1351,1367,1371],{"__ignoreMap":132},[136,1336,1337,1339,1341],{"class":138,"line":139},[136,1338,143],{"class":142},[136,1340,146],{"class":142},[136,1342,150],{"class":149},[136,1344,1345,1347,1349],{"class":138,"line":153},[136,1346,157],{"class":156},[136,1348,160],{"class":149},[136,1350,150],{"class":149},[136,1352,1353,1356,1358,1362,1364],{"class":138,"line":165},[136,1354,1355],{"class":156},"    cssCodeSplit",[136,1357,160],{"class":149},[136,1359,1361],{"class":1360},"syTEX"," false",[136,1363,194],{"class":149},[136,1365,1366],{"class":197}," \u002F\u002F 关闭 CSS 代码分割，合并成单个 CSS 文件\n",[136,1368,1369],{"class":138,"line":175},[136,1370,358],{"class":149},[136,1372,1373],{"class":138,"line":201},[136,1374,364],{"class":149},[23,1376,1377],{},"合并有助于减少请求数量，但可能增加单文件体积，需要权衡。",[111,1379,1381,1382],{"id":1380},"_2-css-压缩-buildcssminify","2. CSS 压缩 ",[26,1383,1384],{},"build.cssMinify",[23,1386,1387,1390,1391,1393,1394,1397,1398,1401,1402,1405,1406,1408],{},[31,1388,1389],{},"Vite 7 起默认使用 Lightning CSS"," 进行 CSS 压缩（",[26,1392,1384],{}," 默认值为 ",[26,1395,1396],{},"'lightningcss'","；早期版本默认 ",[26,1399,1400],{},"'esbuild'","）。可显式切换为 ",[26,1403,1404],{},"esbuild","（需额外安装 ",[26,1407,1404],{}," 作为 devDependency）：",[127,1410,1412],{"className":129,"code":1411,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    cssMinify: \"lightningcss\", \u002F\u002F 默认；可选 'esbuild' 或 false\n  },\n};\n",[26,1413,1414,1422,1430,1449,1453],{"__ignoreMap":132},[136,1415,1416,1418,1420],{"class":138,"line":139},[136,1417,143],{"class":142},[136,1419,146],{"class":142},[136,1421,150],{"class":149},[136,1423,1424,1426,1428],{"class":138,"line":153},[136,1425,157],{"class":156},[136,1427,160],{"class":149},[136,1429,150],{"class":149},[136,1431,1432,1435,1437,1439,1442,1444,1446],{"class":138,"line":165},[136,1433,1434],{"class":156},"    cssMinify",[136,1436,160],{"class":149},[136,1438,435],{"class":183},[136,1440,1441],{"class":187},"lightningcss",[136,1443,441],{"class":183},[136,1445,194],{"class":149},[136,1447,1448],{"class":197}," \u002F\u002F 默认；可选 'esbuild' 或 false\n",[136,1450,1451],{"class":138,"line":175},[136,1452,358],{"class":149},[136,1454,1455],{"class":138,"line":201},[136,1456,364],{"class":149},[23,1458,1459,1461,1462,1464],{},[26,1460,1441],{},"（Rust 实现）压缩率与速度均有优势；",[26,1463,1404],{}," 仍是常见的历史备选项。",[111,1466,1468],{"id":1467},"_3-预处理器scssless全局变量注入","3. 预处理器（SCSS\u002FLess）全局变量注入",[23,1470,1471,1472,1475],{},"通过 ",[26,1473,1474],{},"css.preprocessorOptions"," 可以向所有预处理器文件注入全局变量或 mixin：",[127,1477,1479],{"className":129,"code":1478,"language":131,"meta":132,"style":132},"export default {\n  css: {\n    preprocessorOptions: {\n      scss: {\n        additionalData: `$primary-color: #42b983; @import \"@\u002Fstyles\u002Fmixins.scss\";`,\n      },\n      less: {\n        modifyVars: { \"primary-color\": \"#42b983\" },\n        javascriptEnabled: true,\n      },\n    },\n  },\n};\n",[26,1480,1481,1489,1498,1507,1516,1533,1537,1546,1575,1587,1591,1595,1599],{"__ignoreMap":132},[136,1482,1483,1485,1487],{"class":138,"line":139},[136,1484,143],{"class":142},[136,1486,146],{"class":142},[136,1488,150],{"class":149},[136,1490,1491,1494,1496],{"class":138,"line":153},[136,1492,1493],{"class":156},"  css",[136,1495,160],{"class":149},[136,1497,150],{"class":149},[136,1499,1500,1503,1505],{"class":138,"line":165},[136,1501,1502],{"class":156},"    preprocessorOptions",[136,1504,160],{"class":149},[136,1506,150],{"class":149},[136,1508,1509,1512,1514],{"class":138,"line":175},[136,1510,1511],{"class":156},"      scss",[136,1513,160],{"class":149},[136,1515,150],{"class":149},[136,1517,1518,1521,1523,1525,1528,1531],{"class":138,"line":201},[136,1519,1520],{"class":156},"        additionalData",[136,1522,160],{"class":149},[136,1524,690],{"class":183},[136,1526,1527],{"class":187},"$primary-color: #42b983; @import \"@\u002Fstyles\u002Fmixins.scss\";",[136,1529,1530],{"class":183},"`",[136,1532,225],{"class":149},[136,1534,1535],{"class":138,"line":211},[136,1536,319],{"class":149},[136,1538,1539,1542,1544],{"class":138,"line":228},[136,1540,1541],{"class":156},"      less",[136,1543,160],{"class":149},[136,1545,150],{"class":149},[136,1547,1548,1551,1553,1555,1557,1561,1563,1565,1567,1570,1572],{"class":138,"line":245},[136,1549,1550],{"class":156},"        modifyVars",[136,1552,160],{"class":149},[136,1554,303],{"class":149},[136,1556,435],{"class":183},[136,1558,1560],{"class":1559},"sZUrc","primary-color",[136,1562,441],{"class":183},[136,1564,160],{"class":149},[136,1566,435],{"class":183},[136,1568,1569],{"class":187},"#42b983",[136,1571,441],{"class":183},[136,1573,1574],{"class":149}," },\n",[136,1576,1577,1580,1582,1585],{"class":138,"line":262},[136,1578,1579],{"class":156},"        javascriptEnabled",[136,1581,160],{"class":149},[136,1583,1584],{"class":1360}," true",[136,1586,225],{"class":149},[136,1588,1589],{"class":138,"line":278},[136,1590,319],{"class":149},[136,1592,1593],{"class":138,"line":295},[136,1594,352],{"class":149},[136,1596,1597],{"class":138,"line":316},[136,1598,358],{"class":149},[136,1600,1601],{"class":138,"line":322},[136,1602,364],{"class":149},[23,1604,1605,1606,1609],{},"注意：",[26,1607,1608],{},"additionalData"," 会在每个 SCSS 文件开头注入内容，可能影响构建性能，应避免注入过多代码。",[45,1611,1613],{"id":1612},"六压缩混淆","六、压缩混淆",[111,1615,1617,1620],{"id":1616},"buildminify-选项",[26,1618,1619],{},"build.minify"," 选项",[23,1622,1623,1624,1626,1627,1630],{},"Vite 支持两种压缩混淆器：",[26,1625,1404],{},"（默认，速度极快）和 ",[26,1628,1629],{},"terser","（更彻底，但慢）。可通过以下方式配置：",[127,1632,1634],{"className":129,"code":1633,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    minify: \"terser\", \u002F\u002F 或 'esbuild'\n    terserOptions: {\n      \u002F\u002F 仅当 minify: 'terser' 时生效\n      compress: {\n        drop_console: true, \u002F\u002F 移除 console.log\n        drop_debugger: true,\n      },\n    },\n  },\n};\n",[26,1635,1636,1644,1652,1670,1679,1684,1693,1707,1718,1722,1726,1730],{"__ignoreMap":132},[136,1637,1638,1640,1642],{"class":138,"line":139},[136,1639,143],{"class":142},[136,1641,146],{"class":142},[136,1643,150],{"class":149},[136,1645,1646,1648,1650],{"class":138,"line":153},[136,1647,157],{"class":156},[136,1649,160],{"class":149},[136,1651,150],{"class":149},[136,1653,1654,1657,1659,1661,1663,1665,1667],{"class":138,"line":165},[136,1655,1656],{"class":156},"    minify",[136,1658,160],{"class":149},[136,1660,435],{"class":183},[136,1662,1629],{"class":187},[136,1664,441],{"class":183},[136,1666,194],{"class":149},[136,1668,1669],{"class":197}," \u002F\u002F 或 'esbuild'\n",[136,1671,1672,1675,1677],{"class":138,"line":175},[136,1673,1674],{"class":156},"    terserOptions",[136,1676,160],{"class":149},[136,1678,150],{"class":149},[136,1680,1681],{"class":138,"line":201},[136,1682,1683],{"class":197},"      \u002F\u002F 仅当 minify: 'terser' 时生效\n",[136,1685,1686,1689,1691],{"class":138,"line":211},[136,1687,1688],{"class":156},"      compress",[136,1690,160],{"class":149},[136,1692,150],{"class":149},[136,1694,1695,1698,1700,1702,1704],{"class":138,"line":228},[136,1696,1697],{"class":156},"        drop_console",[136,1699,160],{"class":149},[136,1701,1584],{"class":1360},[136,1703,194],{"class":149},[136,1705,1706],{"class":197}," \u002F\u002F 移除 console.log\n",[136,1708,1709,1712,1714,1716],{"class":138,"line":245},[136,1710,1711],{"class":156},"        drop_debugger",[136,1713,160],{"class":149},[136,1715,1584],{"class":1360},[136,1717,225],{"class":149},[136,1719,1720],{"class":138,"line":262},[136,1721,319],{"class":149},[136,1723,1724],{"class":138,"line":278},[136,1725,352],{"class":149},[136,1727,1728],{"class":138,"line":295},[136,1729,358],{"class":149},[136,1731,1732],{"class":138,"line":316},[136,1733,364],{"class":149},[1093,1735,1736,1741],{},[62,1737,1738,1740],{},[31,1739,1404],{},"：压缩速度快，适合开发或 CI 环境，压缩率略低于 terser。",[62,1742,1743,1745],{},[31,1744,1629],{},"：压缩率稍高，能移除更多无用代码（如未使用的函数），但构建时间更长。",[23,1747,1748,1749,1751,1752,40],{},"对于大多数项目，",[26,1750,1404],{}," 已足够；如果对体积极度敏感（如移动端 H5），可选择 ",[26,1753,1629],{},[45,1755,1757],{"id":1756},"七构建分析","七、构建分析",[23,1759,1760],{},"分析产物大小是优化的重要环节。",[111,1762,1764,1765],{"id":1763},"_1-使用-rollup-plugin-visualizer","1. 使用 ",[26,1766,1767],{},"rollup-plugin-visualizer",[23,1769,1770,1771,1773],{},"安装插件，并在 ",[26,1772,67],{}," 中配置：",[127,1775,1779],{"className":1776,"code":1777,"language":1778,"meta":132,"style":132},"language-bash shiki shiki-themes material-theme-lighter github-light github-dark","npm install -D rollup-plugin-visualizer\n","bash",[26,1780,1781],{"__ignoreMap":132},[136,1782,1783,1787,1790,1793],{"class":138,"line":139},[136,1784,1786],{"class":1785},"sbgvK","npm",[136,1788,1789],{"class":187}," install",[136,1791,1792],{"class":623}," -D",[136,1794,1795],{"class":187}," rollup-plugin-visualizer\n",[127,1797,1799],{"className":129,"code":1798,"language":131,"meta":132,"style":132},"import { visualizer } from \"rollup-plugin-visualizer\";\n\nexport default {\n  plugins: [\n    visualizer({\n      filename: \"dist\u002Fstats.html\", \u002F\u002F 输出分析报告\n      open: true, \u002F\u002F 构建后自动打开\n      gzipSize: true, \u002F\u002F 显示 gzip 后大小\n    }),\n  ],\n};\n",[26,1800,1801,1825,1831,1839,1849,1858,1877,1891,1905,1914,1921],{"__ignoreMap":132},[136,1802,1803,1806,1808,1811,1814,1817,1819,1821,1823],{"class":138,"line":139},[136,1804,1805],{"class":142},"import",[136,1807,303],{"class":149},[136,1809,1810],{"class":330}," visualizer",[136,1812,1813],{"class":149}," }",[136,1815,1816],{"class":142}," from",[136,1818,435],{"class":183},[136,1820,1767],{"class":187},[136,1822,441],{"class":183},[136,1824,671],{"class":149},[136,1826,1827],{"class":138,"line":153},[136,1828,1830],{"emptyLinePlaceholder":1829},true,"\n",[136,1832,1833,1835,1837],{"class":138,"line":165},[136,1834,143],{"class":142},[136,1836,146],{"class":142},[136,1838,150],{"class":149},[136,1840,1841,1844,1846],{"class":138,"line":175},[136,1842,1843],{"class":156},"  plugins",[136,1845,160],{"class":149},[136,1847,1848],{"class":330}," [\n",[136,1850,1851,1854,1856],{"class":138,"line":201},[136,1852,1853],{"class":553},"    visualizer",[136,1855,528],{"class":330},[136,1857,569],{"class":149},[136,1859,1860,1863,1865,1867,1870,1872,1874],{"class":138,"line":211},[136,1861,1862],{"class":156},"      filename",[136,1864,160],{"class":149},[136,1866,435],{"class":183},[136,1868,1869],{"class":187},"dist\u002Fstats.html",[136,1871,441],{"class":183},[136,1873,194],{"class":149},[136,1875,1876],{"class":197}," \u002F\u002F 输出分析报告\n",[136,1878,1879,1882,1884,1886,1888],{"class":138,"line":228},[136,1880,1881],{"class":156},"      open",[136,1883,160],{"class":149},[136,1885,1584],{"class":1360},[136,1887,194],{"class":149},[136,1889,1890],{"class":197}," \u002F\u002F 构建后自动打开\n",[136,1892,1893,1896,1898,1900,1902],{"class":138,"line":245},[136,1894,1895],{"class":156},"      gzipSize",[136,1897,160],{"class":149},[136,1899,1584],{"class":1360},[136,1901,194],{"class":149},[136,1903,1904],{"class":197}," \u002F\u002F 显示 gzip 后大小\n",[136,1906,1907,1910,1912],{"class":138,"line":262},[136,1908,1909],{"class":149},"    }",[136,1911,535],{"class":330},[136,1913,225],{"class":149},[136,1915,1916,1919],{"class":138,"line":278},[136,1917,1918],{"class":330},"  ]",[136,1920,225],{"class":149},[136,1922,1923],{"class":138,"line":295},[136,1924,364],{"class":149},[23,1926,1927,1928,1930,1931,1933],{},"执行 ",[26,1929,28],{}," 后，会在 ",[26,1932,99],{}," 目录生成一个交互式 HTML 报告，直观展示各模块体积占比。",[111,1935,1937,1938],{"id":1936},"_2-使用-buildreportcompressedsize","2. 使用 ",[26,1939,1940],{},"build.reportCompressedSize",[23,1942,1943],{},"Vite 默认会输出 gzip 压缩后的尺寸（在终端显示）。如果希望关闭此计算以加速构建，可以设置：",[127,1945,1947],{"className":129,"code":1946,"language":131,"meta":132,"style":132},"export default {\n  build: {\n    reportCompressedSize: false, \u002F\u002F 不计算 gzip 大小，加快构建速度\n  },\n};\n",[26,1948,1949,1957,1965,1979,1983],{"__ignoreMap":132},[136,1950,1951,1953,1955],{"class":138,"line":139},[136,1952,143],{"class":142},[136,1954,146],{"class":142},[136,1956,150],{"class":149},[136,1958,1959,1961,1963],{"class":138,"line":153},[136,1960,157],{"class":156},[136,1962,160],{"class":149},[136,1964,150],{"class":149},[136,1966,1967,1970,1972,1974,1976],{"class":138,"line":165},[136,1968,1969],{"class":156},"    reportCompressedSize",[136,1971,160],{"class":149},[136,1973,1361],{"class":1360},[136,1975,194],{"class":149},[136,1977,1978],{"class":197}," \u002F\u002F 不计算 gzip 大小，加快构建速度\n",[136,1980,1981],{"class":138,"line":175},[136,1982,358],{"class":149},[136,1984,1985],{"class":138,"line":201},[136,1986,364],{"class":149},[23,1988,1989,1990,1993],{},"此外，你还可以使用 ",[26,1991,1992],{},"vite build --mode analysis"," 配合环境变量来动态启用可视化分析。",[1995,1996,1997],"h2",{"id":1997},"总结",[1999,2000,2001,2014],"table",{},[2002,2003,2004],"thead",{},[2005,2006,2007,2011],"tr",{},[2008,2009,2010],"th",{},"优化方面",[2008,2012,2013],{},"关键配置 \u002F 技术",[2015,2016,2017,2033,2048,2061,2076,2097,2114],"tbody",{},[2005,2018,2019,2025],{},[2020,2021,2022],"td",{},[31,2023,2024],{},"构建基础",[2020,2026,2027,2029,2030,2032],{},[26,2028,92],{}," 透传 Rollup 配置；",[26,2031,370],{}," 控制兼容性",[2005,2034,2035,2040],{},[2020,2036,2037],{},[31,2038,2039],{},"代码分割",[2020,2041,2042,2044,2045,2047],{},[26,2043,471],{}," 自定义分组；动态 ",[26,2046,467],{}," 自动分割；第三方库 vendor 分离",[2005,2049,2050,2055],{},[2020,2051,2052],{},[31,2053,2054],{},"Tree Shaking",[2020,2056,2057,2058,2060],{},"依赖 ",[26,2059,896],{},"；Rollup 默认启用",[2005,2062,2063,2068],{},[2020,2064,2065],{},[31,2066,2067],{},"资源处理",[2020,2069,2070,2072,2073,2075],{},[26,2071,1298],{}," 内联阈值；",[26,2074,1126],{}," 自定义命名",[2005,2077,2078,2083],{},[2020,2079,2080],{},[31,2081,2082],{},"CSS 优化",[2020,2084,2085,2088,2089,2092,2093,2096],{},[26,2086,2087],{},"cssCodeSplit"," 控制是否合并；",[26,2090,2091],{},"cssMinify"," 压缩；",[26,2094,2095],{},"preprocessorOptions"," 注入",[2005,2098,2099,2104],{},[2020,2100,2101],{},[31,2102,2103],{},"压缩混淆",[2020,2105,2106,2109,2110,2113],{},[26,2107,2108],{},"minify: 'esbuild'\u002F'terser'","；",[26,2111,2112],{},"terserOptions.drop_console"," 等",[2005,2115,2116,2121],{},[2020,2117,2118],{},[31,2119,2120],{},"构建分析",[2020,2122,2123,2125,2126,2129],{},[26,2124,1767],{}," 生成体积报告；",[26,2127,2128],{},"reportCompressedSize"," 控制",[23,2131,2132],{},"通过合理配置上述选项，可以显著减少生产产物体积、提升加载性能，同时维持良好的开发体验。",[1995,2134,2135],{"id":2135},"参考文献",[23,2137,2138],{},"以下链接在编写时均可正常访问：",[1999,2140,2141,2151],{},[2002,2142,2143],{},[2005,2144,2145,2148],{},[2008,2146,2147],{},"资料",[2008,2149,2150],{},"说明",[2015,2152,2153,2165,2177],{},[2005,2154,2155,2162],{},[2020,2156,2157],{},[36,2158,2161],{"href":2159,"rel":2160},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fbuild",[388],"Vite：构建生产版本",[2020,2163,2164],{},"官方",[2005,2166,2167,2174],{},[2020,2168,2169],{},[36,2170,2173],{"href":2171,"rel":2172},"https:\u002F\u002Frollupjs.org\u002Fconfiguration-options\u002F",[388],"Rollup 配置",[2020,2175,2176],{},"output \u002F manualChunks",[2005,2178,2179,2186],{},[2020,2180,2181],{},[36,2182,2185],{"href":2183,"rel":2184},"https:\u002F\u002Fcn.vite.dev\u002Fguide\u002Fstatic-deploy",[388],"部署静态站点",[2020,2187,2188],{},"部署",[2190,2191,2192],"style",{},"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 .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 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 .smGrS, html code.shiki .smGrS{--shiki-light:#39ADB5;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .su5hD, html code.shiki .su5hD{--shiki-light:#90A4AE;--shiki-default:#24292E;--shiki-dark:#E1E4E8}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 .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}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 .sQRbd, html code.shiki .sQRbd{--shiki-light:#91B859;--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .sjYin, html code.shiki .sjYin{--shiki-light:#90A4AE;--shiki-light-font-weight:inherit;--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .s-KJb, html code.shiki .s-KJb{--shiki-light:#39ADB5;--shiki-default:#032F62;--shiki-dark:#DBEDFF}html pre.shiki code .s39Yj, html code.shiki .s39Yj{--shiki-light:#39ADB5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .stzsN, html code.shiki .stzsN{--shiki-light:#91B859;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .srdBf, html code.shiki .srdBf{--shiki-light:#F76D47;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sfo-9, html code.shiki .sfo-9{--shiki-light:#90A4AE;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sfCm-, html code.shiki .sfCm-{--shiki-light:#90A4AE;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sseR_, html code.shiki .sseR_{--shiki-light:#9C3EDA;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .syTEX, html code.shiki .syTEX{--shiki-light:#FF5370;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZUrc, html code.shiki .sZUrc{--shiki-light:#E53935;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sbgvK, html code.shiki .sbgvK{--shiki-light:#E2931D;--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":132,"searchDepth":153,"depth":153,"links":2194},[2195,2197,2198,2199,2200,2201,2202,2203,2204],{"id":47,"depth":165,"text":2196},"一、构建命令 vite build 背后的 Rollup 打包",{"id":460,"depth":165,"text":461},{"id":885,"depth":165,"text":886},{"id":1036,"depth":165,"text":1037},{"id":1310,"depth":165,"text":1311},{"id":1612,"depth":165,"text":1613},{"id":1756,"depth":165,"text":1757},{"id":1997,"depth":153,"text":1997},{"id":2135,"depth":153,"text":2135},{"title":8,"description":9},"knowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fbuild","knowledge\u002Fknowledge\u002Fbooklet\u002Fproject\u002FVite\u002Fbuild.md","md",{"items":2210},[2211,2215,2219,2223,2227,2229],{"path":2212,"title":2213,"description":2214,"category":10,"score":211},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fdeploy","部署实践","Vite 项目的 CI\u002FCD、多环境、CDN、Legacy 与体积预算等工程化要点。环境变量见 env；构建见 生产构建。",{"path":2216,"title":2217,"description":2218,"category":10,"score":211},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fplugin","插件开发","Vite 插件兼容 Rollup 插件，并扩展 config、configureServer、transformIndexHtml 等钩子。原理见 工作原理。",{"path":2220,"title":2221,"description":2222,"category":10,"score":211},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fadvanced","进阶配置","Vite 进阶：server.proxy、resolve.alias、SSR、多页面、库模式、vite preview 等。环境变量见 env。",{"path":2224,"title":2225,"description":2226,"category":10,"score":211},"\u002Fknowledge\u002Fbooklet\u002Fproject\u002Fvite\u002Fcreate-vite","create-vite","pnpm create vite 实际执行的是 npm 包 create-vite（与 vite 本体不同）。工程化背景见 工程化概览、工作原理。",{"path":38,"title":39,"description":2228,"category":10,"score":211},"Vite 是面向现代浏览器的前端构建工具：开发阶段利用原生 ES 模块与按需编译；生产构建由 Rollup 完成。对比见 Webpack 与 Vite、工程化概览。",{"path":2230,"title":2231,"description":2232,"category":10,"score":175},"\u002Fknowledge\u002Fbooklet\u002Fframe\u002Freact\u002Fperformance\u002Fbuild","构建与分包","通过代码分割与构建配置减小首屏 JavaScript 体积。涵盖 React.lazy\u002FSuspense、路由级分割、Tree Shaking、Vite 生产构建、体积分析、最佳实践与常见坑。运行时优化见 runtime。",{"series":2234,"title":12,"items":2235,"index":139,"prev":2247,"next":2248},"booklet\u002Fproject\u002Fvite",[2236,2238,2239,2241,2243,2245],{"path":2220,"title":2221,"date":2237,"pinned":15},"2022-05-08",{"path":7,"title":8,"date":14,"pinned":15},{"path":2224,"title":2225,"date":2240,"pinned":15},"2021-03-05",{"path":2212,"title":2213,"date":2242,"pinned":15},"2025-10-12",{"path":2216,"title":2217,"date":2244,"pinned":15},"2023-03-27",{"path":38,"title":39,"date":2246,"pinned":15},"2020-06-15",{"path":2220,"title":2221,"date":2237,"pinned":15},{"path":2224,"title":2225,"date":2240,"pinned":15}]