[{"data":1,"prerenderedAt":1387},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination":1379},{"id":4,"title":5,"body":6,"description":1372,"extension":1373,"meta":1374,"navigation":761,"path":1375,"seo":1376,"stem":1377,"__hash__":1378},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Findex.md","Tree Shaking and Dead Code Elimination: Advanced Implementation & Diagnostics",{"type":7,"value":8,"toc":1355},"minimark",[9,13,28,33,52,58,106,110,124,129,228,248,252,259,264,293,320,324,327,367,389,393,400,405,432,436,450,455,503,507,510,515,648,664,668,671,676,710,713,716,720,725,934,938,1132,1136,1234,1236,1240,1275,1277,1281,1310,1336,1342,1351],[10,11,5],"h1",{"id":12},"tree-shaking-and-dead-code-elimination-advanced-implementation-diagnostics",[14,15,16,17,21,22,27],"p",{},"Modern build pipelines rely heavily on static analysis to strip unreachable code before deployment. Tree shaking and dead code elimination (DCE) operate at distinct phases: tree shaking resolves unused exports at the module graph level, while DCE executes during minification to remove unreachable branches, unused variables, and side-effect-free function calls. For performance-conscious engineering teams, achieving a production bundle with ",[18,19,20],"code",{},"\u003C5%"," unused code requires precise configuration, explicit side-effect declarations, and rigorous diagnostic workflows. This guide bridges the gap between theoretical bundler behavior and production-ready implementation, providing actionable thresholds, diagnostic pipelines, and bundler-agnostic configurations. For a broader architectural overview of how these techniques fit into larger performance strategies, see ",[23,24,26],"a",{"href":25},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting",".",[29,30,32],"h2",{"id":31},"static-analysis-esm-module-graph-construction","Static Analysis & ESM Module Graph Construction",[14,34,35,36,39,40,43,44,47,48,51],{},"Bundlers construct deterministic dependency graphs exclusively through ES Module (ESM) ",[18,37,38],{},"import","\u002F",[18,41,42],{},"export"," syntax. Unlike CommonJS ",[18,45,46],{},"require()",", which resolves dynamically at runtime and obscures dependency chains, ESM exports are statically analyzable. During compilation, the bundler traverses the module graph, tracing export usage across boundaries and marking unreferenced nodes for pruning. This process is strictly build-time and requires deterministic import paths; any runtime evaluation or dynamic property access (",[18,49,50],{},"import * as lib from 'pkg'; lib[methodName]()",") breaks static analysis and forces the bundler to retain the entire module.",[14,53,54],{},[55,56,57],"strong",{},"Diagnostic Workflow:",[59,60,61,68,86,96],"ol",{},[62,63,64,65],"li",{},"Generate a detailed build profile: ",[18,66,67],{},"npx webpack --profile --json > stats.json",[62,69,70,71,74,75,78,79,82,83,27],{},"Parse the ",[18,72,73],{},"modules"," array and filter for entries where ",[18,76,77],{},"usedExports"," evaluates to ",[18,80,81],{},"false"," or contains ",[18,84,85],{},"null",[62,87,88,89,92,93,27],{},"Calculate the delta between ",[18,90,91],{},"size"," and ",[18,94,95],{},"usedSize",[62,97,98,101,102,105],{},[55,99,100],{},"Threshold:"," Flag any module with ",[18,103,104],{},">10KB"," of unused exports for immediate refactoring. Isolate heavy utilities into dedicated entry points or switch to granular ESM imports.",[29,107,109],{"id":108},"configuring-sideeffects-package-manifest-overrides","Configuring sideEffects & Package Manifest Overrides",[14,111,112,113,116,117,120,121,123],{},"Bundlers default to assuming all files contain side effects unless explicitly overridden. The ",[18,114,115],{},"sideEffects"," field in ",[18,118,119],{},"package.json"," acts as a strict contract with the build system. Setting it to ",[18,122,81],{}," enables aggressive pruning across the entire dependency tree, but blanket declarations risk stripping critical runtime behaviors like CSS injection, polyfill registration, or global state initialization.",[14,125,126],{},[55,127,128],{},"Granular Configuration Strategy:",[130,131,136],"pre",{"className":132,"code":133,"language":134,"meta":135,"style":135},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"name\": \"@my-org\u002Fui-components\",\n \"version\": \"1.0.0\",\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\",\n \"src\u002Fpolyfills.js\",\n \"src\u002FsetupTests.js\"\n ]\n}\n","json","",[18,137,138,147,164,177,186,194,202,210,216,222],{"__ignoreMap":135},[139,140,143],"span",{"class":141,"line":142},"line",1,[139,144,146],{"class":145},"s3sCt","{\n",[139,148,150,154,157,161],{"class":141,"line":149},2,[139,151,153],{"class":152},"sj_b3"," \"name\"",[139,155,156],{"class":145},": ",[139,158,160],{"class":159},"sJdzJ","\"@my-org\u002Fui-components\"",[139,162,163],{"class":145},",\n",[139,165,167,170,172,175],{"class":141,"line":166},3,[139,168,169],{"class":152}," \"version\"",[139,171,156],{"class":145},[139,173,174],{"class":159},"\"1.0.0\"",[139,176,163],{"class":145},[139,178,180,183],{"class":141,"line":179},4,[139,181,182],{"class":152}," \"sideEffects\"",[139,184,185],{"class":145},": [\n",[139,187,189,192],{"class":141,"line":188},5,[139,190,191],{"class":159}," \"*.css\"",[139,193,163],{"class":145},[139,195,197,200],{"class":141,"line":196},6,[139,198,199],{"class":159}," \"*.scss\"",[139,201,163],{"class":145},[139,203,205,208],{"class":141,"line":204},7,[139,206,207],{"class":159}," \"src\u002Fpolyfills.js\"",[139,209,163],{"class":145},[139,211,213],{"class":141,"line":212},8,[139,214,215],{"class":159}," \"src\u002FsetupTests.js\"\n",[139,217,219],{"class":141,"line":218},9,[139,220,221],{"class":145}," ]\n",[139,223,225],{"class":141,"line":224},10,[139,226,227],{"class":145},"}\n",[14,229,230,233,234,236,237,240,241,243,244,247],{},[55,231,232],{},"Verification & Audit:"," Cross-reference ",[18,235,115],{}," declarations with actual runtime DOM mutations or global scope modifications. Run a staging deployment with ",[18,238,239],{},"sideEffects: false"," and monitor console warnings for missing styles or broken polyfills. Never apply blanket ",[18,242,81],{}," to legacy libraries without integration testing, as implicit side effects (e.g., ",[18,245,246],{},"window"," mutations, prototype extensions) will silently fail.",[29,249,251],{"id":250},"minifier-level-dead-code-elimination-terser-swc-esbuild","Minifier-Level Dead Code Elimination (Terser, SWC, ESBuild)",[14,253,254,255,258],{},"While tree shaking operates at the module boundary, DCE executes at the Abstract Syntax Tree (AST) level during minification. Minifiers analyze control flow graphs to eliminate dead branches, unused variables, and function calls explicitly marked as side-effect-free. The ",[18,256,257],{},"\u002F*#__PURE__*\u002F"," annotation is critical for signaling safe removal to minifiers; without it, minifiers conservatively retain function calls that might mutate external state.",[14,260,261],{},[55,262,263],{},"Configuration Thresholds:",[265,266,267,280],"ul",{},[62,268,269,272,273,276,277,27],{},[55,270,271],{},"Terser:"," Enable ",[18,274,275],{},"compress: { dead_code: true, unused: true, drop_console: true }"," and define ",[18,278,279],{},"pure_funcs: ['console.debug', 'console.info']",[62,281,282,285,286,92,289,292],{},[55,283,284],{},"ESBuild:"," Configure ",[18,287,288],{},"pure: ['console.log', 'debug']",[18,290,291],{},"drop: ['console', 'debugger']"," to strip debug calls at compile time.",[14,294,295,297,298,301,302,305,306,308,309,312,313,316,317,319],{},[55,296,57],{}," Compare pre-minified and post-minified AST node counts using ",[18,299,300],{},"astexplorer.net"," or bundler verbose logs (",[18,303,304],{},"--verbose","). ",[55,307,100],{}," A ",[18,310,311],{},">15%"," AST node reduction post-minification indicates successful DCE. If reduction falls below ",[18,314,315],{},"10%",", audit for missing ",[18,318,257],{}," annotations or overly conservative minifier settings.",[29,321,323],{"id":322},"diagnostic-workflows-bundle-visualization","Diagnostic Workflows & Bundle Visualization",[14,325,326],{},"Establish a repeatable audit pipeline to identify residual dead code before deployment.",[59,328,329,339,348,356],{},[62,330,331,332,335,336,27],{},"Generate bundle stats via ",[18,333,334],{},"webpack-bundle-analyzer"," or ",[18,337,338],{},"rollup-plugin-visualizer",[62,340,341,342,92,345,27],{},"Filter modules by ",[18,343,344],{},"isEntry: false",[18,346,347],{},"size: > 5KB",[62,349,350,351,92,353,355],{},"Cross-reference with ",[18,352,77],{},[18,354,115],{}," metadata to isolate false positives.",[62,357,358,359,362,363,366],{},"Validate against runtime usage via Chrome DevTools Coverage tab (",[18,360,361],{},"Ctrl+Shift+P"," → ",[18,364,365],{},"Show Coverage",").",[14,368,369,372,373,376,377,380,381,385,386,388],{},[55,370,371],{},"Thresholds & CI Enforcement:"," Flag any non-entry chunk with ",[18,374,375],{},">20%"," unused bytes. Enforce a strict CI budget of ",[18,378,379],{},"\u003C150KB"," for core vendor chunks. For advanced visualization techniques and metric interpretation, refer to ",[23,382,384],{"href":383},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F","Webpack Bundle Analysis Techniques",". Automate this pipeline using ",[18,387,334],{}," in CI mode to fail PRs that exceed defined byte budgets.",[29,390,392],{"id":391},"integration-with-dynamic-imports-route-based-splitting","Integration with Dynamic Imports & Route-Based Splitting",[14,394,395,396,399],{},"Tree shaking interacts directly with code splitting boundaries. When using ",[18,397,398],{},"import()"," syntax, bundlers generate separate chunks, but static analysis still applies within each chunk boundary. Unused dependencies leak across route boundaries when shared utilities are imported at the root level rather than isolated to route components.",[14,401,402],{},[55,403,404],{},"Implementation Guardrails:",[265,406,407,410,413,419],{},[62,408,409],{},"Isolate heavy dependencies to route-level components.",[62,411,412],{},"Avoid importing shared vendor modules in route chunks unless explicitly required.",[62,414,415,418],{},[55,416,417],{},"Diagnostic:"," Ensure each route chunk contains only route-specific dependencies, not shared vendor bloat.",[62,420,421,423,424,427,428,27],{},[55,422,100],{}," Route chunks should not exceed ",[18,425,426],{},"30%"," of total vendor size. For implementation patterns that align chunk boundaries with route transitions, see ",[23,429,431],{"href":430},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002F","Dynamic Imports and Route-Based Splitting",[29,433,435],{"id":434},"troubleshooting-legacy-libraries-commonjs-interop","Troubleshooting Legacy Libraries & CommonJS Interop",[14,437,438,439,92,442,445,446,449],{},"Popular libraries like ",[18,440,441],{},"lodash",[18,443,444],{},"moment.js"," resist tree shaking due to CommonJS dynamic exports, ",[18,447,448],{},"module.exports"," object mutation, and lack of static analysis compatibility. CJS evaluates at runtime, forcing bundlers to disable tree shaking for safety.",[14,451,452],{},[55,453,454],{},"Remediation Strategies:",[265,456,457,473,482],{},[62,458,459,460,462,463,466,467,39,470,27],{},"Replace ",[18,461,441],{}," with ",[18,464,465],{},"lodash-es"," or switch to ",[18,468,469],{},"date-fns",[18,471,472],{},"dayjs",[62,474,475,476,335,479,27],{},"Apply bundler-specific exclusions: ",[18,477,478],{},"webpack.IgnorePlugin",[18,480,481],{},"vite.optimizeDeps.exclude",[62,483,484,487,488,491,492,495,496,498,499,27],{},[55,485,486],{},"Workflow:"," Inspect ",[18,489,490],{},"stats.json"," for the ",[18,493,494],{},"reasons"," array, trace back to CJS entry points, and verify if ",[18,497,115],{}," is overridden incorrectly. For step-by-step resolution of these specific packages, consult ",[23,500,502],{"href":501},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002F","Fixing tree shaking issues with lodash and moment",[29,504,506],{"id":505},"css-asset-dead-code-elimination","CSS & Asset Dead Code Elimination",[14,508,509],{},"DCE principles extend to stylesheets and static assets. CSS-in-JS and CSS Modules enable static analysis, while global CSS requires explicit purging. Misconfigured purging strips dynamically generated class names, causing layout shifts in production.",[14,511,512],{},[55,513,514],{},"PurgeCSS Configuration:",[130,516,520],{"className":517,"code":518,"language":519,"meta":135,"style":135},"language-js shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F postcss.config.js\nmodule.exports = {\n plugins: [\n require('postcss-purgecss')({\n content: ['.\u002Fsrc\u002F**\u002F*.html', '.\u002Fsrc\u002F**\u002F*.js', '.\u002Fsrc\u002F**\u002F*.vue'],\n safelist: [\u002F^animate-\u002F, \u002F^tooltip-\u002F, 'html', 'body'],\n rejected: true \u002F\u002F Outputs audit log of removed selectors\n })\n ]\n}\n","js",[18,521,522,528,546,551,566,588,624,635,640,644],{"__ignoreMap":135},[139,523,524],{"class":141,"line":142},[139,525,527],{"class":526},"sXJMR","\u002F\u002F postcss.config.js\n",[139,529,530,534,536,539,543],{"class":141,"line":149},[139,531,533],{"class":532},"s5hCx","module",[139,535,27],{"class":145},[139,537,538],{"class":532},"exports",[139,540,542],{"class":541},"sCJTb"," =",[139,544,545],{"class":145}," {\n",[139,547,548],{"class":141,"line":166},[139,549,550],{"class":145}," plugins: [\n",[139,552,553,557,560,563],{"class":141,"line":179},[139,554,556],{"class":555},"sGhOu"," require",[139,558,559],{"class":145},"(",[139,561,562],{"class":159},"'postcss-purgecss'",[139,564,565],{"class":145},")({\n",[139,567,568,571,574,577,580,582,585],{"class":141,"line":188},[139,569,570],{"class":145}," content: [",[139,572,573],{"class":159},"'.\u002Fsrc\u002F**\u002F*.html'",[139,575,576],{"class":145},", ",[139,578,579],{"class":159},"'.\u002Fsrc\u002F**\u002F*.js'",[139,581,576],{"class":145},[139,583,584],{"class":159},"'.\u002Fsrc\u002F**\u002F*.vue'",[139,586,587],{"class":145},"],\n",[139,589,590,593,595,598,601,604,607,609,612,614,617,619,622],{"class":141,"line":196},[139,591,592],{"class":145}," safelist: [",[139,594,39],{"class":159},[139,596,597],{"class":541},"^",[139,599,600],{"class":159},"animate-\u002F",[139,602,603],{"class":145},",",[139,605,606],{"class":159}," \u002F",[139,608,597],{"class":541},[139,610,611],{"class":159},"tooltip-\u002F",[139,613,576],{"class":145},[139,615,616],{"class":159},"'html'",[139,618,576],{"class":145},[139,620,621],{"class":159},"'body'",[139,623,587],{"class":145},[139,625,626,629,632],{"class":141,"line":204},[139,627,628],{"class":145}," rejected: ",[139,630,631],{"class":532},"true",[139,633,634],{"class":526}," \u002F\u002F Outputs audit log of removed selectors\n",[139,636,637],{"class":141,"line":212},[139,638,639],{"class":145}," })\n",[139,641,642],{"class":141,"line":218},[139,643,221],{"class":145},[139,645,646],{"class":141,"line":224},[139,647,227],{"class":145},[14,649,650,652,653,656,657,659,660,663],{},[55,651,417],{}," Run ",[18,654,655],{},"npx purgecss --css dist\u002F*.css --content src\u002F**\u002F*.html --output dist\u002Fpurged.css"," and compare byte reduction. ",[55,658,100],{}," ",[18,661,662],{},">40%"," CSS reduction indicates successful purging. For advanced extraction strategies targeting render-blocking resources, review Optimizing critical CSS extraction for above-the-fold.",[29,665,667],{"id":666},"runtime-validation-performance-guardrails","Runtime Validation & Performance Guardrails",[14,669,670],{},"Build-time DCE reduces parse\u002Fcompile time and network transfer size, but runtime efficiency depends on execution patterns. Aggressive pruning must be paired with runtime optimization to achieve compounding performance gains.",[14,672,673],{},[55,674,675],{},"Validation Metrics:",[265,677,678,693,707],{},[62,679,680,681,684,685,688,689,692],{},"Target LCP ",[18,682,683],{},"\u003C 2.5s",", TBT ",[18,686,687],{},"\u003C 200ms",", and JS execution time reduction ",[18,690,691],{},">30%"," post-deployment.",[62,694,695,696,699,700,335,703,706],{},"Run ",[18,697,698],{},"lighthouse-ci"," on PRs. Fail if ",[18,701,702],{},"unused-javascript > 10KB",[18,704,705],{},"total-byte-weight"," exceeds budget.",[62,708,709],{},"Monitor Real User Monitoring (RUM) data to validate that reduced bundle size translates to faster Time to Interactive (TTI).",[14,711,712],{},"For complementary runtime strategies that reduce computational overhead after the bundle loads, explore Using memoization to reduce expensive calculations.",[714,715],"hr",{},[29,717,719],{"id":718},"production-configuration-reference","Production Configuration Reference",[721,722,724],"h3",{"id":723},"webpack-enable-used-exports-side-effects","Webpack: Enable Used Exports & Side Effects",[130,726,730],{"className":727,"code":728,"language":729,"meta":135,"style":135},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F webpack.config.js\nconst TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n mode: 'production',\n optimization: {\n usedExports: true,\n sideEffects: true,\n concatenateModules: true,\n minimize: true,\n minimizer: [\n new TerserPlugin({\n terserOptions: {\n compress: {\n dead_code: true,\n unused: true,\n drop_console: true,\n pure_funcs: ['console.debug', 'console.info']\n }\n }\n })\n ]\n }\n};\n","javascript",[18,731,732,737,757,763,775,785,790,799,808,817,826,832,843,849,855,865,875,885,902,908,913,918,923,928],{"__ignoreMap":135},[139,733,734],{"class":141,"line":142},[139,735,736],{"class":526},"\u002F\u002F webpack.config.js\n",[139,738,739,742,745,747,749,751,754],{"class":141,"line":149},[139,740,741],{"class":541},"const",[139,743,744],{"class":532}," TerserPlugin",[139,746,542],{"class":541},[139,748,556],{"class":555},[139,750,559],{"class":145},[139,752,753],{"class":159},"'terser-webpack-plugin'",[139,755,756],{"class":145},");\n",[139,758,759],{"class":141,"line":166},[139,760,762],{"emptyLinePlaceholder":761},true,"\n",[139,764,765,767,769,771,773],{"class":141,"line":179},[139,766,533],{"class":532},[139,768,27],{"class":145},[139,770,538],{"class":532},[139,772,542],{"class":541},[139,774,545],{"class":145},[139,776,777,780,783],{"class":141,"line":188},[139,778,779],{"class":145}," mode: ",[139,781,782],{"class":159},"'production'",[139,784,163],{"class":145},[139,786,787],{"class":141,"line":196},[139,788,789],{"class":145}," optimization: {\n",[139,791,792,795,797],{"class":141,"line":204},[139,793,794],{"class":145}," usedExports: ",[139,796,631],{"class":532},[139,798,163],{"class":145},[139,800,801,804,806],{"class":141,"line":212},[139,802,803],{"class":145}," sideEffects: ",[139,805,631],{"class":532},[139,807,163],{"class":145},[139,809,810,813,815],{"class":141,"line":218},[139,811,812],{"class":145}," concatenateModules: ",[139,814,631],{"class":532},[139,816,163],{"class":145},[139,818,819,822,824],{"class":141,"line":224},[139,820,821],{"class":145}," minimize: ",[139,823,631],{"class":532},[139,825,163],{"class":145},[139,827,829],{"class":141,"line":828},11,[139,830,831],{"class":145}," minimizer: [\n",[139,833,835,838,840],{"class":141,"line":834},12,[139,836,837],{"class":541}," new",[139,839,744],{"class":555},[139,841,842],{"class":145},"({\n",[139,844,846],{"class":141,"line":845},13,[139,847,848],{"class":145}," terserOptions: {\n",[139,850,852],{"class":141,"line":851},14,[139,853,854],{"class":145}," compress: {\n",[139,856,858,861,863],{"class":141,"line":857},15,[139,859,860],{"class":145}," dead_code: ",[139,862,631],{"class":532},[139,864,163],{"class":145},[139,866,868,871,873],{"class":141,"line":867},16,[139,869,870],{"class":145}," unused: ",[139,872,631],{"class":532},[139,874,163],{"class":145},[139,876,878,881,883],{"class":141,"line":877},17,[139,879,880],{"class":145}," drop_console: ",[139,882,631],{"class":532},[139,884,163],{"class":145},[139,886,888,891,894,896,899],{"class":141,"line":887},18,[139,889,890],{"class":145}," pure_funcs: [",[139,892,893],{"class":159},"'console.debug'",[139,895,576],{"class":145},[139,897,898],{"class":159},"'console.info'",[139,900,901],{"class":145},"]\n",[139,903,905],{"class":141,"line":904},19,[139,906,907],{"class":145}," }\n",[139,909,911],{"class":141,"line":910},20,[139,912,907],{"class":145},[139,914,916],{"class":141,"line":915},21,[139,917,639],{"class":145},[139,919,921],{"class":141,"line":920},22,[139,922,221],{"class":145},[139,924,926],{"class":141,"line":925},23,[139,927,907],{"class":145},[139,929,931],{"class":141,"line":930},24,[139,932,933],{"class":145},"};\n",[721,935,937],{"id":936},"vite-esbuild-pure-functions-tree-shaking","Vite: ESBuild Pure Functions & Tree Shaking",[130,939,941],{"className":727,"code":940,"language":729,"meta":135,"style":135},"\u002F\u002F vite.config.js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n build: {\n target: 'esnext',\n minify: 'esbuild',\n rollupOptions: {\n output: {\n manualChunks: (id) => {\n if (id.includes('node_modules')) return 'vendor';\n }\n }\n }\n },\n esbuild: {\n pure: ['console.log', 'console.warn', 'debug'],\n drop: ['console', 'debugger']\n }\n});\n",[18,942,943,948,964,968,981,986,996,1006,1011,1016,1035,1062,1066,1070,1074,1081,1086,1106,1121,1125],{"__ignoreMap":135},[139,944,945],{"class":141,"line":142},[139,946,947],{"class":526},"\u002F\u002F vite.config.js\n",[139,949,950,952,955,958,961],{"class":141,"line":149},[139,951,38],{"class":541},[139,953,954],{"class":145}," { defineConfig } ",[139,956,957],{"class":541},"from",[139,959,960],{"class":159}," 'vite'",[139,962,963],{"class":145},";\n",[139,965,966],{"class":141,"line":166},[139,967,762],{"emptyLinePlaceholder":761},[139,969,970,972,975,978],{"class":141,"line":179},[139,971,42],{"class":541},[139,973,974],{"class":541}," default",[139,976,977],{"class":555}," defineConfig",[139,979,842],{"class":980},"spFnL",[139,982,983],{"class":141,"line":188},[139,984,985],{"class":145}," build: {\n",[139,987,988,991,994],{"class":141,"line":196},[139,989,990],{"class":145}," target: ",[139,992,993],{"class":159},"'esnext'",[139,995,163],{"class":145},[139,997,998,1001,1004],{"class":141,"line":204},[139,999,1000],{"class":145}," minify: ",[139,1002,1003],{"class":159},"'esbuild'",[139,1005,163],{"class":145},[139,1007,1008],{"class":141,"line":212},[139,1009,1010],{"class":145}," rollupOptions: {\n",[139,1012,1013],{"class":141,"line":218},[139,1014,1015],{"class":145}," output: {\n",[139,1017,1018,1021,1024,1027,1030,1033],{"class":141,"line":224},[139,1019,1020],{"class":555}," manualChunks",[139,1022,1023],{"class":145},": (",[139,1025,1026],{"class":980},"id",[139,1028,1029],{"class":145},") ",[139,1031,1032],{"class":541},"=>",[139,1034,545],{"class":145},[139,1036,1037,1040,1043,1046,1048,1051,1054,1057,1060],{"class":141,"line":828},[139,1038,1039],{"class":541}," if",[139,1041,1042],{"class":145}," (id.",[139,1044,1045],{"class":555},"includes",[139,1047,559],{"class":145},[139,1049,1050],{"class":159},"'node_modules'",[139,1052,1053],{"class":145},")) ",[139,1055,1056],{"class":541},"return",[139,1058,1059],{"class":159}," 'vendor'",[139,1061,963],{"class":145},[139,1063,1064],{"class":141,"line":834},[139,1065,907],{"class":145},[139,1067,1068],{"class":141,"line":845},[139,1069,907],{"class":145},[139,1071,1072],{"class":141,"line":851},[139,1073,907],{"class":145},[139,1075,1076,1079],{"class":141,"line":857},[139,1077,1078],{"class":145}," }",[139,1080,163],{"class":980},[139,1082,1083],{"class":141,"line":867},[139,1084,1085],{"class":145}," esbuild: {\n",[139,1087,1088,1091,1094,1096,1099,1101,1104],{"class":141,"line":877},[139,1089,1090],{"class":145}," pure: [",[139,1092,1093],{"class":159},"'console.log'",[139,1095,576],{"class":145},[139,1097,1098],{"class":159},"'console.warn'",[139,1100,576],{"class":145},[139,1102,1103],{"class":159},"'debug'",[139,1105,587],{"class":145},[139,1107,1108,1111,1114,1116,1119],{"class":141,"line":887},[139,1109,1110],{"class":145}," drop: [",[139,1112,1113],{"class":159},"'console'",[139,1115,576],{"class":145},[139,1117,1118],{"class":159},"'debugger'",[139,1120,901],{"class":145},[139,1122,1123],{"class":141,"line":904},[139,1124,907],{"class":145},[139,1126,1127,1130],{"class":141,"line":910},[139,1128,1129],{"class":980},"})",[139,1131,963],{"class":145},[721,1133,1135],{"id":1134},"rollup-advanced-treeshake-configuration","Rollup: Advanced Treeshake Configuration",[130,1137,1139],{"className":727,"code":1138,"language":729,"meta":135,"style":135},"\u002F\u002F rollup.config.js\nexport default {\n input: 'src\u002Fmain.js',\n output: { file: 'dist\u002Fbundle.js', format: 'es' },\n treeshake: {\n moduleSideEffects: 'no-external',\n propertyReadSideEffects: false,\n tryCatchDeoptimization: false,\n pureExternalModules: true\n }\n};\n",[18,1140,1141,1146,1154,1164,1182,1187,1197,1206,1215,1223,1227],{"__ignoreMap":135},[139,1142,1143],{"class":141,"line":142},[139,1144,1145],{"class":526},"\u002F\u002F rollup.config.js\n",[139,1147,1148,1150,1152],{"class":141,"line":149},[139,1149,42],{"class":541},[139,1151,974],{"class":541},[139,1153,545],{"class":980},[139,1155,1156,1159,1162],{"class":141,"line":166},[139,1157,1158],{"class":145}," input: ",[139,1160,1161],{"class":159},"'src\u002Fmain.js'",[139,1163,163],{"class":980},[139,1165,1166,1169,1172,1175,1178,1180],{"class":141,"line":179},[139,1167,1168],{"class":145}," output: { file: ",[139,1170,1171],{"class":159},"'dist\u002Fbundle.js'",[139,1173,1174],{"class":145},", format: ",[139,1176,1177],{"class":159},"'es'",[139,1179,1078],{"class":145},[139,1181,163],{"class":980},[139,1183,1184],{"class":141,"line":188},[139,1185,1186],{"class":145}," treeshake: {\n",[139,1188,1189,1192,1195],{"class":141,"line":196},[139,1190,1191],{"class":145}," moduleSideEffects: ",[139,1193,1194],{"class":159},"'no-external'",[139,1196,163],{"class":145},[139,1198,1199,1202,1204],{"class":141,"line":204},[139,1200,1201],{"class":145}," propertyReadSideEffects: ",[139,1203,81],{"class":532},[139,1205,163],{"class":145},[139,1207,1208,1211,1213],{"class":141,"line":212},[139,1209,1210],{"class":145}," tryCatchDeoptimization: ",[139,1212,81],{"class":532},[139,1214,163],{"class":145},[139,1216,1217,1220],{"class":141,"line":218},[139,1218,1219],{"class":145}," pureExternalModules: ",[139,1221,1222],{"class":532},"true\n",[139,1224,1225],{"class":141,"line":224},[139,1226,907],{"class":145},[139,1228,1229,1232],{"class":141,"line":828},[139,1230,1231],{"class":980},"}",[139,1233,963],{"class":145},[714,1235],{},[29,1237,1239],{"id":1238},"common-implementation-mistakes","Common Implementation Mistakes",[265,1241,1242,1249,1255,1263,1269,1272],{},[62,1243,1244,1245,1248],{},"Importing entire namespaces (e.g., ",[18,1246,1247],{},"import * as _ from 'lodash'",") instead of named exports, which breaks static analysis.",[62,1250,1251,1252,1254],{},"Setting ",[18,1253,239],{}," globally without auditing CSS, polyfills, or global registry mutations, causing silent runtime failures.",[62,1256,1257,1258,335,1260,1262],{},"Relying solely on minifier DCE without enabling ",[18,1259,77],{},[18,1261,115],{},", leaving unused modules in the graph.",[62,1264,1265,1266,1268],{},"Ignoring ",[18,1267,257],{}," annotations in custom utility libraries, preventing minifiers from safely removing unused function calls.",[62,1270,1271],{},"Mixing CommonJS and ESM in the same dependency chain, forcing bundlers to disable tree shaking for safety.",[62,1273,1274],{},"Failing to purge dynamically generated class names in CSS, resulting in false-positive removal of critical styles.",[714,1276],{},[29,1278,1280],{"id":1279},"frequently-asked-questions","Frequently Asked Questions",[14,1282,1283,1286,1287,39,1289,1291,1292,1294,1295,1297,1298,335,1300,1303,1304,1306,1307,1309],{},[55,1284,1285],{},"Why does my bundle still contain unused code after enabling tree shaking?","\nTree shaking requires strict ESM compliance. Verify that all dependencies use ",[18,1288,38],{},[18,1290,42],{},", check ",[18,1293,119],{}," for correct ",[18,1296,115],{}," declarations, and ensure your bundler's ",[18,1299,77],{},[18,1301,1302],{},"treeshake"," options are enabled. Use ",[18,1305,490],{}," to trace unused modules and confirm they aren't referenced via dynamic ",[18,1308,46],{}," or side-effectful imports.",[14,1311,1312,1315,1316,1319,1320,1323,1324,1327,1328,1331,1332,1335],{},[55,1313,1314],{},"How do I safely remove console logs without breaking production?","\nUse minifier-level DCE flags like ",[18,1317,1318],{},"drop_console: true"," (Terser) or ",[18,1321,1322],{},"drop: ['console']"," (ESBuild). These operate at the AST level and only remove calls when ",[18,1325,1326],{},"compress"," is active. Always test in staging, as some libraries rely on ",[18,1329,1330],{},"console"," for feature detection. For critical logs, wrap them in ",[18,1333,1334],{},"if (process.env.NODE_ENV !== 'production')"," blocks.",[14,1337,1338,1341],{},[55,1339,1340],{},"Can tree shaking work with CSS-in-JS libraries?","\nYes, if the library uses static analysis-friendly patterns. Styled-components and Emotion generate unique class names at runtime, making traditional CSS purging difficult. Use bundler plugins that extract critical styles or switch to CSS Modules\u002FTailwind for static class generation. Always validate with a coverage audit before deploying aggressive CSS DCE.",[14,1343,1344,1347,1348,1350],{},[55,1345,1346],{},"What is the performance impact of aggressive dead code elimination?","\nAggressive DCE reduces parse\u002Fcompile time, lowers memory footprint, and decreases network transfer size. However, over-purging can cause runtime errors if side effects are incorrectly marked as safe. Aim for a balance: target ",[18,1349,20],{}," unused code, enforce bundle budgets in CI, and monitor LCP\u002FTBT metrics post-deployment to validate real-world gains.",[1352,1353,1354],"style",{},"html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}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 .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":135,"searchDepth":149,"depth":149,"links":1356},[1357,1358,1359,1360,1361,1362,1363,1364,1365,1370,1371],{"id":31,"depth":149,"text":32},{"id":108,"depth":149,"text":109},{"id":250,"depth":149,"text":251},{"id":322,"depth":149,"text":323},{"id":391,"depth":149,"text":392},{"id":434,"depth":149,"text":435},{"id":505,"depth":149,"text":506},{"id":666,"depth":149,"text":667},{"id":718,"depth":149,"text":719,"children":1366},[1367,1368,1369],{"id":723,"depth":166,"text":724},{"id":936,"depth":166,"text":937},{"id":1134,"depth":166,"text":1135},{"id":1238,"depth":149,"text":1239},{"id":1279,"depth":149,"text":1280},"Modern build pipelines rely heavily on static analysis to strip unreachable code before deployment. Tree shaking and dead code elimination (DCE) operate at distinct phases: tree shaking resolves unused exports at the module graph level, while DCE executes during minification to remove unreachable branches, unused variables, and side-effect-free function calls. For performance-conscious engineering teams, achieving a production bundle with \u003C5% unused code requires precise configuration, explicit side-effect declarations, and rigorous diagnostic workflows. This guide bridges the gap between theoretical bundler behavior and production-ready implementation, providing actionable thresholds, diagnostic pipelines, and bundler-agnostic configurations. For a broader architectural overview of how these techniques fit into larger performance strategies, see JavaScript Bundle Optimization & Code Splitting.","md",{},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination",{"title":5,"description":1372},"javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Findex","SCO-8lqNuoY6x1aXFpDSUb9y1PDMJTRh53cuQ8eYGl8",[1380,1384],{"title":1381,"path":1382,"stem":1383,"children":-1},"Deferring Non-Critical Analytics Scripts Safely: A Diagnostic & Implementation Guide","\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Fdeferring-non-critical-analytics-scripts-safely","javascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Fdeferring-non-critical-analytics-scripts-safely\u002Findex",{"title":502,"path":1385,"stem":1386,"children":-1},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment","javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002Findex",1777925997721]