[{"data":1,"prerenderedAt":1081},["ShallowReactive",2],{"guide-js-tree-shaking":3},{"id":4,"title":5,"body":6,"date":1073,"description":1074,"extension":1075,"meta":1076,"navigation":113,"path":1077,"readingTime":153,"seo":1078,"stem":1079,"__hash__":1080},"guides\u002Fguides\u002Fjs-tree-shaking.md","Tree Shaking vs Minification: Reducing JavaScript Bundle Size",{"type":7,"value":8,"toc":1056},"minimark",[9,14,18,21,25,42,188,205,212,224,228,231,256,405,418,422,425,489,492,496,502,524,527,538,578,581,584,615,636,640,645,736,743,747,833,836,840,893,896,900,903,917,920,923,927,984,988,1013,1017,1025,1029,1052],[10,11,13],"h2",{"id":12},"what-is-tree-shaking","What Is Tree Shaking?",[15,16,17],"p",{},"Tree shaking is a dead code elimination technique that removes exports your application never uses. The name comes from the mental image of shaking a tree and letting the dead leaves fall off.",[15,19,20],{},"Unlike minification — which shortens code but keeps all of it — tree shaking actually deletes unused functions, classes, and variables from your bundle. The two techniques work together: tree shaking removes dead code, then minification compresses what remains.",[10,22,24],{"id":23},"why-es-modules-matter","Why ES Modules Matter",[15,26,27,28,32,33,37,38,41],{},"Tree shaking depends on ",[29,30,31],"strong",{},"ES module syntax"," (",[34,35,36],"code",{},"import"," and ",[34,39,40],{},"export","). The reason is static analysis.",[43,44,49],"pre",{"className":45,"code":46,"language":47,"meta":48,"style":48},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F ES modules — statically analyzable\nimport { debounce } from 'lodash-es';\nexport function formatDate(date) { ... }\n\n\u002F\u002F CommonJS — dynamic and unpredictable\nconst { debounce } = require('lodash');\nmodule.exports = { formatDate: function(date) { ... } };\n","javascript","",[34,50,51,60,80,108,115,121,151],{"__ignoreMap":48},[52,53,56],"span",{"class":54,"line":55},"line",1,[52,57,59],{"class":58},"sJ8bj","\u002F\u002F ES modules — statically analyzable\n",[52,61,63,66,70,73,77],{"class":54,"line":62},2,[52,64,36],{"class":65},"szBVR",[52,67,69],{"class":68},"sVt8B"," { debounce } ",[52,71,72],{"class":65},"from",[52,74,76],{"class":75},"sZZnC"," 'lodash-es'",[52,78,79],{"class":68},";\n",[52,81,83,85,88,92,95,99,102,105],{"class":54,"line":82},3,[52,84,40],{"class":65},[52,86,87],{"class":65}," function",[52,89,91],{"class":90},"sScJk"," formatDate",[52,93,94],{"class":68},"(",[52,96,98],{"class":97},"s4XuR","date",[52,100,101],{"class":68},") { ",[52,103,104],{"class":65},"...",[52,106,107],{"class":68}," }\n",[52,109,111],{"class":54,"line":110},4,[52,112,114],{"emptyLinePlaceholder":113},true,"\n",[52,116,118],{"class":54,"line":117},5,[52,119,120],{"class":58},"\u002F\u002F CommonJS — dynamic and unpredictable\n",[52,122,124,127,130,134,137,140,143,145,148],{"class":54,"line":123},6,[52,125,126],{"class":65},"const",[52,128,129],{"class":68}," { ",[52,131,133],{"class":132},"sj4cs","debounce",[52,135,136],{"class":68}," } ",[52,138,139],{"class":65},"=",[52,141,142],{"class":90}," require",[52,144,94],{"class":68},[52,146,147],{"class":75},"'lodash'",[52,149,150],{"class":68},");\n",[52,152,154,157,160,163,166,168,171,174,177,179,181,183,185],{"class":54,"line":153},7,[52,155,156],{"class":132},"module",[52,158,159],{"class":68},".",[52,161,162],{"class":132},"exports",[52,164,165],{"class":65}," =",[52,167,129],{"class":68},[52,169,170],{"class":90},"formatDate",[52,172,173],{"class":68},": ",[52,175,176],{"class":65},"function",[52,178,94],{"class":68},[52,180,98],{"class":97},[52,182,101],{"class":68},[52,184,104],{"class":65},[52,186,187],{"class":68}," } };\n",[15,189,190,191,194,195,197,198,201,202,204],{},"ES module imports are resolved at ",[29,192,193],{},"compile time",". The bundler can see exactly which exports a module provides and which ones your code imports. If you import ",[34,196,133],{}," but not ",[34,199,200],{},"throttle",", the bundler knows ",[34,203,200],{}," is safe to drop.",[15,206,207,208,211],{},"CommonJS ",[34,209,210],{},"require()"," calls are dynamic — the argument can be a variable, a conditional, or a computed string. The bundler cannot reliably determine what gets used, so it keeps everything.",[15,213,214,217,218,220,221,223],{},[29,215,216],{},"Rule",": If you want tree shaking to work, use ",[34,219,36],{},"\u002F",[34,222,40],{}," throughout your codebase.",[10,225,227],{"id":226},"how-tree-shaking-works","How Tree Shaking Works",[15,229,230],{},"The process follows three steps:",[232,233,234,244,250],"ol",{},[235,236,237,240,241,243],"li",{},[29,238,239],{},"Build the dependency graph"," — The bundler starts at your entry point and follows every ",[34,242,36],{}," statement to build a complete map of modules and their exports.",[235,245,246,249],{},[29,247,248],{},"Mark used exports"," — For each module, the bundler checks which exports are actually referenced by other modules in the graph. Unreferenced exports get marked as dead.",[235,251,252,255],{},[29,253,254],{},"Eliminate dead code"," — The bundler removes the marked exports from the output. A minifier then cleans up any orphaned code left behind.",[43,257,259],{"className":45,"code":258,"language":47,"meta":48,"style":48},"\u002F\u002F utils.js — three exports\nexport function add(a, b) { return a + b; }\nexport function multiply(a, b) { return a * b; }\nexport function divide(a, b) { return a \u002F b; }\n\n\u002F\u002F app.js — only one import\nimport { add } from '.\u002Futils.js';\nconsole.log(add(2, 3));\n",[34,260,261,266,300,328,355,359,364,378],{"__ignoreMap":48},[52,262,263],{"class":54,"line":55},[52,264,265],{"class":58},"\u002F\u002F utils.js — three exports\n",[52,267,268,270,272,275,277,280,283,286,288,291,294,297],{"class":54,"line":62},[52,269,40],{"class":65},[52,271,87],{"class":65},[52,273,274],{"class":90}," add",[52,276,94],{"class":68},[52,278,279],{"class":97},"a",[52,281,282],{"class":68},", ",[52,284,285],{"class":97},"b",[52,287,101],{"class":68},[52,289,290],{"class":65},"return",[52,292,293],{"class":68}," a ",[52,295,296],{"class":65},"+",[52,298,299],{"class":68}," b; }\n",[52,301,302,304,306,309,311,313,315,317,319,321,323,326],{"class":54,"line":82},[52,303,40],{"class":65},[52,305,87],{"class":65},[52,307,308],{"class":90}," multiply",[52,310,94],{"class":68},[52,312,279],{"class":97},[52,314,282],{"class":68},[52,316,285],{"class":97},[52,318,101],{"class":68},[52,320,290],{"class":65},[52,322,293],{"class":68},[52,324,325],{"class":65},"*",[52,327,299],{"class":68},[52,329,330,332,334,337,339,341,343,345,347,349,351,353],{"class":54,"line":110},[52,331,40],{"class":65},[52,333,87],{"class":65},[52,335,336],{"class":90}," divide",[52,338,94],{"class":68},[52,340,279],{"class":97},[52,342,282],{"class":68},[52,344,285],{"class":97},[52,346,101],{"class":68},[52,348,290],{"class":65},[52,350,293],{"class":68},[52,352,220],{"class":65},[52,354,299],{"class":68},[52,356,357],{"class":54,"line":117},[52,358,114],{"emptyLinePlaceholder":113},[52,360,361],{"class":54,"line":123},[52,362,363],{"class":58},"\u002F\u002F app.js — only one import\n",[52,365,366,368,371,373,376],{"class":54,"line":153},[52,367,36],{"class":65},[52,369,370],{"class":68}," { add } ",[52,372,72],{"class":65},[52,374,375],{"class":75}," '.\u002Futils.js'",[52,377,79],{"class":68},[52,379,381,384,387,389,392,394,397,399,402],{"class":54,"line":380},8,[52,382,383],{"class":68},"console.",[52,385,386],{"class":90},"log",[52,388,94],{"class":68},[52,390,391],{"class":90},"add",[52,393,94],{"class":68},[52,395,396],{"class":132},"2",[52,398,282],{"class":68},[52,400,401],{"class":132},"3",[52,403,404],{"class":68},"));\n",[15,406,407,408,410,411,37,414,417],{},"The bundler includes ",[34,409,391],{}," and removes ",[34,412,413],{},"multiply",[34,415,416],{},"divide"," — they are never imported.",[10,419,421],{"id":420},"tree-shaking-vs-dead-code-elimination","Tree Shaking vs Dead Code Elimination",[15,423,424],{},"These terms overlap but are not identical:",[426,427,428,443],"table",{},[429,430,431],"thead",{},[432,433,434,437,440],"tr",{},[435,436],"th",{},[435,438,439],{},"Tree Shaking",[435,441,442],{},"Dead Code Elimination",[444,445,446,460,473],"tbody",{},[432,447,448,454,457],{},[449,450,451],"td",{},[29,452,453],{},"Scope",[449,455,456],{},"Module-level exports",[449,458,459],{},"Any unreachable code",[432,461,462,467,470],{},[449,463,464],{},[29,465,466],{},"Mechanism",[449,468,469],{},"Unused export removal",[449,471,472],{},"Unreachable branch removal",[432,474,475,480,483],{},[449,476,477],{},[29,478,479],{},"Example",[449,481,482],{},"Removing an exported function you never import",[449,484,485,486],{},"Removing code inside ",[34,487,488],{},"if (false) { ... }",[15,490,491],{},"Tree shaking operates on the module graph. Dead code elimination operates within individual functions and blocks. Both reduce size, and modern bundlers apply both automatically.",[10,493,495],{"id":494},"side-effects-and-packagejson","Side Effects and Package.json",[15,497,498,499,159],{},"Some modules execute code simply by being imported — even if you never use their exports. These are ",[29,500,501],{},"side effects",[43,503,505],{"className":45,"code":504,"language":47,"meta":48,"style":48},"\u002F\u002F side-effect.js\nwindow.myGlobal = 'hello';\n",[34,506,507,512],{"__ignoreMap":48},[52,508,509],{"class":54,"line":55},[52,510,511],{"class":58},"\u002F\u002F side-effect.js\n",[52,513,514,517,519,522],{"class":54,"line":62},[52,515,516],{"class":68},"window.myGlobal ",[52,518,139],{"class":65},[52,520,521],{"class":75}," 'hello'",[52,523,79],{"class":68},[15,525,526],{},"Importing this file changes global state. A bundler must keep it, even if no export is used.",[15,528,529,530,533,534,537],{},"To help bundlers optimize correctly, library authors add a ",[34,531,532],{},"sideEffects"," field to ",[34,535,536],{},"package.json",":",[43,539,543],{"className":540,"code":541,"language":542,"meta":48,"style":48},"language-json shiki shiki-themes github-light github-dark","{\n  \"name\": \"my-library\",\n  \"sideEffects\": false\n}\n","json",[34,544,545,550,563,573],{"__ignoreMap":48},[52,546,547],{"class":54,"line":55},[52,548,549],{"class":68},"{\n",[52,551,552,555,557,560],{"class":54,"line":62},[52,553,554],{"class":132},"  \"name\"",[52,556,173],{"class":68},[52,558,559],{"class":75},"\"my-library\"",[52,561,562],{"class":68},",\n",[52,564,565,568,570],{"class":54,"line":82},[52,566,567],{"class":132},"  \"sideEffects\"",[52,569,173],{"class":68},[52,571,572],{"class":132},"false\n",[52,574,575],{"class":54,"line":110},[52,576,577],{"class":68},"}\n",[15,579,580],{},"This declaration tells the bundler: \"No file in this package has side effects. Drop any unused exports freely.\"",[15,582,583],{},"If only certain files have side effects:",[43,585,587],{"className":540,"code":586,"language":542,"meta":48,"style":48},"{\n  \"sideEffects\": [\".\u002Fsrc\u002Fpolyfills.js\", \".\u002Fsrc\u002Fglobal-setup.js\"]\n}\n",[34,588,589,593,611],{"__ignoreMap":48},[52,590,591],{"class":54,"line":55},[52,592,549],{"class":68},[52,594,595,597,600,603,605,608],{"class":54,"line":62},[52,596,567],{"class":132},[52,598,599],{"class":68},": [",[52,601,602],{"class":75},"\".\u002Fsrc\u002Fpolyfills.js\"",[52,604,282],{"class":68},[52,606,607],{"class":75},"\".\u002Fsrc\u002Fglobal-setup.js\"",[52,609,610],{"class":68},"]\n",[52,612,613],{"class":54,"line":82},[52,614,577],{"class":68},[15,616,617,620,621,624,625,282,628,631,632,635],{},[29,618,619],{},"For consumers",": Check whether your dependencies declare ",[34,622,623],{},"sideEffects: false",". Libraries like ",[34,626,627],{},"lodash-es",[34,629,630],{},"date-fns",", and ",[34,633,634],{},"ramda"," do — and that is why they tree-shake well.",[10,637,639],{"id":638},"bundler-configuration","Bundler Configuration",[641,642,644],"h3",{"id":643},"webpack","Webpack",[43,646,648],{"className":45,"code":647,"language":47,"meta":48,"style":48},"\u002F\u002F webpack.config.js\nmodule.exports = {\n  mode: 'production', \u002F\u002F enables tree shaking + Terser\n  optimization: {\n    usedExports: true,        \u002F\u002F mark unused exports\n    minimize: true,           \u002F\u002F run Terser\n    concatenateModules: true, \u002F\u002F scope hoisting\n  },\n};\n",[34,649,650,655,668,681,686,700,713,725,730],{"__ignoreMap":48},[52,651,652],{"class":54,"line":55},[52,653,654],{"class":58},"\u002F\u002F webpack.config.js\n",[52,656,657,659,661,663,665],{"class":54,"line":62},[52,658,156],{"class":132},[52,660,159],{"class":68},[52,662,162],{"class":132},[52,664,165],{"class":65},[52,666,667],{"class":68}," {\n",[52,669,670,673,676,678],{"class":54,"line":82},[52,671,672],{"class":68},"  mode: ",[52,674,675],{"class":75},"'production'",[52,677,282],{"class":68},[52,679,680],{"class":58},"\u002F\u002F enables tree shaking + Terser\n",[52,682,683],{"class":54,"line":110},[52,684,685],{"class":68},"  optimization: {\n",[52,687,688,691,694,697],{"class":54,"line":117},[52,689,690],{"class":68},"    usedExports: ",[52,692,693],{"class":132},"true",[52,695,696],{"class":68},",        ",[52,698,699],{"class":58},"\u002F\u002F mark unused exports\n",[52,701,702,705,707,710],{"class":54,"line":123},[52,703,704],{"class":68},"    minimize: ",[52,706,693],{"class":132},[52,708,709],{"class":68},",           ",[52,711,712],{"class":58},"\u002F\u002F run Terser\n",[52,714,715,718,720,722],{"class":54,"line":153},[52,716,717],{"class":68},"    concatenateModules: ",[52,719,693],{"class":132},[52,721,282],{"class":68},[52,723,724],{"class":58},"\u002F\u002F scope hoisting\n",[52,726,727],{"class":54,"line":380},[52,728,729],{"class":68},"  },\n",[52,731,733],{"class":54,"line":732},9,[52,734,735],{"class":68},"};\n",[15,737,738,739,742],{},"Webpack's tree shaking activates in production mode by default. The ",[34,740,741],{},"usedExports"," flag tells Webpack to track which exports are used and drop the rest during minification.",[641,744,746],{"id":745},"rollup","Rollup",[43,748,750],{"className":45,"code":749,"language":47,"meta":48,"style":48},"\u002F\u002F rollup.config.js\nexport default {\n  input: 'src\u002Findex.js',\n  output: {\n    file: 'dist\u002Fbundle.js',\n    format: 'esm',\n  },\n  treeshake: {\n    moduleSideEffects: false, \u002F\u002F assume no side effects\n  },\n};\n",[34,751,752,757,766,776,781,791,801,805,810,823,828],{"__ignoreMap":48},[52,753,754],{"class":54,"line":55},[52,755,756],{"class":58},"\u002F\u002F rollup.config.js\n",[52,758,759,761,764],{"class":54,"line":62},[52,760,40],{"class":65},[52,762,763],{"class":65}," default",[52,765,667],{"class":68},[52,767,768,771,774],{"class":54,"line":82},[52,769,770],{"class":68},"  input: ",[52,772,773],{"class":75},"'src\u002Findex.js'",[52,775,562],{"class":68},[52,777,778],{"class":54,"line":110},[52,779,780],{"class":68},"  output: {\n",[52,782,783,786,789],{"class":54,"line":117},[52,784,785],{"class":68},"    file: ",[52,787,788],{"class":75},"'dist\u002Fbundle.js'",[52,790,562],{"class":68},[52,792,793,796,799],{"class":54,"line":123},[52,794,795],{"class":68},"    format: ",[52,797,798],{"class":75},"'esm'",[52,800,562],{"class":68},[52,802,803],{"class":54,"line":153},[52,804,729],{"class":68},[52,806,807],{"class":54,"line":380},[52,808,809],{"class":68},"  treeshake: {\n",[52,811,812,815,818,820],{"class":54,"line":732},[52,813,814],{"class":68},"    moduleSideEffects: ",[52,816,817],{"class":132},"false",[52,819,282],{"class":68},[52,821,822],{"class":58},"\u002F\u002F assume no side effects\n",[52,824,826],{"class":54,"line":825},10,[52,827,729],{"class":68},[52,829,831],{"class":54,"line":830},11,[52,832,735],{"class":68},[15,834,835],{},"Rollup was built for ES modules and tree shakes by default. It often produces smaller bundles than Webpack for library code because its scope hoisting is more aggressive.",[641,837,839],{"id":838},"vite","Vite",[43,841,843],{"className":45,"code":842,"language":47,"meta":48,"style":48},"\u002F\u002F vite.config.js\nexport default {\n  build: {\n    rollupOptions: {\n      treeshake: true, \u002F\u002F default in production\n    },\n  },\n};\n",[34,844,845,850,858,863,868,880,885,889],{"__ignoreMap":48},[52,846,847],{"class":54,"line":55},[52,848,849],{"class":58},"\u002F\u002F vite.config.js\n",[52,851,852,854,856],{"class":54,"line":62},[52,853,40],{"class":65},[52,855,763],{"class":65},[52,857,667],{"class":68},[52,859,860],{"class":54,"line":82},[52,861,862],{"class":68},"  build: {\n",[52,864,865],{"class":54,"line":110},[52,866,867],{"class":68},"    rollupOptions: {\n",[52,869,870,873,875,877],{"class":54,"line":117},[52,871,872],{"class":68},"      treeshake: ",[52,874,693],{"class":132},[52,876,282],{"class":68},[52,878,879],{"class":58},"\u002F\u002F default in production\n",[52,881,882],{"class":54,"line":123},[52,883,884],{"class":68},"    },\n",[52,886,887],{"class":54,"line":153},[52,888,729],{"class":68},[52,890,891],{"class":54,"line":380},[52,892,735],{"class":68},[15,894,895],{},"Vite uses Rollup for production builds, so tree shaking works out of the box. No extra configuration needed for most projects.",[10,897,899],{"id":898},"tree-shaking-and-minification-together","Tree Shaking and Minification Together",[15,901,902],{},"These two techniques are complementary, not competing:",[232,904,905,911],{},[235,906,907,910],{},[29,908,909],{},"Tree shaking"," runs first — it removes entire unused modules and exports",[235,912,913,916],{},[29,914,915],{},"Minification"," runs second — it compresses the remaining code by shortening names and removing whitespace",[15,918,919],{},"The order matters. If you minify first, variable names get shorter but the dead code is still there. Tree shaking then removes the dead code, but the minifier has already wasted effort on code that gets deleted.",[15,921,922],{},"In practice, you do not control this order — your bundler does. Just make sure both are enabled in production mode.",[10,924,926],{"id":925},"common-pitfalls","Common Pitfalls",[928,929,930,944,953,962,972],"ul",{},[235,931,932,935,936,939,940,943],{},[29,933,934],{},"Importing entire libraries"," — ",[34,937,938],{},"import _ from 'lodash'"," imports everything and defeats tree shaking. Use ",[34,941,942],{},"import { debounce } from 'lodash-es'"," instead",[235,945,946,935,949,952],{},[29,947,948],{},"Re-exporting everything",[34,950,951],{},"export * from '.\u002Fmodule'"," forces the bundler to keep all exports because it cannot know which ones downstream consumers need",[235,954,955,935,958,961],{},[29,956,957],{},"Dynamic imports",[34,959,960],{},"import('.\u002Fmodule')"," creates a separate chunk; the bundler cannot tree-shake across dynamic boundaries",[235,963,964,967,968,971],{},[29,965,966],{},"CommonJS dependencies"," — If a dependency uses ",[34,969,970],{},"module.exports",", the bundler may conservatively include the entire module",[235,973,974,977,978,980,981,983],{},[29,975,976],{},"Missing sideEffects field"," — Without ",[34,979,623],{}," in ",[34,982,536],{},", bundlers must assume every file might have side effects",[10,985,987],{"id":986},"key-takeaways","Key Takeaways",[928,989,990,993,1001,1007,1010],{},[235,991,992],{},"Tree shaking removes unused ES module exports; minification compresses what remains",[235,994,995,996,220,998,1000],{},"Static ",[34,997,36],{},[34,999,40],{}," syntax is required — CommonJS defeats tree shaking",[235,1002,1003,1004,1006],{},"Declare ",[34,1005,623],{}," in your package.json to help bundlers optimize aggressively",[235,1008,1009],{},"Webpack, Rollup, and Vite all support tree shaking in production mode by default",[235,1011,1012],{},"Import only what you need: named imports over namespace imports",[10,1014,1016],{"id":1015},"try-it-yourself","Try It Yourself",[15,1018,1019,1020,1024],{},"Test the impact of tree shaking by minifying your JavaScript with our free ",[279,1021,1023],{"href":1022},"\u002Ftools\u002Fjs-minifier","JS Minifier",". See how much smaller your code becomes when unused functions are stripped before compression.",[10,1026,1028],{"id":1027},"related-guides","Related Guides",[928,1030,1031,1038,1045],{},[235,1032,1033,1037],{},[279,1034,1036],{"href":1035},"\u002Fguides\u002Fjs-minification-guide","JavaScript Minification Guide"," — How whitespace removal and variable mangling compress your code",[235,1039,1040,1044],{},[279,1041,1043],{"href":1042},"\u002Fguides\u002Fjs-performance-optimization","JavaScript Performance Optimization"," — Loading, parsing, and execution strategies for faster pages",[235,1046,1047,1051],{},[279,1048,1050],{"href":1049},"\u002Fguides\u002Fcss-minification-guide","CSS Minification Guide"," — Apply the same dead-code and compression principles to stylesheets",[1053,1054,1055],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":48,"searchDepth":62,"depth":62,"links":1057},[1058,1059,1060,1061,1062,1063,1068,1069,1070,1071,1072],{"id":12,"depth":62,"text":13},{"id":23,"depth":62,"text":24},{"id":226,"depth":62,"text":227},{"id":420,"depth":62,"text":421},{"id":494,"depth":62,"text":495},{"id":638,"depth":62,"text":639,"children":1064},[1065,1066,1067],{"id":643,"depth":82,"text":644},{"id":745,"depth":82,"text":746},{"id":838,"depth":82,"text":839},{"id":898,"depth":62,"text":899},{"id":925,"depth":62,"text":926},{"id":986,"depth":62,"text":987},{"id":1015,"depth":62,"text":1016},{"id":1027,"depth":62,"text":1028},"2026-05-28","Understand how tree shaking eliminates unused code from JavaScript bundles and how it complements minification for maximum size reduction.","md",{"immutable":113},"\u002Fguides\u002Fjs-tree-shaking",{"title":5,"description":1074},"guides\u002Fjs-tree-shaking","jIeLaq9JllsMWJb7DVFIvK-8LLdNiqQzCceNUQZzJ98",1780401327120]