[{"data":1,"prerenderedAt":1499},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode":1490},{"id":4,"title":5,"body":6,"description":1471,"extension":1472,"meta":1473,"navigation":423,"path":1485,"seo":1486,"stem":1488,"__hash__":1489},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode\u002Findex.md","Building Tree-Shakeable Libraries with Vite Library Mode",{"type":7,"value":8,"toc":1456},"minimark",[9,14,29,49,161,166,223,227,233,243,257,271,345,349,354,641,651,655,771,778,781,785,890,893,1008,1012,1015,1243,1246,1250,1263,1267,1292,1296,1347,1351,1373,1389,1401,1414,1418,1441,1446,1449,1452],[10,11,13],"h1",{"id":12},"how-to-build-tree-shakeable-libraries-with-vite-library-mode","How to Build Tree-Shakeable Libraries with Vite Library Mode",[15,16,17,18,23,24,28],"p",{},"This guide covers the producer side of bundle size, within ",[19,20,22],"a",{"href":21},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002F","Vite & Rollup Build Optimization"," in ",[19,25,27],{"href":26},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting",". Application teams can only tree-shake what library authors make shakeable. An internal design system or utility package built as a single CommonJS or bundled ESM file forces every consuming app to ship all of it — every component, every icon, every locale — even if a page uses one button.",[15,30,31,32,36,37,40,41,44,45,48],{},"Vite's library mode (",[33,34,35],"code",{},"build.lib",") builds packages with Rollup, and its defaults produce a single bundled file per format. That is convenient and often wrong for component libraries. The settings that make a library shakeable are well understood: ship ESM, preserve the module structure, externalise dependencies, declare ",[33,38,39],{},"sideEffects"," accurately, and expose per-feature entry points in ",[33,42,43],{},"package.json"," ",[33,46,47],{},"exports",".",[15,50,51],{},[52,53,44,59,44,66,44,70,44,73,44,82,44,88,44,97,44,103,44,108,44,113,44,116,44,119,44,122,44,125,44,128,44,131,44,136,44,140,44,142,44,146,44,148,44,151,44,153,44,156,44,158,44],"svg",{"viewBox":54,"width":55,"role":56,"ariaLabel":57,"style":58},"0 0 760 228","100%","img","Comparison of a library built as one bundled file with one built as ESM with preserved modules and accurate sideEffects.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)",[60,61],"rect",{"className":62,"x":64,"y":64,"width":55,"height":55,"fill":65},[63],"svg-canvas","0","#ffffff",[67,68,69],"title",{},"A design-system package, two builds",[71,72,57],"desc",{},[60,74],{"x":75,"y":75,"width":76,"height":77,"rx":78,"fill":79,"stroke":80,"style":81},"1","758","226","10","none","currentColor","stroke-opacity:0.18",[83,84,69],"text",{"x":85,"y":86,"fill":80,"style":87},"28.0","34.0","font-size:16px;font-weight:700",[60,89],{"x":85,"y":90,"width":91,"height":92,"rx":93,"fill":94,"stroke":95,"style":96},"56.0","340.0","150.0","6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[83,98,102],{"x":99,"y":100,"fill":80,"style":101},"42.0","82.0","font-size:14px;font-weight:700","Single bundled file",[83,104,107],{"x":99,"y":105,"fill":80,"style":106},"108.0","font-size:12.5px;font-weight:700","•",[83,109,112],{"x":90,"y":105,"fill":80,"style":110,"textAnchor":111},"font-size:12.5px","start","dist\u002Findex.js contains all 80 components",[83,114,107],{"x":99,"y":115,"fill":80,"style":106},"132.0",[83,117,118],{"x":90,"y":115,"fill":80,"style":110,"textAnchor":111},"CSS imported at the top of the bundle",[83,120,107],{"x":99,"y":121,"fill":80,"style":106},"156.0",[83,123,124],{"x":90,"y":121,"fill":80,"style":110,"textAnchor":111},"Consumers using 1 button ship 210KB",[83,126,107],{"x":99,"y":127,"fill":80,"style":106},"180.0",[83,129,130],{"x":90,"y":127,"fill":80,"style":110,"textAnchor":111},"Any change busts the whole file",[60,132],{"x":133,"y":90,"width":91,"height":92,"rx":93,"fill":134,"stroke":134,"style":135},"392.0","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[83,137,139],{"x":138,"y":100,"fill":80,"style":101},"406.0","ESM, preserved modules",[83,141,107],{"x":138,"y":105,"fill":80,"style":106},[83,143,145],{"x":144,"y":105,"fill":80,"style":110,"textAnchor":111},"420.0","dist\u002Fbutton\u002Findex.js, dist\u002Fmodal\u002Findex.js ...",[83,147,107],{"x":138,"y":115,"fill":80,"style":106},[83,149,150],{"x":144,"y":115,"fill":80,"style":110,"textAnchor":111},"CSS per component, sideEffects declared",[83,152,107],{"x":138,"y":121,"fill":80,"style":106},[83,154,155],{"x":144,"y":121,"fill":80,"style":110,"textAnchor":111},"Consumers using 1 button ship 6KB",[83,157,107],{"x":138,"y":127,"fill":80,"style":106},[83,159,160],{"x":144,"y":127,"fill":80,"style":110,"textAnchor":111},"Unused components never reach the app",[162,163,165],"h2",{"id":164},"rapid-diagnosis","Rapid Diagnosis",[167,168,169,177,194,217],"ul",{},[170,171,172,176],"li",{},[173,174,175],"strong",{},"Build a test app that imports one export"," from your library and check its bundle with a visualiser. If most of the library appears, it is not shakeable.",[170,178,179,185,186,189,190,193],{},[173,180,181,182,48],{},"Inspect ",[33,183,184],{},"dist\u002F"," One large ",[33,187,188],{},"index.js"," (or ",[33,191,192],{},"index.mjs",") means the library is bundled into a single module.",[170,195,196,201,202,205,206,208,209,212,213,216],{},[173,197,198,199,48],{},"Read ",[33,200,43],{}," Missing ",[33,203,204],{},"\"type\": \"module\"",", missing ESM entry in ",[33,207,47],{},", or ",[33,210,211],{},"\"sideEffects\""," absent or ",[33,214,215],{},"true"," all block tree shaking.",[170,218,219,222],{},[173,220,221],{},"Check for top-level side effects"," in source: global CSS imports, polyfill installs, registry registrations at module scope.",[162,224,226],{"id":225},"root-cause-analysis","Root Cause Analysis",[15,228,229,232],{},[173,230,231],{},"1. Single-module output."," Bundlers tree-shake at the export level, but a single module with internal cross-references and top-level code is hard to prove unused. Preserved modules give the consumer's bundler file-level granularity.",[15,234,235,238,239,242],{},[173,236,237],{},"2. Unknown side effects."," Without ",[33,240,241],{},"\"sideEffects\": false"," (or a precise list), bundlers must assume importing any file might have effects and keep it.",[15,244,245,248,249,252,253,256],{},[173,246,247],{},"3. Bundled dependencies."," Including dependencies like ",[33,250,251],{},"lodash"," or ",[33,254,255],{},"date-fns"," inside the library output duplicates them in consumers and prevents deduplication.",[15,258,259,262,263,266,267,270],{},[173,260,261],{},"4. CommonJS output."," CommonJS ",[33,264,265],{},"require"," and ",[33,268,269],{},"module.exports"," are dynamic; bundlers cannot reliably shake them.",[15,272,273],{},[52,274,44,277,44,280,44,283,44,285,44,288,44,290,44,297,44,304,44,309,44,313,44,317,44,321,44,324,44,329,44,333,44,337,44,341,44],{"viewBox":275,"width":55,"role":56,"ariaLabel":276,"style":58},"0 0 760 194","Bar chart of the bytes a consuming application ships when importing a single component from four library build configurations.",[60,278],{"className":279,"x":64,"y":64,"width":55,"height":55,"fill":65},[63],[67,281,282],{},"Consumer bundle cost of importing one Button",[71,284,276],{},[60,286],{"x":75,"y":75,"width":76,"height":287,"rx":78,"fill":79,"stroke":80,"style":81},"192",[83,289,282],{"x":85,"y":86,"fill":80,"style":87},[83,291,296],{"x":292,"y":293,"fill":80,"style":294,"textAnchor":295},"239.0","70.0","font-size:13px","end","CJS single file",[60,298],{"x":299,"y":90,"width":300,"height":301,"rx":302,"fill":94,"stroke":95,"style":303},"251.0","417.0","19","3","fill-opacity:0.7;stroke-opacity:0.9",[83,305,308],{"x":306,"y":293,"fill":80,"style":307},"674.0","font-size:12px;font-weight:600","214KB",[83,310,312],{"x":292,"y":311,"fill":80,"style":294,"textAnchor":295},"101.0","ESM single file, sideEffects unset",[60,314],{"x":299,"y":315,"width":316,"height":301,"rx":302,"fill":94,"stroke":95,"style":303},"87.0","385.9",[83,318,320],{"x":319,"y":311,"fill":80,"style":307},"642.8","198KB",[83,322,323],{"x":292,"y":115,"fill":80,"style":294,"textAnchor":295},"ESM single file + sideEffects false",[60,325],{"x":299,"y":326,"width":327,"height":301,"rx":302,"fill":134,"stroke":134,"style":328},"118.0","124.7","fill-opacity:0.55;stroke-opacity:0.9",[83,330,332],{"x":331,"y":115,"fill":80,"style":307},"381.7","64KB",[83,334,336],{"x":292,"y":335,"fill":80,"style":294,"textAnchor":295},"163.0","ESM preserveModules + sideEffects",[60,338],{"x":299,"y":339,"width":340,"height":301,"rx":302,"fill":134,"stroke":134,"style":328},"149.0","11.7",[83,342,344],{"x":343,"y":335,"fill":80,"style":307},"268.7","6KB",[162,346,348],{"id":347},"step-by-step-resolution","Step-by-Step Resolution",[350,351,353],"h3",{"id":352},"_1-build-esm-with-preserved-modules-and-externals","1. Build ESM with preserved modules and externals",[355,356,361],"pre",{"className":357,"code":358,"language":359,"meta":360,"style":360},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F vite.config.js (library)\nimport { defineConfig } from 'vite';\nimport pkg from '.\u002Fpackage.json' with { type: 'json' };\n\nexport default defineConfig({\n  build: {\n    lib: { entry: 'src\u002Findex.ts', formats: ['es'] },\n    rollupOptions: {\n      external: [...Object.keys(pkg.peerDependencies ?? {}), ...Object.keys(pkg.dependencies ?? {})]\n        .map((d) => new RegExp(`^${d}(\u002F.*)?$`)),\n      output: { preserveModules: true, preserveModulesRoot: 'src', entryFileNames: '[name].js' },\n    },\n    cssCodeSplit: true,\n    minify: false,                       \u002F\u002F let the consuming app minify once\n  },\n});\n\u002F\u002F trade-off: preserveModules produces many files; consumers' bundlers handle\n\u002F\u002F that well, but direct \u003Cscript type=\"module\"> use from a CDN would mean many\n\u002F\u002F requests. Ship a separate bundled build if you support that use case.\n","javascript","",[33,362,363,372,393,418,425,442,448,466,472,510,551,575,581,592,607,615,623,629,635],{"__ignoreMap":360},[364,365,368],"span",{"class":366,"line":367},"line",1,[364,369,371],{"class":370},"sjfSM","\u002F\u002F vite.config.js (library)\n",[364,373,375,379,383,386,390],{"class":366,"line":374},2,[364,376,378],{"class":377},"sPARh","import",[364,380,382],{"class":381},"saISM"," { defineConfig } ",[364,384,385],{"class":377},"from",[364,387,389],{"class":388},"sZ8jY"," 'vite'",[364,391,392],{"class":381},";\n",[364,394,396,398,401,403,406,409,412,415],{"class":366,"line":395},3,[364,397,378],{"class":377},[364,399,400],{"class":381}," pkg ",[364,402,385],{"class":377},[364,404,405],{"class":388}," '.\u002Fpackage.json'",[364,407,408],{"class":377}," with",[364,410,411],{"class":381}," { type: ",[364,413,414],{"class":388},"'json'",[364,416,417],{"class":381}," };\n",[364,419,421],{"class":366,"line":420},4,[364,422,424],{"emptyLinePlaceholder":423},true,"\n",[364,426,428,431,434,438],{"class":366,"line":427},5,[364,429,430],{"class":377},"export",[364,432,433],{"class":377}," default",[364,435,437],{"class":436},"smZ65"," defineConfig",[364,439,441],{"class":440},"sQw3B","({\n",[364,443,445],{"class":366,"line":444},6,[364,446,447],{"class":381},"  build: {\n",[364,449,451,454,457,460,463],{"class":366,"line":450},7,[364,452,453],{"class":381},"    lib: { entry: ",[364,455,456],{"class":388},"'src\u002Findex.ts'",[364,458,459],{"class":381},", formats: [",[364,461,462],{"class":388},"'es'",[364,464,465],{"class":381},"] },\n",[364,467,469],{"class":366,"line":468},8,[364,470,471],{"class":381},"    rollupOptions: {\n",[364,473,475,478,481,484,487,490,493,496,498,500,502,505,507],{"class":366,"line":474},9,[364,476,477],{"class":381},"      external: [",[364,479,480],{"class":377},"...",[364,482,483],{"class":381},"Object.",[364,485,486],{"class":436},"keys",[364,488,489],{"class":381},"(pkg.peerDependencies ",[364,491,492],{"class":377},"??",[364,494,495],{"class":381}," {}), ",[364,497,480],{"class":377},[364,499,483],{"class":381},[364,501,486],{"class":436},[364,503,504],{"class":381},"(pkg.dependencies ",[364,506,492],{"class":377},[364,508,509],{"class":381}," {})]\n",[364,511,513,516,519,522,525,528,531,534,537,540,543,545,548],{"class":366,"line":512},10,[364,514,515],{"class":381},"        .",[364,517,518],{"class":436},"map",[364,520,521],{"class":381},"((",[364,523,524],{"class":440},"d",[364,526,527],{"class":381},") ",[364,529,530],{"class":377},"=>",[364,532,533],{"class":377}," new",[364,535,536],{"class":436}," RegExp",[364,538,539],{"class":381},"(",[364,541,542],{"class":388},"`^${",[364,544,524],{"class":381},[364,546,547],{"class":388},"}(\u002F.*)?$`",[364,549,550],{"class":381},")),\n",[364,552,554,557,560,563,566,569,572],{"class":366,"line":553},11,[364,555,556],{"class":381},"      output: { preserveModules: ",[364,558,215],{"class":559},"sPXB4",[364,561,562],{"class":381},", preserveModulesRoot: ",[364,564,565],{"class":388},"'src'",[364,567,568],{"class":381},", entryFileNames: ",[364,570,571],{"class":388},"'[name].js'",[364,573,574],{"class":381}," },\n",[364,576,578],{"class":366,"line":577},12,[364,579,580],{"class":381},"    },\n",[364,582,584,587,589],{"class":366,"line":583},13,[364,585,586],{"class":381},"    cssCodeSplit: ",[364,588,215],{"class":559},[364,590,591],{"class":381},",\n",[364,593,595,598,601,604],{"class":366,"line":594},14,[364,596,597],{"class":381},"    minify: ",[364,599,600],{"class":559},"false",[364,602,603],{"class":381},",                       ",[364,605,606],{"class":370},"\u002F\u002F let the consuming app minify once\n",[364,608,610,613],{"class":366,"line":609},15,[364,611,612],{"class":381},"  }",[364,614,591],{"class":440},[364,616,618,621],{"class":366,"line":617},16,[364,619,620],{"class":440},"})",[364,622,392],{"class":381},[364,624,626],{"class":366,"line":625},17,[364,627,628],{"class":370},"\u002F\u002F trade-off: preserveModules produces many files; consumers' bundlers handle\n",[364,630,632],{"class":366,"line":631},18,[364,633,634],{"class":370},"\u002F\u002F that well, but direct \u003Cscript type=\"module\"> use from a CDN would mean many\n",[364,636,638],{"class":366,"line":637},19,[364,639,640],{"class":370},"\u002F\u002F requests. Ship a separate bundled build if you support that use case.\n",[15,642,643,644,646,647,650],{},"Expected outcome: ",[33,645,184],{}," mirrors ",[33,648,649],{},"src\u002F",", with dependencies left as bare imports for the consumer to resolve once.",[350,652,654],{"id":653},"_2-declare-side-effects-precisely","2. Declare side effects precisely",[355,656,660],{"className":657,"code":658,"language":659,"meta":360,"style":360},"language-json shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","{\n  \"name\": \"@acme\u002Fui\",\n  \"type\": \"module\",\n  \"sideEffects\": [\"**\u002F*.css\"],\n  \"exports\": {\n    \".\": \".\u002Fdist\u002Findex.js\",\n    \".\u002Fbutton\": \".\u002Fdist\u002Fbutton\u002Findex.js\",\n    \".\u002Fmodal\": \".\u002Fdist\u002Fmodal\u002Findex.js\",\n    \".\u002Fstyles.css\": \".\u002Fdist\u002Fstyle.css\"\n  }\n}\n","json",[33,661,662,667,681,693,707,715,727,739,751,761,766],{"__ignoreMap":360},[364,663,664],{"class":366,"line":367},[364,665,666],{"class":381},"{\n",[364,668,669,673,676,679],{"class":366,"line":374},[364,670,672],{"class":671},"sZBmE","  \"name\"",[364,674,675],{"class":381},": ",[364,677,678],{"class":388},"\"@acme\u002Fui\"",[364,680,591],{"class":381},[364,682,683,686,688,691],{"class":366,"line":395},[364,684,685],{"class":671},"  \"type\"",[364,687,675],{"class":381},[364,689,690],{"class":388},"\"module\"",[364,692,591],{"class":381},[364,694,695,698,701,704],{"class":366,"line":420},[364,696,697],{"class":671},"  \"sideEffects\"",[364,699,700],{"class":381},": [",[364,702,703],{"class":388},"\"**\u002F*.css\"",[364,705,706],{"class":381},"],\n",[364,708,709,712],{"class":366,"line":427},[364,710,711],{"class":671},"  \"exports\"",[364,713,714],{"class":381},": {\n",[364,716,717,720,722,725],{"class":366,"line":444},[364,718,719],{"class":671},"    \".\"",[364,721,675],{"class":381},[364,723,724],{"class":388},"\".\u002Fdist\u002Findex.js\"",[364,726,591],{"class":381},[364,728,729,732,734,737],{"class":366,"line":450},[364,730,731],{"class":671},"    \".\u002Fbutton\"",[364,733,675],{"class":381},[364,735,736],{"class":388},"\".\u002Fdist\u002Fbutton\u002Findex.js\"",[364,738,591],{"class":381},[364,740,741,744,746,749],{"class":366,"line":468},[364,742,743],{"class":671},"    \".\u002Fmodal\"",[364,745,675],{"class":381},[364,747,748],{"class":388},"\".\u002Fdist\u002Fmodal\u002Findex.js\"",[364,750,591],{"class":381},[364,752,753,756,758],{"class":366,"line":474},[364,754,755],{"class":671},"    \".\u002Fstyles.css\"",[364,757,675],{"class":381},[364,759,760],{"class":388},"\".\u002Fdist\u002Fstyle.css\"\n",[364,762,763],{"class":366,"line":512},[364,764,765],{"class":381},"  }\n",[364,767,768],{"class":366,"line":553},[364,769,770],{"class":381},"}\n",[15,772,773,774,48],{},"Listing CSS files as side effects keeps component styles from being dropped when the CSS import is the only reference; everything else is declared pure. The consequences of getting this wrong are covered in ",[19,775,777],{"href":776},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fsideeffects-false-broke-my-css-imports\u002F","sideEffects: false broke my CSS imports",[15,779,780],{},"Expected outcome: bundlers drop unused component modules entirely.",[350,782,784],{"id":783},"_3-remove-top-level-side-effects-from-source","3. Remove top-level side effects from source",[355,786,788],{"className":357,"code":787,"language":359,"meta":360,"style":360},"\u002F\u002F Before: registering at import time makes every import \"do something\".\nimport { registry } from '.\u002Fregistry';\nregistry.add('button', Button);\nexport { Button };\n\n\u002F\u002F After: export plainly; let the app opt in to registration.\nexport { Button };\nexport function registerAll(r) { r.add('button', Button); \u002F* ... *\u002F }\n\u002F\u002F trade-off: consumers who relied on automatic registration must call\n\u002F\u002F registerAll(). Document the change and ship it in a major version.\n",[33,789,790,795,809,825,832,836,841,847,880,885],{"__ignoreMap":360},[364,791,792],{"class":366,"line":367},[364,793,794],{"class":370},"\u002F\u002F Before: registering at import time makes every import \"do something\".\n",[364,796,797,799,802,804,807],{"class":366,"line":374},[364,798,378],{"class":377},[364,800,801],{"class":381}," { registry } ",[364,803,385],{"class":377},[364,805,806],{"class":388}," '.\u002Fregistry'",[364,808,392],{"class":381},[364,810,811,814,817,819,822],{"class":366,"line":395},[364,812,813],{"class":381},"registry.",[364,815,816],{"class":436},"add",[364,818,539],{"class":381},[364,820,821],{"class":388},"'button'",[364,823,824],{"class":381},", Button);\n",[364,826,827,829],{"class":366,"line":420},[364,828,430],{"class":377},[364,830,831],{"class":381}," { Button };\n",[364,833,834],{"class":366,"line":427},[364,835,424],{"emptyLinePlaceholder":423},[364,837,838],{"class":366,"line":444},[364,839,840],{"class":370},"\u002F\u002F After: export plainly; let the app opt in to registration.\n",[364,842,843,845],{"class":366,"line":450},[364,844,430],{"class":377},[364,846,831],{"class":381},[364,848,849,851,854,857,859,862,865,867,869,871,874,877],{"class":366,"line":468},[364,850,430],{"class":377},[364,852,853],{"class":377}," function",[364,855,856],{"class":436}," registerAll",[364,858,539],{"class":381},[364,860,861],{"class":440},"r",[364,863,864],{"class":381},") { r.",[364,866,816],{"class":436},[364,868,539],{"class":381},[364,870,821],{"class":388},[364,872,873],{"class":381},", Button); ",[364,875,876],{"class":370},"\u002F* ... *\u002F",[364,878,879],{"class":381}," }\n",[364,881,882],{"class":366,"line":474},[364,883,884],{"class":370},"\u002F\u002F trade-off: consumers who relied on automatic registration must call\n",[364,886,887],{"class":366,"line":512},[364,888,889],{"class":370},"\u002F\u002F registerAll(). Document the change and ship it in a major version.\n",[15,891,892],{},"Expected outcome: importing one component executes nothing beyond defining it.",[15,894,895,923,925,926,44,931],{},[52,896,44,899,44,902,44,905,44,907,44,910,44,912,44,917],{"viewBox":897,"width":55,"role":56,"ariaLabel":898,"style":58},"0 0 760 318","Four checks that make a Vite library mode build tree-shakeable for consuming applications.",[60,900],{"className":901,"x":64,"y":64,"width":55,"height":55,"fill":65},[63],[67,903,904],{},"Library build checklist",[71,906,898],{},[60,908],{"x":75,"y":75,"width":76,"height":909,"rx":78,"fill":79,"stroke":80,"style":81},"316",[83,911,904],{"x":85,"y":86,"fill":80,"style":87},[60,913],{"x":914,"y":90,"width":915,"height":916,"rx":93,"fill":134,"stroke":134,"style":135},"72.0","660.0","51.0",[83,918,922],{"x":919,"y":920,"fill":80,"style":921,"textAnchor":111},"86.0","77.0","font-size:13px;font-weight:700","formats: ",[364,924,462],{}," with preserveModules ",[83,927,930],{"x":919,"y":928,"fill":80,"style":929,"text-anchor":111},"94.0","font-size:12px","File-level granularity for the consumer's bundler",[60,932,44,936,44,940,44,944],{"x":914,"y":933,"width":934,"height":935,"rx":93,"fill":134,"stroke":134,"style":135},"119.0",660,51,[83,937,939],{"x":919,"y":938,"fill":80,"style":921,"text-anchor":111},"140.0","All dependencies external",[83,941,943],{"x":919,"y":942,"fill":80,"style":929,"text-anchor":111},"157.0","Resolved and deduplicated once in the app",[60,945,44,947,44,951,44,955],{"x":914,"y":946,"width":934,"height":935,"rx":93,"fill":134,"stroke":134,"style":135},"182.0",[83,948,950],{"x":919,"y":949,"fill":80,"style":921,"text-anchor":111},"203.0","sideEffects lists only CSS",[83,952,954],{"x":919,"y":953,"fill":80,"style":929,"text-anchor":111},"220.0","Every JS module declared pure",[60,956,44,958,44,962,44,966],{"x":914,"y":957,"width":934,"height":935,"rx":93,"fill":134,"stroke":134,"style":135},"245.0",[83,959,961],{"x":919,"y":960,"fill":80,"style":921,"text-anchor":111},"266.0","Per-feature exports in package.json",[83,963,965],{"x":919,"y":964,"fill":80,"style":929,"text-anchor":111},"283.0","Deep entry points that are part of the public API",[366,967,44,973],{"x1":968,"y1":969,"x2":968,"y2":970,"stroke":80,"stroke-width":971,"style":972},"43.0","95.5","130.5","1.5","stroke-opacity:0.3",[366,974,44,977],{"x1":968,"y1":975,"x2":968,"y2":976,"stroke":80,"stroke-width":971,"style":972},"158.5","193.5",[366,978,44,981],{"x1":968,"y1":979,"x2":968,"y2":980,"stroke":80,"stroke-width":971,"style":972},"221.5","256.5",[982,983,44,986,44,989],"circle",{"cx":968,"cy":984,"r":985,"fill":134},"81.5","13",[83,987,75],{"x":968,"y":919,"fill":65,"style":921,"text-anchor":988},"middle",[982,990,44,992,44,995],{"cx":968,"cy":991,"r":985,"fill":134},"144.5",[83,993,994],{"x":968,"y":339,"fill":65,"style":921,"text-anchor":988},"2",[982,996,44,998,44,1001],{"cx":968,"cy":997,"r":985,"fill":134},"207.5",[83,999,302],{"x":968,"y":1000,"fill":65,"style":921,"text-anchor":988},"212.0",[982,1002,44,1004,44],{"cx":968,"cy":1003,"r":985,"fill":134},"270.5",[83,1005,1007],{"x":968,"y":1006,"fill":65,"style":921,"text-anchor":988},"275.0","4",[350,1009,1011],{"id":1010},"_4-verify-with-a-consumer-fixture-in-ci","4. Verify with a consumer fixture in CI",[15,1013,1014],{},"Add a tiny fixture app that imports one export, build it, and assert its output stays small.",[355,1016,1018],{"className":357,"code":1017,"language":359,"meta":360,"style":360},"\u002F\u002F fixtures\u002Fone-button\u002Fcheck.mjs\nimport { build } from 'vite';\nimport { statSync, readdirSync } from 'node:fs';\nawait build({ root: new URL('.', import.meta.url).pathname, logLevel: 'error' });\nconst js = readdirSync('fixtures\u002Fone-button\u002Fdist\u002Fassets').filter((f) => f.endsWith('.js'));\nconst bytes = js.reduce((n, f) => n + statSync(`fixtures\u002Fone-button\u002Fdist\u002Fassets\u002F${f}`).size, 0);\nif (bytes > 40_000) throw new Error(`one-button fixture is ${bytes} bytes — tree shaking regressed`);\n\u002F\u002F trade-off: the fixture includes framework runtime bytes too; set the budget\n\u002F\u002F relative to an empty fixture's size so it measures only your library.\n",[33,1019,1020,1025,1038,1052,1093,1141,1196,1233,1238],{"__ignoreMap":360},[364,1021,1022],{"class":366,"line":367},[364,1023,1024],{"class":370},"\u002F\u002F fixtures\u002Fone-button\u002Fcheck.mjs\n",[364,1026,1027,1029,1032,1034,1036],{"class":366,"line":374},[364,1028,378],{"class":377},[364,1030,1031],{"class":381}," { build } ",[364,1033,385],{"class":377},[364,1035,389],{"class":388},[364,1037,392],{"class":381},[364,1039,1040,1042,1045,1047,1050],{"class":366,"line":395},[364,1041,378],{"class":377},[364,1043,1044],{"class":381}," { statSync, readdirSync } ",[364,1046,385],{"class":377},[364,1048,1049],{"class":388}," 'node:fs'",[364,1051,392],{"class":381},[364,1053,1054,1057,1060,1063,1066,1069,1071,1074,1077,1079,1081,1084,1087,1090],{"class":366,"line":420},[364,1055,1056],{"class":377},"await",[364,1058,1059],{"class":436}," build",[364,1061,1062],{"class":381},"({ root: ",[364,1064,1065],{"class":377},"new",[364,1067,1068],{"class":436}," URL",[364,1070,539],{"class":381},[364,1072,1073],{"class":388},"'.'",[364,1075,1076],{"class":381},", ",[364,1078,378],{"class":377},[364,1080,48],{"class":381},[364,1082,1083],{"class":559},"meta",[364,1085,1086],{"class":381},".url).pathname, logLevel: ",[364,1088,1089],{"class":388},"'error'",[364,1091,1092],{"class":381}," });\n",[364,1094,1095,1098,1101,1104,1107,1109,1112,1115,1118,1120,1123,1125,1127,1130,1133,1135,1138],{"class":366,"line":427},[364,1096,1097],{"class":377},"const",[364,1099,1100],{"class":559}," js",[364,1102,1103],{"class":377}," =",[364,1105,1106],{"class":436}," readdirSync",[364,1108,539],{"class":381},[364,1110,1111],{"class":388},"'fixtures\u002Fone-button\u002Fdist\u002Fassets'",[364,1113,1114],{"class":381},").",[364,1116,1117],{"class":436},"filter",[364,1119,521],{"class":381},[364,1121,1122],{"class":440},"f",[364,1124,527],{"class":381},[364,1126,530],{"class":377},[364,1128,1129],{"class":381}," f.",[364,1131,1132],{"class":436},"endsWith",[364,1134,539],{"class":381},[364,1136,1137],{"class":388},"'.js'",[364,1139,1140],{"class":381},"));\n",[364,1142,1143,1145,1148,1150,1153,1156,1158,1161,1163,1165,1167,1169,1172,1175,1178,1180,1183,1185,1188,1191,1193],{"class":366,"line":444},[364,1144,1097],{"class":377},[364,1146,1147],{"class":559}," bytes",[364,1149,1103],{"class":377},[364,1151,1152],{"class":381}," js.",[364,1154,1155],{"class":436},"reduce",[364,1157,521],{"class":381},[364,1159,1160],{"class":440},"n",[364,1162,1076],{"class":381},[364,1164,1122],{"class":440},[364,1166,527],{"class":381},[364,1168,530],{"class":377},[364,1170,1171],{"class":381}," n ",[364,1173,1174],{"class":377},"+",[364,1176,1177],{"class":436}," statSync",[364,1179,539],{"class":381},[364,1181,1182],{"class":388},"`fixtures\u002Fone-button\u002Fdist\u002Fassets\u002F${",[364,1184,1122],{"class":381},[364,1186,1187],{"class":388},"}`",[364,1189,1190],{"class":381},").size, ",[364,1192,64],{"class":559},[364,1194,1195],{"class":381},");\n",[364,1197,1198,1201,1204,1207,1210,1212,1215,1217,1220,1222,1225,1228,1231],{"class":366,"line":450},[364,1199,1200],{"class":377},"if",[364,1202,1203],{"class":381}," (bytes ",[364,1205,1206],{"class":377},">",[364,1208,1209],{"class":559}," 40_000",[364,1211,527],{"class":381},[364,1213,1214],{"class":377},"throw",[364,1216,533],{"class":377},[364,1218,1219],{"class":436}," Error",[364,1221,539],{"class":381},[364,1223,1224],{"class":388},"`one-button fixture is ${",[364,1226,1227],{"class":381},"bytes",[364,1229,1230],{"class":388},"} bytes — tree shaking regressed`",[364,1232,1195],{"class":381},[364,1234,1235],{"class":366,"line":468},[364,1236,1237],{"class":370},"\u002F\u002F trade-off: the fixture includes framework runtime bytes too; set the budget\n",[364,1239,1240],{"class":366,"line":474},[364,1241,1242],{"class":370},"\u002F\u002F relative to an empty fixture's size so it measures only your library.\n",[15,1244,1245],{},"Expected outcome: a pull request that adds a top-level side effect or bundles a dependency fails CI.",[162,1247,1249],{"id":1248},"verification","Verification",[15,1251,1252,1253,1256,1257,1259,1260,1262],{},"Build the fixture before and after the change and compare its output. Then check a real consuming application's treemap: only the components it renders should appear from your package. Publish with ",[33,1254,1255],{},"npm pack --dry-run"," first to confirm the published files match ",[33,1258,184],{}," and the ",[33,1261,47],{}," map points at real files.",[162,1264,1266],{"id":1265},"types-source-maps-and-dx-without-cost","Types, Source Maps and DX Without Cost",[15,1268,1269,1270,1273,1274,252,1277,1280,1281,1284,1285,1287,1288,1291],{},"Shakeability should not come at the expense of developer experience. Generate ",[33,1271,1272],{},".d.ts"," files alongside the preserved modules (with ",[33,1275,1276],{},"vite-plugin-dts",[33,1278,1279],{},"tsc --emitDeclarationOnly",") and add a ",[33,1282,1283],{},"types"," condition to each ",[33,1286,47],{}," entry, so editors resolve deep imports correctly. Ship source maps with the package for debugging; they are not bundled into consumer output. Keep ",[33,1289,1290],{},"minify: false"," in library builds — consumers minify once, and unminified library code produces clearer stack traces and better minification in context because the consumer's minifier sees the whole program.",[162,1293,1295],{"id":1294},"common-mistakes-when-publishing","Common Mistakes When Publishing",[167,1297,1298,1310,1322,1332,1338],{},[170,1299,1300,1309],{},[173,1301,1302,1303,252,1306,1308],{},"Pointing ",[33,1304,1305],{},"module",[33,1307,47],{}," at the source directory."," Consumers then compile your TypeScript or JSX with their settings, or fail outright. Always point at built output.",[170,1311,1312,1318,1319,1321],{},[173,1313,1314,1315,1317],{},"Shipping ",[33,1316,47],{}," without listing subpaths."," Once ",[33,1320,47],{}," exists, any path not listed is inaccessible; consumers who imported deep paths before will break. Enumerate the public entry points deliberately.",[170,1323,1324,1331],{},[173,1325,1326,1327,1330],{},"Leaving ",[33,1328,1329],{},"process.env.NODE_ENV"," checks unreplaced"," in library output when targeting environments that do not define it. Keep them for the consumer's bundler to replace, but document it.",[170,1333,1334,1337],{},[173,1335,1336],{},"Minifying the library."," It hampers the consumer's minifier, makes stack traces unreadable and saves nothing once the app is minified.",[170,1339,1340,1346],{},[173,1341,1342,1343,1345],{},"Forgetting a changelog entry for ",[33,1344,39],{}," changes."," Marking modules pure can drop code a consumer relied on for an implicit effect; it deserves a clear release note.",[162,1348,1350],{"id":1349},"faq","FAQ",[1352,1353,1356,1360],"details",{"className":1354},[1355],"faq-item",[1357,1358,1359],"summary",{},"Should a library also ship CommonJS?",[15,1361,1362,1363,1365,1366,1368,1369,1114],{},"Only if you have consumers that cannot use ESM — older Node tooling or Jest setups without ESM support. If you do, add it as a separate ",[33,1364,265],{}," condition in ",[33,1367,47],{},", and make sure both formats do not end up in one consumer's bundle (the dual package hazard, covered in ",[19,1370,1372],{"href":1371},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Ffixing-dual-package-hazard-in-a-library\u002F","fixing dual package hazard in a library",[1352,1374,1376,1379],{"className":1375},[1355],[1357,1377,1378],{},"Does a barrel index.js defeat preserveModules?",[15,1380,1381,1382,1384,1385,48],{},"Not if the barrel only re-exports and every module is side-effect free; modern bundlers follow re-exports and drop the rest. Barrels become a problem when they contain logic or when ",[33,1383,39],{}," is not declared — see ",[19,1386,1388],{"href":1387},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fwhy-barrel-files-break-tree-shaking\u002F","why barrel files break tree shaking",[1352,1390,1392,1395],{"className":1391},[1355],[1357,1393,1394],{},"How should component CSS be shipped?",[15,1396,1397,1398,1400],{},"Per component, imported from the component module and listed in ",[33,1399,39],{},", so it is included exactly when the component is. A single global stylesheet is simpler but means every consumer ships every component's styles.",[1352,1402,1404,1407],{"className":1403},[1355],[1357,1405,1406],{},"Can consumers tree-shake a library that uses class-based components?",[15,1408,1409,1410,1413],{},"Yes, as long as each class lives in its own module and nothing at module scope references other components. Classes with static initialisers or decorators that register themselves globally count as side effects and block removal; move registration into an explicit function the application calls. Annotating factory calls with ",[33,1411,1412],{},"\u002F*#__PURE__*\u002F"," helps minifiers drop unused instances that the bundler kept.",[162,1415,1417],{"id":1416},"related","Related",[167,1419,1420,1427,1434],{},[170,1421,1422,1426],{},[19,1423,1425],{"href":1424},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fwriting-tree-shakeable-library-exports\u002F","Writing tree-shakeable library exports"," — source-level patterns that shake well.",[170,1428,1429,1433],{},[19,1430,1432],{"href":1431},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Fshipping-esm-only-packages\u002F","Shipping ESM-only packages"," — dropping CommonJS output entirely.",[170,1435,1436,1440],{},[19,1437,1439],{"href":1438},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Fusing-pure-annotations-for-side-effect-free-calls\u002F","Using PURE annotations for side-effect-free calls"," — marking factory calls as removable.",[1442,1443,1445],"script",{"type":1444},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Build Tree-Shakeable Libraries with Vite Library Mode\",\n  \"description\": \"The build settings that decide whether a component or utility library built with Vite can be tree-shaken by the applications that consume it.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Build ESM with preserved modules and externals\",\n      \"text\": \"export default defineConfig({ build: { lib: { entry: 'src\u002Findex.ts', formats: ['es'] }, rollupOptions: { external: [...Object.keys(pkg.peerDependencies ??\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Declare side effects precisely\",\n      \"text\": \"Listing CSS files as side effects keeps component styles from being dropped when the CSS import is the only reference; everything else is declared pure.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Remove top-level side effects from source\",\n      \"text\": \"\u002F\u002F After: export plainly; let the app opt in to registration.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Verify with a consumer fixture in CI\",\n      \"text\": \"Add a tiny fixture app that imports one export, build it, and assert its output stays small.\"\n    }\n  ]\n}\n",[1442,1447,1448],{"type":1444},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Build Tree-Shakeable Libraries with Vite Library Mode\",\n  \"description\": \"The build settings that decide whether a component or utility library built with Vite can be tree-shaken by the applications that consume it.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode\u002F\"\n  }\n}\n",[1442,1450,1451],{"type":1444},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"JavaScript Bundle Optimization & Code Splitting\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Vite & Rollup Build Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Building Tree-Shakeable Libraries with Vite Library Mode\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode\u002F\"\n    }\n  ]\n}\n",[1453,1454,1455],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}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 .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 pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}",{"title":360,"searchDepth":374,"depth":374,"links":1457},[1458,1459,1460,1466,1467,1468,1469,1470],{"id":164,"depth":374,"text":165},{"id":225,"depth":374,"text":226},{"id":347,"depth":374,"text":348,"children":1461},[1462,1463,1464,1465],{"id":352,"depth":395,"text":353},{"id":653,"depth":395,"text":654},{"id":783,"depth":395,"text":784},{"id":1010,"depth":395,"text":1011},{"id":1248,"depth":374,"text":1249},{"id":1265,"depth":374,"text":1266},{"id":1294,"depth":374,"text":1295},{"id":1349,"depth":374,"text":1350},{"id":1416,"depth":374,"text":1417},"The build settings that decide whether a component or utility library built with Vite can be tree-shaken by the applications that consume it.","md",{"slug":1474,"type":1475,"breadcrumb":1476,"datePublished":1484,"dateModified":1484},"building-tree-shakeable-libraries-with-vite-library-mode","article",[1477,1480,1481,1482],{"name":1478,"url":1479},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1483},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode\u002F","2026-10-06","\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode",{"title":5,"description":1487},"Configure Vite library mode to ship ESM with preserved modules, externalised dependencies, correct exports and sideEffects so consumers bundle only what they use.","javascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fbuilding-tree-shakeable-libraries-with-vite-library-mode\u002Findex","2n-eDt3ohtO2Pi2wFd_XGF-SlmBxxad-87mQXpN0iC4",[1491,1495],{"title":1492,"path":1493,"stem":1494},"Analyzing Vite Bundles with rollup-plugin-visualizer","\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fanalyzing-vite-bundles-with-rollup-plugin-visualizer","javascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fanalyzing-vite-bundles-with-rollup-plugin-visualizer\u002Findex",{"title":1496,"path":1497,"stem":1498},"Configuring manualChunks in Vite","\u002Fjavascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fconfiguring-manualchunks-in-vite","javascript-bundle-optimization-code-splitting\u002Fvite-and-rollup-build-optimization\u002Fconfiguring-manualchunks-in-vite\u002Findex",1791308079771]