[{"data":1,"prerenderedAt":1084},["ShallowReactive",2],{"guide-javascript-bundle-size-optimization":3},{"id":4,"title":5,"body":6,"date":1076,"description":1077,"extension":1078,"meta":1079,"navigation":150,"path":1080,"readingTime":416,"seo":1081,"stem":1082,"__hash__":1083},"guides\u002Fguides\u002Fjavascript-bundle-size-optimization.md","JavaScript Bundle Size Optimization: From Analysis to Action",{"type":7,"value":8,"toc":1065},"minimark",[9,13,18,21,88,91,95,98,104,189,194,215,273,279,301,304,308,319,324,345,456,459,520,526,530,537,624,627,748,751,755,758,819,822,917,920,924,927,957,960,963,994,997,1001,1024,1028,1049,1053,1061],[10,11,12],"p",{},"JavaScript bundle size directly impacts page load performance. Every kilobyte of JavaScript must be downloaded, parsed, compiled, and executed — and the cost compounds on mobile devices with slower CPUs and networks. This guide covers practical strategies to shrink your bundles, from quick wins to architectural changes.",[14,15,17],"h2",{"id":16},"why-bundle-size-matters","Why Bundle Size Matters",[10,19,20],{},"JavaScript is the most expensive resource on the web. Unlike images, which decode progressively, JavaScript blocks the main thread during parsing and compilation.",[22,23,24,40],"table",{},[25,26,27],"thead",{},[28,29,30,34,37],"tr",{},[31,32,33],"th",{},"Resource Type",[31,35,36],{},"Processing Cost",[31,38,39],{},"Typical Size",[41,42,43,55,66,77],"tbody",{},[28,44,45,49,52],{},[46,47,48],"td",{},"HTML",[46,50,51],{},"Parse + render",[46,53,54],{},"10–50 KB",[28,56,57,60,63],{},[46,58,59],{},"CSS",[46,61,62],{},"Parse + style calculation",[46,64,65],{},"20–100 KB",[28,67,68,71,74],{},[46,69,70],{},"JavaScript",[46,72,73],{},"Parse + compile + execute",[46,75,76],{},"100–500 KB+",[28,78,79,82,85],{},[46,80,81],{},"Images",[46,83,84],{},"Decode + paint",[46,86,87],{},"50–500 KB+",[10,89,90],{},"A 200 KB JavaScript bundle takes roughly 5–10 seconds to become interactive on a mid-range mobile device. The same 200 KB as a JPEG appears in under a second. Reducing bundle size is not optional — it is a performance requirement.",[14,92,94],{"id":93},"analyze-your-bundle-first","Analyze Your Bundle First",[10,96,97],{},"Before optimizing, measure. You cannot shrink what you cannot see.",[10,99,100],{},[101,102,103],"strong",{},"Webpack Bundle Analyzer:",[105,106,111],"pre",{"className":107,"code":108,"language":109,"meta":110,"style":110},"language-javascript shiki shiki-themes github-light github-dark","const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin\n\nmodule.exports = {\n  plugins: [new BundleAnalyzerPlugin()]\n}\n","javascript","",[112,113,114,145,152,169,183],"code",{"__ignoreMap":110},[115,116,119,123,127,130,134,138,142],"span",{"class":117,"line":118},"line",1,[115,120,122],{"class":121},"szBVR","const",[115,124,126],{"class":125},"sj4cs"," BundleAnalyzerPlugin",[115,128,129],{"class":121}," =",[115,131,133],{"class":132},"sScJk"," require",[115,135,137],{"class":136},"sVt8B","(",[115,139,141],{"class":140},"sZZnC","'webpack-bundle-analyzer'",[115,143,144],{"class":136},").BundleAnalyzerPlugin\n",[115,146,148],{"class":117,"line":147},2,[115,149,151],{"emptyLinePlaceholder":150},true,"\n",[115,153,155,158,161,164,166],{"class":117,"line":154},3,[115,156,157],{"class":125},"module",[115,159,160],{"class":136},".",[115,162,163],{"class":125},"exports",[115,165,129],{"class":121},[115,167,168],{"class":136}," {\n",[115,170,172,175,178,180],{"class":117,"line":171},4,[115,173,174],{"class":136},"  plugins: [",[115,176,177],{"class":121},"new",[115,179,126],{"class":132},[115,181,182],{"class":136},"()]\n",[115,184,186],{"class":117,"line":185},5,[115,187,188],{"class":136},"}\n",[10,190,191],{},[101,192,193],{},"Vite (Rollup Visualizer):",[105,195,199],{"className":196,"code":197,"language":198,"meta":110,"style":110},"language-bash shiki shiki-themes github-light github-dark","npm install rollup-plugin-visualizer --save-dev\n","bash",[112,200,201],{"__ignoreMap":110},[115,202,203,206,209,212],{"class":117,"line":118},[115,204,205],{"class":132},"npm",[115,207,208],{"class":140}," install",[115,210,211],{"class":140}," rollup-plugin-visualizer",[115,213,214],{"class":125}," --save-dev\n",[105,216,218],{"className":107,"code":217,"language":109,"meta":110,"style":110},"import { visualizer } from 'rollup-plugin-visualizer'\n\nexport default defineConfig({\n  plugins: [visualizer({ open: true })]\n})\n",[112,219,220,234,238,252,268],{"__ignoreMap":110},[115,221,222,225,228,231],{"class":117,"line":118},[115,223,224],{"class":121},"import",[115,226,227],{"class":136}," { visualizer } ",[115,229,230],{"class":121},"from",[115,232,233],{"class":140}," 'rollup-plugin-visualizer'\n",[115,235,236],{"class":117,"line":147},[115,237,151],{"emptyLinePlaceholder":150},[115,239,240,243,246,249],{"class":117,"line":154},[115,241,242],{"class":121},"export",[115,244,245],{"class":121}," default",[115,247,248],{"class":132}," defineConfig",[115,250,251],{"class":136},"({\n",[115,253,254,256,259,262,265],{"class":117,"line":171},[115,255,174],{"class":136},[115,257,258],{"class":132},"visualizer",[115,260,261],{"class":136},"({ open: ",[115,263,264],{"class":125},"true",[115,266,267],{"class":136}," })]\n",[115,269,270],{"class":117,"line":185},[115,271,272],{"class":136},"})\n",[10,274,275,278],{},[101,276,277],{},"Source Map Explorer"," (works with any bundler):",[105,280,282],{"className":196,"code":281,"language":198,"meta":110,"style":110},"npx source-map-explorer dist\u002Fassets\u002F*.js\n",[112,283,284],{"__ignoreMap":110},[115,285,286,289,292,295,298],{"class":117,"line":118},[115,287,288],{"class":132},"npx",[115,290,291],{"class":140}," source-map-explorer",[115,293,294],{"class":140}," dist\u002Fassets\u002F",[115,296,297],{"class":125},"*",[115,299,300],{"class":140},".js\n",[10,302,303],{},"Look for: large dependencies you did not expect, duplicate versions of the same package, and modules you import but barely use.",[14,305,307],{"id":306},"tree-shaking-and-dead-code-elimination","Tree Shaking and Dead Code Elimination",[10,309,310,311,314,315,318],{},"Tree shaking removes exported code that no other module imports. It relies on ES module static imports (",[112,312,313],{},"import { foo } from 'bar'",") — CommonJS ",[112,316,317],{},"require()"," calls cannot be statically analyzed.",[10,320,321],{},[101,322,323],{},"Enable tree shaking:",[325,326,327,331,342],"ul",{},[328,329,330],"li",{},"Use ES module syntax consistently",[328,332,333,334,337,338,341],{},"Mark packages with ",[112,335,336],{},"\"sideEffects\": false"," in ",[112,339,340],{},"package.json"," (only if true)",[328,343,344],{},"Avoid barrel files that re-export everything from a module",[105,346,348],{"className":107,"code":347,"language":109,"meta":110,"style":110},"\u002F\u002F BAD: imports entire lodash (72 KB gzipped)\nimport _ from 'lodash'\nconst result = _.debounce(fn, 300)\n\n\u002F\u002F GOOD: imports only debounce (~1 KB gzipped)\nimport debounce from 'lodash\u002Fdebounce'\nconst result = debounce(fn, 300)\n\n\u002F\u002F BEST: use lodash-es for tree shaking\nimport { debounce } from 'lodash-es'\n",[112,349,350,356,368,392,396,401,414,432,437,443],{"__ignoreMap":110},[115,351,352],{"class":117,"line":118},[115,353,355],{"class":354},"sJ8bj","\u002F\u002F BAD: imports entire lodash (72 KB gzipped)\n",[115,357,358,360,363,365],{"class":117,"line":147},[115,359,224],{"class":121},[115,361,362],{"class":136}," _ ",[115,364,230],{"class":121},[115,366,367],{"class":140}," 'lodash'\n",[115,369,370,372,375,377,380,383,386,389],{"class":117,"line":154},[115,371,122],{"class":121},[115,373,374],{"class":125}," result",[115,376,129],{"class":121},[115,378,379],{"class":136}," _.",[115,381,382],{"class":132},"debounce",[115,384,385],{"class":136},"(fn, ",[115,387,388],{"class":125},"300",[115,390,391],{"class":136},")\n",[115,393,394],{"class":117,"line":171},[115,395,151],{"emptyLinePlaceholder":150},[115,397,398],{"class":117,"line":185},[115,399,400],{"class":354},"\u002F\u002F GOOD: imports only debounce (~1 KB gzipped)\n",[115,402,404,406,409,411],{"class":117,"line":403},6,[115,405,224],{"class":121},[115,407,408],{"class":136}," debounce ",[115,410,230],{"class":121},[115,412,413],{"class":140}," 'lodash\u002Fdebounce'\n",[115,415,417,419,421,423,426,428,430],{"class":117,"line":416},7,[115,418,122],{"class":121},[115,420,374],{"class":125},[115,422,129],{"class":121},[115,424,425],{"class":132}," debounce",[115,427,385],{"class":136},[115,429,388],{"class":125},[115,431,391],{"class":136},[115,433,435],{"class":117,"line":434},8,[115,436,151],{"emptyLinePlaceholder":150},[115,438,440],{"class":117,"line":439},9,[115,441,442],{"class":354},"\u002F\u002F BEST: use lodash-es for tree shaking\n",[115,444,446,448,451,453],{"class":117,"line":445},10,[115,447,224],{"class":121},[115,449,450],{"class":136}," { debounce } ",[115,452,230],{"class":121},[115,454,455],{"class":140}," 'lodash-es'\n",[10,457,458],{},"Barrel files (index.js that re-exports everything) are a common tree-shaking killer:",[105,460,462],{"className":107,"code":461,"language":109,"meta":110,"style":110},"\u002F\u002F apis\u002Findex.js — forces bundler to include ALL APIs\nexport { Users } from '.\u002Fusers'\nexport { Products } from '.\u002Fproducts'\nexport { Orders } from '.\u002Forders'\nexport { Analytics } from '.\u002Fanalytics'  \u002F\u002F rarely used but always bundled\n",[112,463,464,469,481,493,505],{"__ignoreMap":110},[115,465,466],{"class":117,"line":118},[115,467,468],{"class":354},"\u002F\u002F apis\u002Findex.js — forces bundler to include ALL APIs\n",[115,470,471,473,476,478],{"class":117,"line":147},[115,472,242],{"class":121},[115,474,475],{"class":136}," { Users } ",[115,477,230],{"class":121},[115,479,480],{"class":140}," '.\u002Fusers'\n",[115,482,483,485,488,490],{"class":117,"line":154},[115,484,242],{"class":121},[115,486,487],{"class":136}," { Products } ",[115,489,230],{"class":121},[115,491,492],{"class":140}," '.\u002Fproducts'\n",[115,494,495,497,500,502],{"class":117,"line":171},[115,496,242],{"class":121},[115,498,499],{"class":136}," { Orders } ",[115,501,230],{"class":121},[115,503,504],{"class":140}," '.\u002Forders'\n",[115,506,507,509,512,514,517],{"class":117,"line":185},[115,508,242],{"class":121},[115,510,511],{"class":136}," { Analytics } ",[115,513,230],{"class":121},[115,515,516],{"class":140}," '.\u002Fanalytics'",[115,518,519],{"class":354},"  \u002F\u002F rarely used but always bundled\n",[10,521,522,523,160],{},"Import directly from the sub-module instead: ",[112,524,525],{},"import { Users } from '.\u002Fapis\u002Fusers'",[14,527,529],{"id":528},"code-splitting-and-dynamic-imports","Code Splitting and Dynamic Imports",[10,531,532,533,536],{},"Code splitting breaks your bundle into smaller chunks loaded on demand. The simplest method is dynamic ",[112,534,535],{},"import()",":",[105,538,540],{"className":107,"code":539,"language":109,"meta":110,"style":110},"\u002F\u002F Loaded immediately — part of the main bundle\nimport { navigationInit } from '.\u002Fnavigation'\n\n\u002F\u002F Loaded only when the user opens settings\nasync function openSettings() {\n  const { SettingsPanel } = await import('.\u002Fsettings-panel.vue')\n  render(SettingsPanel)\n}\n",[112,541,542,547,559,563,568,582,612,620],{"__ignoreMap":110},[115,543,544],{"class":117,"line":118},[115,545,546],{"class":354},"\u002F\u002F Loaded immediately — part of the main bundle\n",[115,548,549,551,554,556],{"class":117,"line":147},[115,550,224],{"class":121},[115,552,553],{"class":136}," { navigationInit } ",[115,555,230],{"class":121},[115,557,558],{"class":140}," '.\u002Fnavigation'\n",[115,560,561],{"class":117,"line":154},[115,562,151],{"emptyLinePlaceholder":150},[115,564,565],{"class":117,"line":171},[115,566,567],{"class":354},"\u002F\u002F Loaded only when the user opens settings\n",[115,569,570,573,576,579],{"class":117,"line":185},[115,571,572],{"class":121},"async",[115,574,575],{"class":121}," function",[115,577,578],{"class":132}," openSettings",[115,580,581],{"class":136},"() {\n",[115,583,584,587,590,593,596,599,602,605,607,610],{"class":117,"line":403},[115,585,586],{"class":121},"  const",[115,588,589],{"class":136}," { ",[115,591,592],{"class":125},"SettingsPanel",[115,594,595],{"class":136}," } ",[115,597,598],{"class":121},"=",[115,600,601],{"class":121}," await",[115,603,604],{"class":121}," import",[115,606,137],{"class":136},[115,608,609],{"class":140},"'.\u002Fsettings-panel.vue'",[115,611,391],{"class":136},[115,613,614,617],{"class":117,"line":416},[115,615,616],{"class":132},"  render",[115,618,619],{"class":136},"(SettingsPanel)\n",[115,621,622],{"class":117,"line":434},[115,623,188],{"class":136},[10,625,626],{},"Route-level splitting is the most effective pattern:",[105,628,630],{"className":107,"code":629,"language":109,"meta":110,"style":110},"\u002F\u002F Nuxt — automatic route splitting\n\u002F\u002F Each page in app\u002Fpages\u002F becomes a separate chunk\n\n\u002F\u002F Vue Router — manual route splitting\nconst routes = [\n  {\n    path: '\u002Fdashboard',\n    component: () => import('.\u002Fpages\u002FDashboard.vue')\n  },\n  {\n    path: '\u002Fsettings',\n    component: () => import('.\u002Fpages\u002FSettings.vue')\n  }\n]\n",[112,631,632,637,642,646,651,663,668,679,699,704,708,718,736,742],{"__ignoreMap":110},[115,633,634],{"class":117,"line":118},[115,635,636],{"class":354},"\u002F\u002F Nuxt — automatic route splitting\n",[115,638,639],{"class":117,"line":147},[115,640,641],{"class":354},"\u002F\u002F Each page in app\u002Fpages\u002F becomes a separate chunk\n",[115,643,644],{"class":117,"line":154},[115,645,151],{"emptyLinePlaceholder":150},[115,647,648],{"class":117,"line":171},[115,649,650],{"class":354},"\u002F\u002F Vue Router — manual route splitting\n",[115,652,653,655,658,660],{"class":117,"line":185},[115,654,122],{"class":121},[115,656,657],{"class":125}," routes",[115,659,129],{"class":121},[115,661,662],{"class":136}," [\n",[115,664,665],{"class":117,"line":403},[115,666,667],{"class":136},"  {\n",[115,669,670,673,676],{"class":117,"line":416},[115,671,672],{"class":136},"    path: ",[115,674,675],{"class":140},"'\u002Fdashboard'",[115,677,678],{"class":136},",\n",[115,680,681,684,687,690,692,694,697],{"class":117,"line":434},[115,682,683],{"class":132},"    component",[115,685,686],{"class":136},": () ",[115,688,689],{"class":121},"=>",[115,691,604],{"class":121},[115,693,137],{"class":136},[115,695,696],{"class":140},"'.\u002Fpages\u002FDashboard.vue'",[115,698,391],{"class":136},[115,700,701],{"class":117,"line":439},[115,702,703],{"class":136},"  },\n",[115,705,706],{"class":117,"line":445},[115,707,667],{"class":136},[115,709,711,713,716],{"class":117,"line":710},11,[115,712,672],{"class":136},[115,714,715],{"class":140},"'\u002Fsettings'",[115,717,678],{"class":136},[115,719,721,723,725,727,729,731,734],{"class":117,"line":720},12,[115,722,683],{"class":132},[115,724,686],{"class":136},[115,726,689],{"class":121},[115,728,604],{"class":121},[115,730,137],{"class":136},[115,732,733],{"class":140},"'.\u002Fpages\u002FSettings.vue'",[115,735,391],{"class":136},[115,737,739],{"class":117,"line":738},13,[115,740,741],{"class":136},"  }\n",[115,743,745],{"class":117,"line":744},14,[115,746,747],{"class":136},"]\n",[10,749,750],{},"This ensures users only download code for the page they are viewing — not the entire application upfront.",[14,752,754],{"id":753},"dependency-auditing","Dependency Auditing",[10,756,757],{},"Large dependencies are the biggest source of bundle bloat. Audit regularly:",[105,759,761],{"className":196,"code":760,"language":198,"meta":110,"style":110},"# Find the largest packages in your bundle\nnpx bundlephobia \u003Cpackage-name>\n\n# Check for duplicate dependencies\nnpx npm-check\n\n# Analyze full bundle cost\nnpx cost-of-modules\n",[112,762,763,768,787,791,796,803,807,812],{"__ignoreMap":110},[115,764,765],{"class":117,"line":118},[115,766,767],{"class":354},"# Find the largest packages in your bundle\n",[115,769,770,772,775,778,781,784],{"class":117,"line":147},[115,771,288],{"class":132},[115,773,774],{"class":140}," bundlephobia",[115,776,777],{"class":121}," \u003C",[115,779,780],{"class":140},"package-nam",[115,782,783],{"class":136},"e",[115,785,786],{"class":121},">\n",[115,788,789],{"class":117,"line":154},[115,790,151],{"emptyLinePlaceholder":150},[115,792,793],{"class":117,"line":171},[115,794,795],{"class":354},"# Check for duplicate dependencies\n",[115,797,798,800],{"class":117,"line":185},[115,799,288],{"class":132},[115,801,802],{"class":140}," npm-check\n",[115,804,805],{"class":117,"line":403},[115,806,151],{"emptyLinePlaceholder":150},[115,808,809],{"class":117,"line":416},[115,810,811],{"class":354},"# Analyze full bundle cost\n",[115,813,814,816],{"class":117,"line":434},[115,815,288],{"class":132},[115,817,818],{"class":140}," cost-of-modules\n",[10,820,821],{},"Common heavy packages and lighter alternatives:",[22,823,824,839],{},[25,825,826],{},[28,827,828,831,834,837],{},[31,829,830],{},"Heavy Package",[31,832,833],{},"Size (gzip)",[31,835,836],{},"Lighter Alternative",[31,838,833],{},[41,840,841,860,879,898],{},[28,842,843,848,851,857],{},[46,844,845],{},[112,846,847],{},"moment",[46,849,850],{},"67 KB",[46,852,853,856],{},[112,854,855],{},"date-fns"," (per-function)",[46,858,859],{},"2–5 KB",[28,861,862,867,870,876],{},[46,863,864],{},[112,865,866],{},"lodash",[46,868,869],{},"72 KB",[46,871,872,875],{},[112,873,874],{},"lodash-es"," (tree-shakeable)",[46,877,878],{},"1–5 KB",[28,880,881,886,889,895],{},[46,882,883],{},[112,884,885],{},"rxjs",[46,887,888],{},"32 KB",[46,890,891,894],{},[112,892,893],{},"nanothrow"," or native events",[46,896,897],{},"\u003C1 KB",[28,899,900,905,908,914],{},[46,901,902],{},[112,903,904],{},"axios",[46,906,907],{},"13 KB",[46,909,910,913],{},[112,911,912],{},"fetch"," (native)",[46,915,916],{},"0 KB",[10,918,919],{},"Before adding a dependency, check its cost onBundlephobia. A 5 KB package that replaces ten lines of code is a bad trade.",[14,921,923],{"id":922},"compression-and-caching","Compression and Caching",[10,925,926],{},"Smaller bundles compress better. Enable Brotli or gzip at your hosting layer:",[22,928,929,939],{},[25,930,931],{},[28,932,933,936],{},[31,934,935],{},"Compression",[31,937,938],{},"Typical JS Reduction",[41,940,941,949],{},[28,942,943,946],{},[46,944,945],{},"gzip (level 6)",[46,947,948],{},"65–75%",[28,950,951,954],{},[46,952,953],{},"Brotli (level 4)",[46,955,956],{},"70–80%",[10,958,959],{},"Pre-compress static assets at build time to avoid runtime CPU cost. Vite and Webpack both support plugins for this.",[10,961,962],{},"Cache aggressively with content-based filenames:",[105,964,968],{"className":965,"code":966,"language":967,"meta":110,"style":110},"language-html shiki shiki-themes github-light github-dark","\u003Cscript src=\"\u002Fassets\u002Fapp.a3f7b2c4.js\">\u003C\u002Fscript>\n","html",[112,969,970],{"__ignoreMap":110},[115,971,972,975,979,982,984,987,990,992],{"class":117,"line":118},[115,973,974],{"class":136},"\u003C",[115,976,978],{"class":977},"s9eBZ","script",[115,980,981],{"class":132}," src",[115,983,598],{"class":136},[115,985,986],{"class":140},"\"\u002Fassets\u002Fapp.a3f7b2c4.js\"",[115,988,989],{"class":136},">\u003C\u002F",[115,991,978],{"class":977},[115,993,786],{"class":136},[10,995,996],{},"When the content changes, the hash changes, and browsers fetch the new version. Until then, the cached copy serves instantly.",[14,998,1000],{"id":999},"key-takeaways","Key Takeaways",[325,1002,1003,1006,1009,1012,1018,1021],{},[328,1004,1005],{},"JavaScript is the most expensive web resource — every KB counts for parsing and execution",[328,1007,1008],{},"Analyze your bundle before optimizing; visualizers reveal unexpected bloat",[328,1010,1011],{},"Use ES module imports and avoid barrel files to enable effective tree shaking",[328,1013,1014,1015,1017],{},"Split code at route boundaries with dynamic ",[112,1016,535],{}," — users download only what they need",[328,1019,1020],{},"Audit dependencies regularly — replacing moment with date-fns can save 60+ KB",[328,1022,1023],{},"Enable Brotli compression and content-hash caching for production",[14,1025,1027],{"id":1026},"related-guides","Related Guides",[325,1029,1030,1037,1043],{},[328,1031,1032],{},[1033,1034,1036],"a",{"href":1035},"\u002Fguides\u002Fjs-minification-guide","JavaScript Minification Guide: How It Works and Why It Matters",[328,1038,1039],{},[1033,1040,1042],{"href":1041},"\u002Fguides\u002Fjs-tree-shaking","Tree Shaking vs Minification",[328,1044,1045],{},[1033,1046,1048],{"href":1047},"\u002Fguides\u002Fsource-maps-minified-code","Source Maps and Minified Code",[14,1050,1052],{"id":1051},"try-it-yourself","Try It Yourself",[10,1054,1055,1056,1060],{},"Minify your JavaScript and see the size difference with our free ",[1033,1057,1059],{"href":1058},"\u002Ftools\u002Fjs-minifier","JavaScript Minifier",". Paste your code, compare original vs. minified output, and understand how much you can save before even applying compression.",[1062,1063,1064],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":110,"searchDepth":147,"depth":147,"links":1066},[1067,1068,1069,1070,1071,1072,1073,1074,1075],{"id":16,"depth":147,"text":17},{"id":93,"depth":147,"text":94},{"id":306,"depth":147,"text":307},{"id":528,"depth":147,"text":529},{"id":753,"depth":147,"text":754},{"id":922,"depth":147,"text":923},{"id":999,"depth":147,"text":1000},{"id":1026,"depth":147,"text":1027},{"id":1051,"depth":147,"text":1052},"2026-05-28","Reduce your JavaScript bundle size with code splitting, tree shaking, dynamic imports, and dependency auditing — practical strategies for faster pages.","md",{"immutable":150},"\u002Fguides\u002Fjavascript-bundle-size-optimization",{"title":5,"description":1077},"guides\u002Fjavascript-bundle-size-optimization","pZqweGliZ_6xOM19nl2s7mAmldiGZoAmIPkhfcC3Ah4",1780401334711]