[{"data":1,"prerenderedAt":6274},["ShallowReactive",2],{"home-sections":3,"home-latest-articles":158},[4,48,102],{"title":5,"path":6,"stem":7,"children":8,"page":-1},"Advanced Caching Strategies Cdn Architecture","\u002Fadvanced-caching-strategies-cdn-architecture","advanced-caching-strategies-cdn-architecture",[9,12,18,30,42],{"title":10,"path":6,"stem":11},"Advanced Caching Strategies & CDN Architecture","advanced-caching-strategies-cdn-architecture\u002Findex",{"title":13,"path":14,"stem":15,"children":16},"CDN Edge Caching Configuration: Frontend Asset Delivery & Performance Tuning","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration","advanced-caching-strategies-cdn-architecture\u002Fcdn-edge-caching-configuration\u002Findex",[17],{"title":13,"path":14,"stem":15},{"title":19,"path":20,"stem":21,"children":22},"HTTP Cache-Control Headers Explained","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained","advanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Findex",[23,24],{"title":19,"path":20,"stem":21},{"title":25,"path":26,"stem":27,"children":28},"Setting up immutable cache headers for hashed assets","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Fsetting-up-immutable-cache-headers-for-hashed-assets","advanced-caching-strategies-cdn-architecture\u002Fhttp-cache-control-headers-explained\u002Fsetting-up-immutable-cache-headers-for-hashed-assets\u002Findex",[29],{"title":25,"path":26,"stem":27},{"title":31,"path":32,"stem":33,"children":34,"page":-1},"Service Worker Caching Strategies: Implementation, Diagnostics & Thresholds","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies","advanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002Findex",[35,36],{"title":31,"path":32,"stem":33},{"title":37,"path":38,"stem":39,"children":40},"Debugging Service Worker Cache Misses in Production","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002Fdebugging-service-worker-cache-misses-in-production","advanced-caching-strategies-cdn-architecture\u002Fservice-worker-caching-strategies\u002Fdebugging-service-worker-cache-misses-in-production\u002Findex",[41],{"title":37,"path":38,"stem":39},{"title":43,"path":44,"stem":45,"children":46},"Stale-While-Revalidate Implementation: A Production Blueprint for Frontend Performance","\u002Fadvanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation","advanced-caching-strategies-cdn-architecture\u002Fstale-while-revalidate-implementation\u002Findex",[47],{"title":43,"path":44,"stem":45},{"title":49,"path":50,"stem":51,"children":52},"Core Web Vitals & Measurement: Metric-Driven Architecture for Production","\u002Fcore-web-vitals-measurement","core-web-vitals-measurement\u002Findex",[53,54,66,78,90],{"title":49,"path":50,"stem":51},{"title":55,"path":56,"stem":57,"children":58,"page":-1},"Measuring LCP with Chrome DevTools: A Diagnostic Workflow for Frontend Engineers","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Findex",[59,60],{"title":55,"path":56,"stem":57},{"title":61,"path":62,"stem":63,"children":64},"How to fix LCP over 2.5 seconds on React apps","\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fhow-to-fix-lcp-over-25-seconds-on-react-apps","core-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fhow-to-fix-lcp-over-25-seconds-on-react-apps\u002Findex",[65],{"title":61,"path":62,"stem":63},{"title":67,"path":68,"stem":69,"children":70,"page":-1},"Optimizing First Input Delay (FID): Engineering Strategies for Sub-100ms Responsiveness","\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid","core-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Findex",[71,72],{"title":67,"path":68,"stem":69},{"title":73,"path":74,"stem":75,"children":76},"Improving INP for Complex Single Page Applications","\u002Fcore-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Fimproving-inp-for-complex-single-page-applications","core-web-vitals-measurement\u002Foptimizing-first-input-delay-fid\u002Fimproving-inp-for-complex-single-page-applications\u002Findex",[77],{"title":73,"path":74,"stem":75},{"title":79,"path":80,"stem":81,"children":82,"page":-1},"Reducing Cumulative Layout Shift (CLS)","\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls","core-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Findex",[83,84],{"title":79,"path":80,"stem":81},{"title":85,"path":86,"stem":87,"children":88},"Debugging CLS caused by dynamic ad injection","\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Fdebugging-cls-caused-by-dynamic-ad-injection","core-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Fdebugging-cls-caused-by-dynamic-ad-injection\u002Findex",[89],{"title":85,"path":86,"stem":87},{"title":91,"path":92,"stem":93,"children":94,"page":-1},"Understanding Core Web Vitals Thresholds","\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds","core-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Findex",[95,96],{"title":91,"path":92,"stem":93},{"title":97,"path":98,"stem":99,"children":100},"Best Lighthouse CI setup for frontend pipelines","\u002Fcore-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Fbest-lighthouse-ci-setup-for-frontend-pipelines","core-web-vitals-measurement\u002Funderstanding-core-web-vitals-thresholds\u002Fbest-lighthouse-ci-setup-for-frontend-pipelines\u002Findex",[101],{"title":97,"path":98,"stem":99},{"title":103,"path":104,"stem":105,"children":106,"page":-1},"Javascript Bundle Optimization Code Splitting","\u002Fjavascript-bundle-optimization-code-splitting","javascript-bundle-optimization-code-splitting",[107,110,122,134,146],{"title":108,"path":104,"stem":109},"JavaScript Bundle Optimization & Code Splitting","javascript-bundle-optimization-code-splitting\u002Findex",{"title":111,"path":112,"stem":113,"children":114,"page":-1},"Dynamic Imports and Route-Based Splitting: Implementation Guide & Performance Thresholds","\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting","javascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002Findex",[115,116],{"title":111,"path":112,"stem":113},{"title":117,"path":118,"stem":119,"children":120},"Implementing Route-Level Code Splitting in Next.js: Diagnostic & Configuration Guide","\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002Fimplementing-route-level-code-splitting-in-nextjs","javascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002Fimplementing-route-level-code-splitting-in-nextjs\u002Findex",[121],{"title":117,"path":118,"stem":119},{"title":123,"path":124,"stem":125,"children":126,"page":-1},"Modern Module Formats: ESM vs CommonJS","\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs","javascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Findex",[127,128],{"title":123,"path":124,"stem":125},{"title":129,"path":130,"stem":131,"children":132},"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",[133],{"title":129,"path":130,"stem":131},{"title":135,"path":136,"stem":137,"children":138,"page":-1},"Tree Shaking and Dead Code Elimination: Advanced Implementation & Diagnostics","\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination","javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Findex",[139,140],{"title":135,"path":136,"stem":137},{"title":141,"path":142,"stem":143,"children":144},"Fixing tree shaking issues with lodash and moment","\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",[145],{"title":141,"path":142,"stem":143},{"title":147,"path":148,"stem":149,"children":150,"page":-1},"Webpack Bundle Analysis Techniques: Diagnostic Workflows & Threshold Optimization","\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Findex",[151,152],{"title":147,"path":148,"stem":149},{"title":153,"path":154,"stem":155,"children":156},"How to configure webpack-bundle-analyzer for production","\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002Findex",[157],{"title":153,"path":154,"stem":155},[159,1535,2480,3724,4674,5496],{"id":160,"title":147,"body":161,"description":1528,"extension":1529,"meta":1530,"navigation":351,"path":148,"seo":1531,"stem":149,"__hash__":1534},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Findex.md",{"type":162,"value":163,"toc":1519},"minimark",[164,168,183,188,191,225,228,251,262,266,277,299,658,723,727,730,737,775,779,796,811,1365,1369,1383,1393,1396,1400,1459,1463,1469,1475,1484,1515],[165,166,147],"h1",{"id":167},"webpack-bundle-analysis-techniques-diagnostic-workflows-threshold-optimization",[169,170,171,172,177,178,182],"p",{},"Modern frontend architectures demand precise visibility into JavaScript payload composition. Without systematic ",[173,174,176],"a",{"href":175},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F","Webpack Bundle Analysis Techniques",", teams risk shipping bloated initial chunks, overlapping vendor dependencies, and undetected dead code. This guide provides a diagnostic-first approach to analyzing Webpack 5 outputs, establishing strict size budgets, and integrating automated regression checks into CI\u002FCD pipelines. You will learn how to generate actionable ",[179,180,181],"code",{},"stats.json"," artifacts, configure visualization plugins for production builds, interpret module dependency graphs, and enforce explicit performance thresholds that align with Core Web Vitals targets.",[184,185,187],"h2",{"id":186},"establishing-baseline-metrics-and-analysis-prerequisites","Establishing Baseline Metrics and Analysis Prerequisites",[169,189,190],{},"Before deploying visualization tools, establish quantitative baselines that reflect real-world network conditions. Raw bundle size is fundamentally misleading for modern delivery pipelines; always measure against Brotli-compressed payloads, which typically achieve 30–40% better compression ratios than gzip. Set strict, enforceable thresholds: initial entry points should not exceed 150KB (Brotli), route-based chunks must remain under 50KB, and vendor bundles should be capped at 200KB. These limits directly correlate with keeping Time to Interactive (TTI) under 3.5s on mid-tier mobile devices.",[169,192,193,194,197,198,201,202,205,206,209,210,213,214,217,218,221,222,224],{},"Configure the ",[179,195,196],{},"stats"," object in ",[179,199,200],{},"webpack.config.js"," to output granular module resolution data without inflating build times or memory consumption. Enable ",[179,203,204],{},"modules: true",", ",[179,207,208],{},"chunks: true",", and ",[179,211,212],{},"assets: true"," while explicitly disabling verbose ",[179,215,216],{},"children"," and ",[179,219,220],{},"moduleTrace"," fields. This configuration keeps the resulting ",[179,223,181],{}," artifact under 5MB, preventing memory exhaustion during CI runs and ensuring downstream analysis tools parse efficiently.",[169,226,227],{},"Understanding the distinction between size types is critical for accurate diagnostics:",[229,230,231,239,245],"ul",{},[232,233,234,238],"li",{},[235,236,237],"strong",{},"Raw Size:"," Useful only for debugging module resolution paths and identifying unminified code leaks.",[232,240,241,244],{},[235,242,243],{},"Minified Size:"," Correlates directly with JavaScript parse and compile time on the main thread.",[232,246,247,250],{},[235,248,249],{},"Gzip\u002FBrotli Size:"," Represents actual network transfer cost and dictates initial load latency.",[169,252,253,254,257,258,261],{},"Isolate your analysis environment by running builds against a clean ",[179,255,256],{},"dist\u002F"," directory. Dev-server caching, hot module replacement (HMR) wrappers, and inline source maps artificially inflate payloads and corrupt baseline metrics. Always execute analysis commands against ",[179,259,260],{},"mode: 'production'"," outputs to capture deterministic, deployment-ready artifacts.",[184,263,265],{"id":264},"core-tooling-configuration-for-production-analysis","Core Tooling Configuration for Production Analysis",[169,267,268,269,272,273,276],{},"Production analysis requires deterministic, non-blocking tooling that integrates seamlessly into existing build pipelines. The ",[179,270,271],{},"webpack-bundle-analyzer"," plugin should never execute in development mode due to its synchronous asset parsing overhead and memory footprint. Inject it conditionally using environment variables or the ",[179,274,275],{},"--env analyze"," CLI flag to ensure zero impact on local iteration velocity.",[169,278,279,280,283,284,286,287,290,291,294,295,298],{},"Set ",[179,281,282],{},"analyzerMode: 'static'"," to generate portable HTML reports that can be archived alongside build artifacts or attached to pull requests. Pair this with the built-in ",[179,285,181],{}," generation to output a normalized JSON payload compatible with CI size-checking scripts. In headless environments, explicitly configure ",[179,288,289],{},"openAnalyzer: false"," and define a deterministic ",[179,292,293],{},"reportFilename"," that includes build hashes or commit SHAs for traceability. For detailed setup steps, refer to ",[173,296,153],{"href":297},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002F",".",[300,301,306],"pre",{"className":302,"code":303,"language":304,"meta":305,"style":305},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F webpack.config.js\nconst BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;\n\nmodule.exports = (env) => {\n  const plugins = [];\n\n  if (env && env.ANALYZE) {\n    plugins.push(\n      new BundleAnalyzerPlugin({\n        analyzerMode: 'static',\n        openAnalyzer: false,\n        reportFilename: `bundle-report-${Date.now()}.html`,\n        generateStatsFile: true,\n        statsFilename: 'stats.json',\n        defaultSizes: 'parsed' \u002F\u002F Aligns with parse-time metrics\n      })\n    );\n  }\n\n  return {\n    mode: 'production',\n    stats: {\n      assets: true,\n      chunks: true,\n      modules: true,\n      children: false,\n      moduleTrace: false,\n      source: false\n    },\n    plugins\n  };\n};\n","javascript","",[179,307,308,317,346,353,382,396,401,422,434,445,457,468,493,504,515,527,533,539,545,550,558,569,575,585,595,605,615,625,634,640,646,652],{"__ignoreMap":305},[309,310,313],"span",{"class":311,"line":312},"line",1,[309,314,316],{"class":315},"sXJMR","\u002F\u002F webpack.config.js\n",[309,318,320,324,328,331,335,339,343],{"class":311,"line":319},2,[309,321,323],{"class":322},"sCJTb","const",[309,325,327],{"class":326},"s5hCx"," BundleAnalyzerPlugin",[309,329,330],{"class":322}," =",[309,332,334],{"class":333},"sGhOu"," require",[309,336,338],{"class":337},"s3sCt","(",[309,340,342],{"class":341},"sJdzJ","'webpack-bundle-analyzer'",[309,344,345],{"class":337},").BundleAnalyzerPlugin;\n",[309,347,349],{"class":311,"line":348},3,[309,350,352],{"emptyLinePlaceholder":351},true,"\n",[309,354,356,359,361,364,366,369,373,376,379],{"class":311,"line":355},4,[309,357,358],{"class":326},"module",[309,360,298],{"class":337},[309,362,363],{"class":326},"exports",[309,365,330],{"class":322},[309,367,368],{"class":337}," (",[309,370,372],{"class":371},"spFnL","env",[309,374,375],{"class":337},") ",[309,377,378],{"class":322},"=>",[309,380,381],{"class":337}," {\n",[309,383,385,388,391,393],{"class":311,"line":384},5,[309,386,387],{"class":322},"  const",[309,389,390],{"class":326}," plugins",[309,392,330],{"class":322},[309,394,395],{"class":337}," [];\n",[309,397,399],{"class":311,"line":398},6,[309,400,352],{"emptyLinePlaceholder":351},[309,402,404,407,410,413,416,419],{"class":311,"line":403},7,[309,405,406],{"class":322},"  if",[309,408,409],{"class":337}," (env ",[309,411,412],{"class":322},"&&",[309,414,415],{"class":337}," env.",[309,417,418],{"class":326},"ANALYZE",[309,420,421],{"class":337},") {\n",[309,423,425,428,431],{"class":311,"line":424},8,[309,426,427],{"class":337},"    plugins.",[309,429,430],{"class":333},"push",[309,432,433],{"class":337},"(\n",[309,435,437,440,442],{"class":311,"line":436},9,[309,438,439],{"class":322},"      new",[309,441,327],{"class":333},[309,443,444],{"class":337},"({\n",[309,446,448,451,454],{"class":311,"line":447},10,[309,449,450],{"class":337},"        analyzerMode: ",[309,452,453],{"class":341},"'static'",[309,455,456],{"class":337},",\n",[309,458,460,463,466],{"class":311,"line":459},11,[309,461,462],{"class":337},"        openAnalyzer: ",[309,464,465],{"class":326},"false",[309,467,456],{"class":337},[309,469,471,474,477,480,482,485,488,491],{"class":311,"line":470},12,[309,472,473],{"class":337},"        reportFilename: ",[309,475,476],{"class":341},"`bundle-report-${",[309,478,479],{"class":337},"Date",[309,481,298],{"class":341},[309,483,484],{"class":333},"now",[309,486,487],{"class":341},"()",[309,489,490],{"class":341},"}.html`",[309,492,456],{"class":337},[309,494,496,499,502],{"class":311,"line":495},13,[309,497,498],{"class":337},"        generateStatsFile: ",[309,500,501],{"class":326},"true",[309,503,456],{"class":337},[309,505,507,510,513],{"class":311,"line":506},14,[309,508,509],{"class":337},"        statsFilename: ",[309,511,512],{"class":341},"'stats.json'",[309,514,456],{"class":337},[309,516,518,521,524],{"class":311,"line":517},15,[309,519,520],{"class":337},"        defaultSizes: ",[309,522,523],{"class":341},"'parsed'",[309,525,526],{"class":315}," \u002F\u002F Aligns with parse-time metrics\n",[309,528,530],{"class":311,"line":529},16,[309,531,532],{"class":337},"      })\n",[309,534,536],{"class":311,"line":535},17,[309,537,538],{"class":337},"    );\n",[309,540,542],{"class":311,"line":541},18,[309,543,544],{"class":337},"  }\n",[309,546,548],{"class":311,"line":547},19,[309,549,352],{"emptyLinePlaceholder":351},[309,551,553,556],{"class":311,"line":552},20,[309,554,555],{"class":322},"  return",[309,557,381],{"class":337},[309,559,561,564,567],{"class":311,"line":560},21,[309,562,563],{"class":337},"    mode: ",[309,565,566],{"class":341},"'production'",[309,568,456],{"class":337},[309,570,572],{"class":311,"line":571},22,[309,573,574],{"class":337},"    stats: {\n",[309,576,578,581,583],{"class":311,"line":577},23,[309,579,580],{"class":337},"      assets: ",[309,582,501],{"class":326},[309,584,456],{"class":337},[309,586,588,591,593],{"class":311,"line":587},24,[309,589,590],{"class":337},"      chunks: ",[309,592,501],{"class":326},[309,594,456],{"class":337},[309,596,598,601,603],{"class":311,"line":597},25,[309,599,600],{"class":337},"      modules: ",[309,602,501],{"class":326},[309,604,456],{"class":337},[309,606,608,611,613],{"class":311,"line":607},26,[309,609,610],{"class":337},"      children: ",[309,612,465],{"class":326},[309,614,456],{"class":337},[309,616,618,621,623],{"class":311,"line":617},27,[309,619,620],{"class":337},"      moduleTrace: ",[309,622,465],{"class":326},[309,624,456],{"class":337},[309,626,628,631],{"class":311,"line":627},28,[309,629,630],{"class":337},"      source: ",[309,632,633],{"class":326},"false\n",[309,635,637],{"class":311,"line":636},29,[309,638,639],{"class":337},"    },\n",[309,641,643],{"class":311,"line":642},30,[309,644,645],{"class":337},"    plugins\n",[309,647,649],{"class":311,"line":648},31,[309,650,651],{"class":337},"  };\n",[309,653,655],{"class":311,"line":654},32,[309,656,657],{"class":337},"};\n",[300,659,663],{"className":660,"code":661,"language":662,"meta":305,"style":305},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n  \"scripts\": {\n    \"build\": \"webpack --config webpack.config.js\",\n    \"analyze\": \"webpack --config webpack.config.js --env ANALYZE=true\",\n    \"check-budget\": \"node scripts\u002Fcheck-bundle-budget.mjs\"\n  }\n}\n","json",[179,664,665,670,679,692,704,714,718],{"__ignoreMap":305},[309,666,667],{"class":311,"line":312},[309,668,669],{"class":337},"{\n",[309,671,672,676],{"class":311,"line":319},[309,673,675],{"class":674},"sj_b3","  \"scripts\"",[309,677,678],{"class":337},": {\n",[309,680,681,684,687,690],{"class":311,"line":348},[309,682,683],{"class":674},"    \"build\"",[309,685,686],{"class":337},": ",[309,688,689],{"class":341},"\"webpack --config webpack.config.js\"",[309,691,456],{"class":337},[309,693,694,697,699,702],{"class":311,"line":355},[309,695,696],{"class":674},"    \"analyze\"",[309,698,686],{"class":337},[309,700,701],{"class":341},"\"webpack --config webpack.config.js --env ANALYZE=true\"",[309,703,456],{"class":337},[309,705,706,709,711],{"class":311,"line":384},[309,707,708],{"class":674},"    \"check-budget\"",[309,710,686],{"class":337},[309,712,713],{"class":341},"\"node scripts\u002Fcheck-bundle-budget.mjs\"\n",[309,715,716],{"class":311,"line":398},[309,717,544],{"class":337},[309,719,720],{"class":311,"line":403},[309,721,722],{"class":337},"}\n",[184,724,726],{"id":725},"interpreting-the-dependency-graph-and-module-overlap","Interpreting the Dependency Graph and Module Overlap",[169,728,729],{},"The dependency graph reveals architectural inefficiencies invisible to raw size metrics. When reviewing treemap and sunburst visualizations, prioritize identifying oversized leaves and redundant branches. A leaf node representing a single utility function exceeding 15KB typically indicates an unoptimized third-party SDK or a legacy CommonJS wrapper that prevents effective minification.",[169,731,732,733,736],{},"Focus heavily on module overlap. If identical libraries appear across multiple route chunks and collectively exceed 10% of the total payload, refactor shared dependencies into a dedicated vendor chunk or extract them via ",[179,734,735],{},"SplitChunksPlugin",". Overlap directly increases network redundancy and forces the browser to re-parse identical code across navigation boundaries.",[169,738,739,740,743,744,746,747,750,751,754,755,758,759,762,763,205,766,769,770,774],{},"Map ESM vs CommonJS resolution paths to identify tree-shaking blockers. Inspect ",[179,741,742],{},"module.type"," in ",[179,745,181],{}," to verify entry points. When modules resolve to ",[179,748,749],{},".cjs"," or ",[179,752,753],{},"index.js"," without explicit ",[179,756,757],{},"sideEffects: false"," declarations in their ",[179,760,761],{},"package.json",", dead code persists regardless of import patterns. Audit polyfill injection and runtime helpers (",[179,764,765],{},"@babel\u002Fruntime",[179,767,768],{},"tslib",") to ensure they are externalized or deduplicated. Cross-reference findings with ",[173,771,773],{"href":772},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002F","Tree Shaking and Dead Code Elimination"," to validate configuration alignment and eliminate false positives in unused module detection.",[184,776,778],{"id":777},"diagnostic-workflow-for-ci-integration-and-regression-prevention","Diagnostic Workflow for CI Integration and Regression Prevention",[169,780,781,782,784,785,217,788,791,792,795],{},"Manual analysis does not scale across engineering teams. Integrate bundle auditing directly into pull request workflows to enforce performance accountability. Generate ",[179,783,181],{}," during the build step, then pipe it to a lightweight Node.js script that parses ",[179,786,787],{},"assets",[179,789,790],{},"chunks"," arrays. Compare current sizes against a baseline ",[179,793,794],{},"budget.json"," file committed to the repository.",[169,797,798,799,750,802,805,806,810],{},"Enforce hard failures when initial JS exceeds 150KB or when any single chunk grows by >15% relative to the main branch. Use ",[179,800,801],{},"gzip-size",[179,803,804],{},"brotli-size"," libraries for accurate network impact calculations rather than relying on raw file system metrics. Store compressed size metrics in a time-series database or attach them directly to GitHub PR comments for visibility. This automated gating prevents regression and ensures ",[173,807,809],{"href":808},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002F","Dynamic Imports and Route-Based Splitting"," implementations maintain predictable chunk boundaries.",[300,812,814],{"className":302,"code":813,"language":304,"meta":305,"style":305},"\u002F\u002F scripts\u002Fcheck-bundle-budget.mjs\nimport { readFileSync } from 'fs';\nimport { gzipSizeSync } from 'gzip-size';\n\nconst stats = JSON.parse(readFileSync('.\u002Fdist\u002Fstats.json', 'utf8'));\nconst budgets = { initial: 150_000, chunk: 50_000, vendor: 200_000 };\n\nconst initialChunk = stats.assets.find(a => \u002Fmain|index\u002F.test(a.name) && a.name.endsWith('.js'));\nconst vendorChunk = stats.assets.find(a => \u002Fvendor|framework\u002F.test(a.name) && a.name.endsWith('.js'));\n\nasync function validateBudget() {\n  if (!initialChunk || !vendorChunk) {\n    throw new Error('Missing expected chunks in stats.json. Check chunk naming configuration.');\n  }\n\n  const initialSource = readFileSync(`.\u002Fdist\u002F${initialChunk.name}`, 'utf8');\n  const vendorSource = readFileSync(`.\u002Fdist\u002F${vendorChunk.name}`, 'utf8');\n\n  const initialGzip = gzipSizeSync(initialSource);\n  const vendorGzip = gzipSizeSync(vendorSource);\n\n  if (initialGzip > budgets.initial) {\n    throw new Error(`Initial JS exceeds ${budgets.initial}B limit. Current: ${initialGzip}B`);\n  }\n  if (vendorGzip > budgets.vendor) {\n    throw new Error(`Vendor chunk exceeds ${budgets.vendor}B limit. Current: ${vendorGzip}B`);\n  }\n  console.log('Bundle budgets validated.');\n}\n\nvalidateBudget().catch(err => {\n  console.error('Budget check failed:', err.message);\n  process.exit(1);\n});\n",[179,815,816,821,838,852,856,891,921,925,979,1024,1028,1042,1063,1082,1086,1090,1124,1154,1158,1173,1187,1191,1204,1236,1240,1252,1281,1285,1300,1304,1308,1328,1343,1359],{"__ignoreMap":305},[309,817,818],{"class":311,"line":312},[309,819,820],{"class":315},"\u002F\u002F scripts\u002Fcheck-bundle-budget.mjs\n",[309,822,823,826,829,832,835],{"class":311,"line":319},[309,824,825],{"class":322},"import",[309,827,828],{"class":337}," { readFileSync } ",[309,830,831],{"class":322},"from",[309,833,834],{"class":341}," 'fs'",[309,836,837],{"class":337},";\n",[309,839,840,842,845,847,850],{"class":311,"line":348},[309,841,825],{"class":322},[309,843,844],{"class":337}," { gzipSizeSync } ",[309,846,831],{"class":322},[309,848,849],{"class":341}," 'gzip-size'",[309,851,837],{"class":337},[309,853,854],{"class":311,"line":355},[309,855,352],{"emptyLinePlaceholder":351},[309,857,858,860,863,865,868,870,873,875,878,880,883,885,888],{"class":311,"line":384},[309,859,323],{"class":322},[309,861,862],{"class":326}," stats",[309,864,330],{"class":322},[309,866,867],{"class":326}," JSON",[309,869,298],{"class":337},[309,871,872],{"class":333},"parse",[309,874,338],{"class":337},[309,876,877],{"class":333},"readFileSync",[309,879,338],{"class":337},[309,881,882],{"class":341},"'.\u002Fdist\u002Fstats.json'",[309,884,205],{"class":337},[309,886,887],{"class":341},"'utf8'",[309,889,890],{"class":337},"));\n",[309,892,893,895,898,900,903,906,909,912,915,918],{"class":311,"line":398},[309,894,323],{"class":322},[309,896,897],{"class":326}," budgets",[309,899,330],{"class":322},[309,901,902],{"class":337}," { initial: ",[309,904,905],{"class":326},"150_000",[309,907,908],{"class":337},", chunk: ",[309,910,911],{"class":326},"50_000",[309,913,914],{"class":337},", vendor: ",[309,916,917],{"class":326},"200_000",[309,919,920],{"class":337}," };\n",[309,922,923],{"class":311,"line":403},[309,924,352],{"emptyLinePlaceholder":351},[309,926,927,929,932,934,937,940,942,944,947,950,953,956,958,961,964,966,969,972,974,977],{"class":311,"line":424},[309,928,323],{"class":322},[309,930,931],{"class":326}," initialChunk",[309,933,330],{"class":322},[309,935,936],{"class":337}," stats.assets.",[309,938,939],{"class":333},"find",[309,941,338],{"class":337},[309,943,173],{"class":371},[309,945,946],{"class":322}," =>",[309,948,949],{"class":341}," \u002Fmain",[309,951,952],{"class":322},"|",[309,954,955],{"class":341},"index\u002F",[309,957,298],{"class":337},[309,959,960],{"class":333},"test",[309,962,963],{"class":337},"(a.name) ",[309,965,412],{"class":322},[309,967,968],{"class":337}," a.name.",[309,970,971],{"class":333},"endsWith",[309,973,338],{"class":337},[309,975,976],{"class":341},"'.js'",[309,978,890],{"class":337},[309,980,981,983,986,988,990,992,994,996,998,1001,1003,1006,1008,1010,1012,1014,1016,1018,1020,1022],{"class":311,"line":436},[309,982,323],{"class":322},[309,984,985],{"class":326}," vendorChunk",[309,987,330],{"class":322},[309,989,936],{"class":337},[309,991,939],{"class":333},[309,993,338],{"class":337},[309,995,173],{"class":371},[309,997,946],{"class":322},[309,999,1000],{"class":341}," \u002Fvendor",[309,1002,952],{"class":322},[309,1004,1005],{"class":341},"framework\u002F",[309,1007,298],{"class":337},[309,1009,960],{"class":333},[309,1011,963],{"class":337},[309,1013,412],{"class":322},[309,1015,968],{"class":337},[309,1017,971],{"class":333},[309,1019,338],{"class":337},[309,1021,976],{"class":341},[309,1023,890],{"class":337},[309,1025,1026],{"class":311,"line":447},[309,1027,352],{"emptyLinePlaceholder":351},[309,1029,1030,1033,1036,1039],{"class":311,"line":459},[309,1031,1032],{"class":322},"async",[309,1034,1035],{"class":322}," function",[309,1037,1038],{"class":333}," validateBudget",[309,1040,1041],{"class":337},"() {\n",[309,1043,1044,1046,1048,1051,1054,1057,1060],{"class":311,"line":470},[309,1045,406],{"class":322},[309,1047,368],{"class":337},[309,1049,1050],{"class":322},"!",[309,1052,1053],{"class":337},"initialChunk ",[309,1055,1056],{"class":322},"||",[309,1058,1059],{"class":322}," !",[309,1061,1062],{"class":337},"vendorChunk) {\n",[309,1064,1065,1068,1071,1074,1076,1079],{"class":311,"line":495},[309,1066,1067],{"class":322},"    throw",[309,1069,1070],{"class":322}," new",[309,1072,1073],{"class":333}," Error",[309,1075,338],{"class":337},[309,1077,1078],{"class":341},"'Missing expected chunks in stats.json. Check chunk naming configuration.'",[309,1080,1081],{"class":337},");\n",[309,1083,1084],{"class":311,"line":506},[309,1085,544],{"class":337},[309,1087,1088],{"class":311,"line":517},[309,1089,352],{"emptyLinePlaceholder":351},[309,1091,1092,1094,1097,1099,1102,1104,1107,1110,1112,1115,1118,1120,1122],{"class":311,"line":529},[309,1093,387],{"class":322},[309,1095,1096],{"class":326}," initialSource",[309,1098,330],{"class":322},[309,1100,1101],{"class":333}," readFileSync",[309,1103,338],{"class":337},[309,1105,1106],{"class":341},"`.\u002Fdist\u002F${",[309,1108,1109],{"class":337},"initialChunk",[309,1111,298],{"class":341},[309,1113,1114],{"class":337},"name",[309,1116,1117],{"class":341},"}`",[309,1119,205],{"class":337},[309,1121,887],{"class":341},[309,1123,1081],{"class":337},[309,1125,1126,1128,1131,1133,1135,1137,1139,1142,1144,1146,1148,1150,1152],{"class":311,"line":535},[309,1127,387],{"class":322},[309,1129,1130],{"class":326}," vendorSource",[309,1132,330],{"class":322},[309,1134,1101],{"class":333},[309,1136,338],{"class":337},[309,1138,1106],{"class":341},[309,1140,1141],{"class":337},"vendorChunk",[309,1143,298],{"class":341},[309,1145,1114],{"class":337},[309,1147,1117],{"class":341},[309,1149,205],{"class":337},[309,1151,887],{"class":341},[309,1153,1081],{"class":337},[309,1155,1156],{"class":311,"line":541},[309,1157,352],{"emptyLinePlaceholder":351},[309,1159,1160,1162,1165,1167,1170],{"class":311,"line":547},[309,1161,387],{"class":322},[309,1163,1164],{"class":326}," initialGzip",[309,1166,330],{"class":322},[309,1168,1169],{"class":333}," gzipSizeSync",[309,1171,1172],{"class":337},"(initialSource);\n",[309,1174,1175,1177,1180,1182,1184],{"class":311,"line":552},[309,1176,387],{"class":322},[309,1178,1179],{"class":326}," vendorGzip",[309,1181,330],{"class":322},[309,1183,1169],{"class":333},[309,1185,1186],{"class":337},"(vendorSource);\n",[309,1188,1189],{"class":311,"line":560},[309,1190,352],{"emptyLinePlaceholder":351},[309,1192,1193,1195,1198,1201],{"class":311,"line":571},[309,1194,406],{"class":322},[309,1196,1197],{"class":337}," (initialGzip ",[309,1199,1200],{"class":322},">",[309,1202,1203],{"class":337}," budgets.initial) {\n",[309,1205,1206,1208,1210,1212,1214,1217,1220,1222,1225,1228,1231,1234],{"class":311,"line":577},[309,1207,1067],{"class":322},[309,1209,1070],{"class":322},[309,1211,1073],{"class":333},[309,1213,338],{"class":337},[309,1215,1216],{"class":341},"`Initial JS exceeds ${",[309,1218,1219],{"class":337},"budgets",[309,1221,298],{"class":341},[309,1223,1224],{"class":337},"initial",[309,1226,1227],{"class":341},"}B limit. Current: ${",[309,1229,1230],{"class":337},"initialGzip",[309,1232,1233],{"class":341},"}B`",[309,1235,1081],{"class":337},[309,1237,1238],{"class":311,"line":587},[309,1239,544],{"class":337},[309,1241,1242,1244,1247,1249],{"class":311,"line":597},[309,1243,406],{"class":322},[309,1245,1246],{"class":337}," (vendorGzip ",[309,1248,1200],{"class":322},[309,1250,1251],{"class":337}," budgets.vendor) {\n",[309,1253,1254,1256,1258,1260,1262,1265,1267,1269,1272,1274,1277,1279],{"class":311,"line":607},[309,1255,1067],{"class":322},[309,1257,1070],{"class":322},[309,1259,1073],{"class":333},[309,1261,338],{"class":337},[309,1263,1264],{"class":341},"`Vendor chunk exceeds ${",[309,1266,1219],{"class":337},[309,1268,298],{"class":341},[309,1270,1271],{"class":337},"vendor",[309,1273,1227],{"class":341},[309,1275,1276],{"class":337},"vendorGzip",[309,1278,1233],{"class":341},[309,1280,1081],{"class":337},[309,1282,1283],{"class":311,"line":617},[309,1284,544],{"class":337},[309,1286,1287,1290,1293,1295,1298],{"class":311,"line":627},[309,1288,1289],{"class":337},"  console.",[309,1291,1292],{"class":333},"log",[309,1294,338],{"class":337},[309,1296,1297],{"class":341},"'Bundle budgets validated.'",[309,1299,1081],{"class":337},[309,1301,1302],{"class":311,"line":636},[309,1303,722],{"class":337},[309,1305,1306],{"class":311,"line":642},[309,1307,352],{"emptyLinePlaceholder":351},[309,1309,1310,1313,1316,1319,1321,1324,1326],{"class":311,"line":648},[309,1311,1312],{"class":333},"validateBudget",[309,1314,1315],{"class":337},"().",[309,1317,1318],{"class":333},"catch",[309,1320,338],{"class":337},[309,1322,1323],{"class":371},"err",[309,1325,946],{"class":322},[309,1327,381],{"class":337},[309,1329,1330,1332,1335,1337,1340],{"class":311,"line":654},[309,1331,1289],{"class":337},[309,1333,1334],{"class":333},"error",[309,1336,338],{"class":337},[309,1338,1339],{"class":341},"'Budget check failed:'",[309,1341,1342],{"class":337},", err.message);\n",[309,1344,1346,1349,1352,1354,1357],{"class":311,"line":1345},33,[309,1347,1348],{"class":337},"  process.",[309,1350,1351],{"class":333},"exit",[309,1353,338],{"class":337},[309,1355,1356],{"class":326},"1",[309,1358,1081],{"class":337},[309,1360,1362],{"class":311,"line":1361},34,[309,1363,1364],{"class":337},"});\n",[184,1366,1368],{"id":1367},"actionable-optimization-strategies-from-analysis-findings","Actionable Optimization Strategies from Analysis Findings",[169,1370,1371,1372,1374,1375,1378,1379,1382],{},"Analysis must drive architectural decisions. When ",[179,1373,271],{}," reveals monolithic vendor chunks, restructure ",[179,1376,1377],{},"optimization.splitChunks.cacheGroups"," to isolate framework code, UI libraries, and utility modules. Assign higher ",[179,1380,1381],{},"priority"," values to frequently imported packages to ensure deterministic extraction and prevent race conditions in chunk generation.",[169,1384,1385,1386,217,1389,1392],{},"Replace heavy runtime dependencies with lighter alternatives or native browser APIs. Legacy date parsers, oversized HTTP clients, and monolithic utility libraries often contribute 20–40KB of unnecessary payload. Use the ",[179,1387,1388],{},"preload",[179,1390,1391],{},"prefetch"," directives strategically based on route transition frequency identified in chunk analysis. Preload critical route chunks for above-the-fold content; prefetch secondary routes during idle time.",[169,1394,1395],{},"Post-implementation, verify that parse and compile times decrease proportionally to size reductions. Measure execution time using Chrome DevTools Performance panel or Web Vitals RUM data to confirm that smaller chunks translate to faster interaction readiness.",[184,1397,1399],{"id":1398},"common-mistakes","Common Mistakes",[229,1401,1402,1408,1414,1428,1443,1453],{},[232,1403,1404,1407],{},[235,1405,1406],{},"Analyzing development builds:"," Dev builds contain unminified code, inline source maps, and HMR wrappers, artificially inflating sizes by 3–5x and corrupting baseline metrics.",[232,1409,1410,1413],{},[235,1411,1412],{},"Ignoring compression ratios:"," Optimizing solely for raw file size misrepresents actual network transfer costs. Brotli and gzip deliver significantly different transfer footprints.",[232,1415,1416,1423,1424,1427],{},[235,1417,1418,1419,1422],{},"Using ",[179,1420,1421],{},"analyzerMode: 'server'"," in CI:"," Headless runners will hang indefinitely waiting for a browser to open the interactive report. Always use ",[179,1425,1426],{},"static"," mode in automated pipelines.",[232,1429,1430,1437,1438,743,1440,1442],{},[235,1431,1432,1433,1436],{},"Overlooking ",[179,1434,1435],{},"sideEffects"," declarations:"," Without explicit ",[179,1439,757],{},[179,1441,761],{},", Webpack assumes all modules have side effects, bypassing tree-shaking and retaining dead code.",[232,1444,1445,1448,1449,1452],{},[235,1446,1447],{},"Failing to normalize chunk names in CI scripts:"," Hash-prefixed asset filenames (",[179,1450,1451],{},"main.a1b2c3.js",") break naive string matching. Use regex or Webpack's chunk metadata for reliable lookups.",[232,1454,1455,1458],{},[235,1456,1457],{},"Accepting vendor chunk overlap without validation:"," Shared modules appearing in multiple chunks may be legitimate if they serve distinct route contexts. Verify actual utilization before forcing extraction.",[184,1460,1462],{"id":1461},"faq","FAQ",[169,1464,1465,1468],{},[235,1466,1467],{},"What is the recommended maximum initial JavaScript bundle size for optimal Core Web Vitals?","\nTarget under 150KB (Brotli-compressed) for the initial entry chunk. This threshold ensures the main thread remains unblocked during the critical rendering path, keeping First Contentful Paint under 1.8s on 4G networks.",[169,1470,1471,1474],{},[235,1472,1473],{},"Should I analyze raw, minified, or compressed bundle sizes?","\nAlways analyze Brotli-compressed sizes for network transfer impact, and minified sizes for parse\u002Fcompile time estimation. Raw sizes are only useful for debugging module resolution paths.",[169,1476,1477,1480,1481,1483],{},[235,1478,1479],{},"How do I prevent webpack-bundle-analyzer from slowing down CI builds?","\nUse ",[179,1482,282],{}," and inject the plugin conditionally via environment flags. Generate the report only on merge to main or when a PR exceeds size thresholds, rather than on every commit.",[169,1485,1486,1489,1490,1492,1493,205,1496,1499,1500,1503,1504,1506,1507,205,1509,209,1511,1514],{},[235,1487,1488],{},"Why does my stats.json file exceed 50MB and crash the analyzer?","\nVerbose ",[179,1491,196],{}," configurations like ",[179,1494,1495],{},"children: true",[179,1497,1498],{},"moduleTrace: true",", or ",[179,1501,1502],{},"source: true"," exponentially increase output size. Restrict ",[179,1505,196],{}," fields to ",[179,1508,787],{},[179,1510,790],{},[179,1512,1513],{},"modules",", and disable source inclusion to keep artifacts under 5MB.",[1516,1517,1518],"style",{},"html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}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 .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}",{"title":305,"searchDepth":319,"depth":319,"links":1520},[1521,1522,1523,1524,1525,1526,1527],{"id":186,"depth":319,"text":187},{"id":264,"depth":319,"text":265},{"id":725,"depth":319,"text":726},{"id":777,"depth":319,"text":778},{"id":1367,"depth":319,"text":1368},{"id":1398,"depth":319,"text":1399},{"id":1461,"depth":319,"text":1462},"Modern frontend architectures demand precise visibility into JavaScript payload composition. Without systematic Webpack Bundle Analysis Techniques, teams risk shipping bloated initial chunks, overlapping vendor dependencies, and undetected dead code. This guide provides a diagnostic-first approach to analyzing Webpack 5 outputs, establishing strict size budgets, and integrating automated regression checks into CI\u002FCD pipelines. You will learn how to generate actionable stats.json artifacts, configure visualization plugins for production builds, interpret module dependency graphs, and enforce explicit performance thresholds that align with Core Web Vitals targets.","md",{},{"title":1532,"description":1533},"Webpack Bundle Analysis: Diagnostic Techniques","Analyze Webpack bundles to find bloat and eliminate dead code. Covers stats.json generation, visualizer plugins, and CI integration for bundle regression detection.","uuCmgVXnDzlA8rG6jHCKA6aWamQlpAYK5uE3s4dJX04",{"id":1536,"title":153,"body":1537,"description":2474,"extension":1529,"meta":2475,"navigation":351,"path":154,"seo":2476,"stem":155,"__hash__":2479},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002Findex.md",{"type":162,"value":1538,"toc":2445},[1539,1542,1555,1559,1564,1567,1571,1574,1578,1581,1585,1589,1592,1617,1621,1624,1799,1803,1817,1821,1825,1835,1839,1846,1867,1871,1880,1896,1900,1904,1914,1918,1925,1929,1932,1935,2263,2276,2280,2284,2290,2294,2308,2312,2322,2326,2405,2409,2415,2429,2442],[165,1540,153],{"id":1541},"how-to-configure-webpack-bundle-analyzer-for-production",[169,1543,1544,1545,1548,1549,1551,1552,1554],{},"Running bundle analysis on production builds is critical for accurate ",[173,1546,108],{"href":1547},"\u002Fjavascript-bundle-optimization-code-splitting\u002F"," metrics. Development builds inflate payload sizes and mask real-world delivery characteristics. This guide details how to configure ",[179,1550,271],{}," safely for production environments. You will learn to prevent accidental runtime injection, generate accurate ",[179,1553,181],{}," artifacts, and establish precise size thresholds for automated CI\u002FCD gating.",[184,1556,1558],{"id":1557},"root-cause-why-dev-mode-analysis-fails-in-production","Root Cause: Why Dev-Mode Analysis Fails in Production",[1560,1561,1563],"h3",{"id":1562},"false-positives-from-unminified-code","False Positives from Unminified Code",[169,1565,1566],{},"Development builds skip minification, mangling, and scope hoisting. Raw identifiers and whitespace inflate bundle sizes by 3–5x. Optimizing against these metrics targets non-existent bottlenecks. Always validate against production-compiled artifacts to isolate actual transfer weights.",[1560,1568,1570],{"id":1569},"missing-tree-shaking-and-dead-code-elimination","Missing Tree-Shaking and Dead Code Elimination",[169,1572,1573],{},"Production pipelines apply aggressive dead code elimination. Unused exports and conditional branches are stripped during the minification phase. Analyzing development output preserves these dead paths, creating false optimization targets. Production stats reflect the exact byte footprint delivered to end users.",[1560,1575,1577],{"id":1576},"the-risk-of-shipping-analyzer-runtime","The Risk of Shipping Analyzer Runtime",[169,1579,1580],{},"Misconfigured plugins can inject analysis overhead directly into the output bundle. This increases initial load time and exposes internal module graphs to the browser. Conditional execution guarantees zero runtime impact on shipped assets.",[184,1582,1584],{"id":1583},"step-1-secure-production-only-plugin-injection","Step 1: Secure Production-Only Plugin Injection",[1560,1586,1588],{"id":1587},"environment-variable-gating","Environment Variable Gating",[169,1590,1591],{},"Isolate the analyzer behind a dedicated environment flag. This prevents the plugin from executing during standard deployments or local development.",[300,1593,1597],{"className":1594,"code":1595,"language":1596,"meta":305,"style":305},"language-bash shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","ANALYZE=true npm run build:prod\n","bash",[179,1598,1599],{"__ignoreMap":305},[309,1600,1601,1603,1606,1608,1611,1614],{"class":311,"line":312},[309,1602,418],{"class":337},[309,1604,1605],{"class":322},"=",[309,1607,501],{"class":341},[309,1609,1610],{"class":371}," npm",[309,1612,1613],{"class":341}," run",[309,1615,1616],{"class":341}," build:prod\n",[1560,1618,1620],{"id":1619},"conditional-plugin-array-splicing","Conditional Plugin Array Splicing",[169,1622,1623],{},"Inject the plugin dynamically within your Webpack configuration. Use functional exports to evaluate the environment before modifying the plugin array.",[300,1625,1627],{"className":302,"code":1626,"language":304,"meta":305,"style":305},"const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nmodule.exports = (env) => {\n  const plugins = [\u002F* existing plugins *\u002F];\n\n  if (env && env.ANALYZE) {\n    plugins.push(new BundleAnalyzerPlugin({\n      analyzerMode: 'static',\n      openAnalyzer: false,\n      generateStatsFile: true,\n      statsFilename: 'stats.json',\n      reportFilename: 'bundle-report.html'\n    }));\n  }\n\n  return { plugins \u002F* rest of config *\u002F };\n};\n",[179,1628,1629,1652,1656,1676,1693,1697,1711,1726,1735,1744,1753,1762,1770,1775,1779,1783,1795],{"__ignoreMap":305},[309,1630,1631,1633,1636,1639,1642,1644,1646,1648,1650],{"class":311,"line":312},[309,1632,323],{"class":322},[309,1634,1635],{"class":337}," { ",[309,1637,1638],{"class":326},"BundleAnalyzerPlugin",[309,1640,1641],{"class":337}," } ",[309,1643,1605],{"class":322},[309,1645,334],{"class":333},[309,1647,338],{"class":337},[309,1649,342],{"class":341},[309,1651,1081],{"class":337},[309,1653,1654],{"class":311,"line":319},[309,1655,352],{"emptyLinePlaceholder":351},[309,1657,1658,1660,1662,1664,1666,1668,1670,1672,1674],{"class":311,"line":348},[309,1659,358],{"class":326},[309,1661,298],{"class":337},[309,1663,363],{"class":326},[309,1665,330],{"class":322},[309,1667,368],{"class":337},[309,1669,372],{"class":371},[309,1671,375],{"class":337},[309,1673,378],{"class":322},[309,1675,381],{"class":337},[309,1677,1678,1680,1682,1684,1687,1690],{"class":311,"line":355},[309,1679,387],{"class":322},[309,1681,390],{"class":326},[309,1683,330],{"class":322},[309,1685,1686],{"class":337}," [",[309,1688,1689],{"class":315},"\u002F* existing plugins *\u002F",[309,1691,1692],{"class":337},"];\n",[309,1694,1695],{"class":311,"line":384},[309,1696,352],{"emptyLinePlaceholder":351},[309,1698,1699,1701,1703,1705,1707,1709],{"class":311,"line":398},[309,1700,406],{"class":322},[309,1702,409],{"class":337},[309,1704,412],{"class":322},[309,1706,415],{"class":337},[309,1708,418],{"class":326},[309,1710,421],{"class":337},[309,1712,1713,1715,1717,1719,1722,1724],{"class":311,"line":403},[309,1714,427],{"class":337},[309,1716,430],{"class":333},[309,1718,338],{"class":337},[309,1720,1721],{"class":322},"new",[309,1723,327],{"class":333},[309,1725,444],{"class":337},[309,1727,1728,1731,1733],{"class":311,"line":424},[309,1729,1730],{"class":337},"      analyzerMode: ",[309,1732,453],{"class":341},[309,1734,456],{"class":337},[309,1736,1737,1740,1742],{"class":311,"line":436},[309,1738,1739],{"class":337},"      openAnalyzer: ",[309,1741,465],{"class":326},[309,1743,456],{"class":337},[309,1745,1746,1749,1751],{"class":311,"line":447},[309,1747,1748],{"class":337},"      generateStatsFile: ",[309,1750,501],{"class":326},[309,1752,456],{"class":337},[309,1754,1755,1758,1760],{"class":311,"line":459},[309,1756,1757],{"class":337},"      statsFilename: ",[309,1759,512],{"class":341},[309,1761,456],{"class":337},[309,1763,1764,1767],{"class":311,"line":470},[309,1765,1766],{"class":337},"      reportFilename: ",[309,1768,1769],{"class":341},"'bundle-report.html'\n",[309,1771,1772],{"class":311,"line":495},[309,1773,1774],{"class":337},"    }));\n",[309,1776,1777],{"class":311,"line":506},[309,1778,544],{"class":337},[309,1780,1781],{"class":311,"line":517},[309,1782,352],{"emptyLinePlaceholder":351},[309,1784,1785,1787,1790,1793],{"class":311,"line":529},[309,1786,555],{"class":322},[309,1788,1789],{"class":337}," { plugins ",[309,1791,1792],{"class":315},"\u002F* rest of config *\u002F",[309,1794,920],{"class":337},[309,1796,1797],{"class":311,"line":535},[309,1798,657],{"class":337},[1560,1800,1802],{"id":1801},"generating-accurate-stats-files","Generating Accurate Stats Files",[169,1804,1805,1806,1809,1810,1812,1813,1816],{},"Configure Webpack to emit standard stats alongside the analyzer report. The ",[179,1807,1808],{},"stats: 'normal'"," preset captures module resolution, chunk dependencies, and asset sizes without verbose noise. For deeper context on interpreting these outputs, review our ",[173,1811,176],{"href":175}," documentation. Ensure ",[179,1814,1815],{},"generateStatsFile: true"," is active to produce machine-readable JSON for CI pipelines.",[184,1818,1820],{"id":1819},"step-2-configure-analyzer-modes-for-safe-execution","Step 2: Configure Analyzer Modes for Safe Execution",[1560,1822,1824],{"id":1823},"static-vs-server-mode-trade-offs","Static vs Server Mode Trade-offs",[169,1826,1827,1828,1831,1832,1834],{},"The default ",[179,1829,1830],{},"server"," mode launches an interactive HTTP server. This requires manual intervention and blocks automated pipelines. Switch to ",[179,1833,1426],{}," to generate a self-contained HTML file and JSON artifact.",[1560,1836,1838],{"id":1837},"disabling-open-browser-in-ci","Disabling Open Browser in CI",[169,1840,1841,1842,1845],{},"Headless CI runners lack display servers. Setting ",[179,1843,1844],{},"openAnalyzer: true"," forces the process to hang while attempting to spawn a browser. Explicitly disable this flag to guarantee non-blocking execution.",[229,1847,1848,1853,1860],{},[232,1849,279,1850,1852],{},[179,1851,289],{}," in all CI configurations.",[232,1854,1855,1856,1859],{},"Verify exit codes return ",[179,1857,1858],{},"0"," upon successful report generation.",[232,1861,1862,1863,1866],{},"Confirm no ",[179,1864,1865],{},"localhost"," ports are bound during the build step.",[1560,1868,1870],{"id":1869},"setting-report-output-paths","Setting Report Output Paths",[169,1872,1873,1874,750,1877,1879],{},"Define explicit output directories to prevent artifact pollution. Route reports to a dedicated ",[179,1875,1876],{},"reports\u002F",[179,1878,256],{}," subfolder.",[229,1881,1882,1888,1893],{},[232,1883,1884,1885],{},"Use ",[179,1886,1887],{},"reportFilename: 'reports\u002Fbundle-report.html'",[232,1889,1884,1890],{},[179,1891,1892],{},"statsFilename: 'reports\u002Fstats.json'",[232,1894,1895],{},"Parse the JSON output programmatically to audit module paths without exposing internal structures to end users.",[184,1897,1899],{"id":1898},"step-3-implement-metric-thresholds-automated-alerts","Step 3: Implement Metric Thresholds & Automated Alerts",[1560,1901,1903],{"id":1902},"defining-gzip-size-limits","Defining Gzip Size Limits",[169,1905,1906,1907,750,1910,1913],{},"Uncompressed sizes misrepresent network delivery costs. Always enforce thresholds against ",[179,1908,1909],{},"gzip",[179,1911,1912],{},"brotli"," compressed weights. A main entry chunk exceeding 150KB gzipped should trigger a hard build failure.",[1560,1915,1917],{"id":1916},"detecting-module-duplication","Detecting Module Duplication",[169,1919,1920,1921,1924],{},"Duplicate dependencies across chunks inflate total payload. Calculate duplication by comparing shared module weights against total asset size. Flag builds where duplicated modules exceed 15% of the total bundle. Enforce ",[179,1922,1923],{},"optimization.splitChunks"," to consolidate common dependencies.",[1560,1926,1928],{"id":1927},"third-party-vs-first-party-ratios","Third-Party vs First-Party Ratios",[169,1930,1931],{},"Monitor vendor payload ratios. If third-party libraries exceed 60% of the total gzipped size, initiate a dependency audit. Replace heavy utilities with native APIs or lightweight alternatives.",[169,1933,1934],{},"Automate validation using a post-build Node script:",[300,1936,1938],{"className":302,"code":1937,"language":304,"meta":305,"style":305},"\u002F\u002F scripts\u002Fcheck-bundle-size.mjs\nimport { readFileSync } from 'fs';\nimport { gzipSizeSync } from 'gzip-size';\n\nconst stats = JSON.parse(readFileSync('dist\u002Fstats.json', 'utf8'));\nconst mainAsset = stats.assets.find(a => \u002Fmain.*\\.js$\u002F.test(a.name));\n\nif (!mainAsset) {\n  console.error('FAIL: Could not find main chunk in stats.json');\n  process.exit(1);\n}\n\nconst source = readFileSync(`dist\u002F${mainAsset.name}`, 'utf8');\nconst gzipped = gzipSizeSync(source);\nconst limitBytes = 153600; \u002F\u002F 150KB\n\nif (gzipped > limitBytes) {\n  console.error(`FAIL: Main chunk is ${Math.round(gzipped \u002F 1024)}KB gzipped (limit: 150KB)`);\n  process.exit(1);\n}\nconsole.log(`PASS: Main chunk is ${Math.round(gzipped \u002F 1024)}KB gzipped.`);\n",[179,1939,1940,1945,1957,1969,1973,2002,2048,2052,2064,2077,2089,2093,2097,2128,2142,2160,2164,2176,2214,2226,2230],{"__ignoreMap":305},[309,1941,1942],{"class":311,"line":312},[309,1943,1944],{"class":315},"\u002F\u002F scripts\u002Fcheck-bundle-size.mjs\n",[309,1946,1947,1949,1951,1953,1955],{"class":311,"line":319},[309,1948,825],{"class":322},[309,1950,828],{"class":337},[309,1952,831],{"class":322},[309,1954,834],{"class":341},[309,1956,837],{"class":337},[309,1958,1959,1961,1963,1965,1967],{"class":311,"line":348},[309,1960,825],{"class":322},[309,1962,844],{"class":337},[309,1964,831],{"class":322},[309,1966,849],{"class":341},[309,1968,837],{"class":337},[309,1970,1971],{"class":311,"line":355},[309,1972,352],{"emptyLinePlaceholder":351},[309,1974,1975,1977,1979,1981,1983,1985,1987,1989,1991,1993,1996,1998,2000],{"class":311,"line":384},[309,1976,323],{"class":322},[309,1978,862],{"class":326},[309,1980,330],{"class":322},[309,1982,867],{"class":326},[309,1984,298],{"class":337},[309,1986,872],{"class":333},[309,1988,338],{"class":337},[309,1990,877],{"class":333},[309,1992,338],{"class":337},[309,1994,1995],{"class":341},"'dist\u002Fstats.json'",[309,1997,205],{"class":337},[309,1999,887],{"class":341},[309,2001,890],{"class":337},[309,2003,2004,2006,2009,2011,2013,2015,2017,2019,2021,2023,2025,2028,2032,2035,2038,2041,2043,2045],{"class":311,"line":398},[309,2005,323],{"class":322},[309,2007,2008],{"class":326}," mainAsset",[309,2010,330],{"class":322},[309,2012,936],{"class":337},[309,2014,939],{"class":333},[309,2016,338],{"class":337},[309,2018,173],{"class":371},[309,2020,946],{"class":322},[309,2022,949],{"class":341},[309,2024,298],{"class":326},[309,2026,2027],{"class":322},"*",[309,2029,2031],{"class":2030},"s1o6E","\\.",[309,2033,2034],{"class":341},"js",[309,2036,2037],{"class":322},"$",[309,2039,2040],{"class":341},"\u002F",[309,2042,298],{"class":337},[309,2044,960],{"class":333},[309,2046,2047],{"class":337},"(a.name));\n",[309,2049,2050],{"class":311,"line":403},[309,2051,352],{"emptyLinePlaceholder":351},[309,2053,2054,2057,2059,2061],{"class":311,"line":424},[309,2055,2056],{"class":322},"if",[309,2058,368],{"class":337},[309,2060,1050],{"class":322},[309,2062,2063],{"class":337},"mainAsset) {\n",[309,2065,2066,2068,2070,2072,2075],{"class":311,"line":436},[309,2067,1289],{"class":337},[309,2069,1334],{"class":333},[309,2071,338],{"class":337},[309,2073,2074],{"class":341},"'FAIL: Could not find main chunk in stats.json'",[309,2076,1081],{"class":337},[309,2078,2079,2081,2083,2085,2087],{"class":311,"line":447},[309,2080,1348],{"class":337},[309,2082,1351],{"class":333},[309,2084,338],{"class":337},[309,2086,1356],{"class":326},[309,2088,1081],{"class":337},[309,2090,2091],{"class":311,"line":459},[309,2092,722],{"class":337},[309,2094,2095],{"class":311,"line":470},[309,2096,352],{"emptyLinePlaceholder":351},[309,2098,2099,2101,2104,2106,2108,2110,2113,2116,2118,2120,2122,2124,2126],{"class":311,"line":495},[309,2100,323],{"class":322},[309,2102,2103],{"class":326}," source",[309,2105,330],{"class":322},[309,2107,1101],{"class":333},[309,2109,338],{"class":337},[309,2111,2112],{"class":341},"`dist\u002F${",[309,2114,2115],{"class":337},"mainAsset",[309,2117,298],{"class":341},[309,2119,1114],{"class":337},[309,2121,1117],{"class":341},[309,2123,205],{"class":337},[309,2125,887],{"class":341},[309,2127,1081],{"class":337},[309,2129,2130,2132,2135,2137,2139],{"class":311,"line":506},[309,2131,323],{"class":322},[309,2133,2134],{"class":326}," gzipped",[309,2136,330],{"class":322},[309,2138,1169],{"class":333},[309,2140,2141],{"class":337},"(source);\n",[309,2143,2144,2146,2149,2151,2154,2157],{"class":311,"line":517},[309,2145,323],{"class":322},[309,2147,2148],{"class":326}," limitBytes",[309,2150,330],{"class":322},[309,2152,2153],{"class":326}," 153600",[309,2155,2156],{"class":337},"; ",[309,2158,2159],{"class":315},"\u002F\u002F 150KB\n",[309,2161,2162],{"class":311,"line":529},[309,2163,352],{"emptyLinePlaceholder":351},[309,2165,2166,2168,2171,2173],{"class":311,"line":535},[309,2167,2056],{"class":322},[309,2169,2170],{"class":337}," (gzipped ",[309,2172,1200],{"class":322},[309,2174,2175],{"class":337}," limitBytes) {\n",[309,2177,2178,2180,2182,2184,2187,2190,2192,2195,2197,2200,2203,2206,2209,2212],{"class":311,"line":541},[309,2179,1289],{"class":337},[309,2181,1334],{"class":333},[309,2183,338],{"class":337},[309,2185,2186],{"class":341},"`FAIL: Main chunk is ${",[309,2188,2189],{"class":337},"Math",[309,2191,298],{"class":341},[309,2193,2194],{"class":333},"round",[309,2196,338],{"class":341},[309,2198,2199],{"class":337},"gzipped",[309,2201,2202],{"class":322}," \u002F",[309,2204,2205],{"class":326}," 1024",[309,2207,2208],{"class":341},")",[309,2210,2211],{"class":341},"}KB gzipped (limit: 150KB)`",[309,2213,1081],{"class":337},[309,2215,2216,2218,2220,2222,2224],{"class":311,"line":547},[309,2217,1348],{"class":337},[309,2219,1351],{"class":333},[309,2221,338],{"class":337},[309,2223,1356],{"class":326},[309,2225,1081],{"class":337},[309,2227,2228],{"class":311,"line":552},[309,2229,722],{"class":337},[309,2231,2232,2235,2237,2239,2242,2244,2246,2248,2250,2252,2254,2256,2258,2261],{"class":311,"line":560},[309,2233,2234],{"class":337},"console.",[309,2236,1292],{"class":333},[309,2238,338],{"class":337},[309,2240,2241],{"class":341},"`PASS: Main chunk is ${",[309,2243,2189],{"class":337},[309,2245,298],{"class":341},[309,2247,2194],{"class":333},[309,2249,338],{"class":341},[309,2251,2199],{"class":337},[309,2253,2202],{"class":322},[309,2255,2205],{"class":326},[309,2257,2208],{"class":341},[309,2259,2260],{"class":341},"}KB gzipped.`",[309,2262,1081],{"class":337},[169,2264,2265,2266,2268,2269,2272,2273,2275],{},"Note: ",[179,2267,801],{}," v7+ exports ",[179,2270,2271],{},"gzipSizeSync"," as a named export from an ESM-only package. Use ",[179,2274,825],{}," syntax as shown, or pin to v6 for CommonJS compatibility.",[184,2277,2279],{"id":2278},"step-4-validate-with-devtools-lighthouse-workflows","Step 4: Validate with DevTools & Lighthouse Workflows",[1560,2281,2283],{"id":2282},"cross-referencing-coverage-tab","Cross-Referencing Coverage Tab",[169,2285,2286,2287,2289],{},"Open Chrome DevTools and navigate to the Coverage panel. Reload the page and compare the reported unused bytes against the ",[179,2288,181],{}," module tree. Discrepancies indicate runtime-injected code or dynamic imports missing from the static analysis.",[1560,2291,2293],{"id":2292},"lighthouse-performance-budgets","Lighthouse Performance Budgets",[169,2295,2296,2297,2299,2300,2303,2304,2307],{},"Integrate ",[179,2298,181],{}," asset sizes into ",[179,2301,2302],{},"lighthouse-ci"," budgets. Map the ",[179,2305,2306],{},"total-byte-weight"," audit directly to your Webpack output. Configure Lighthouse to fail if transferred sizes deviate by more than 10% from your established baseline.",[1560,2309,2311],{"id":2310},"network-waterfall-correlation","Network Waterfall Correlation",[169,2313,2314,2315,2317,2318,2321],{},"Inspect the Network tab to verify chunk loading order. Ensure critical path assets load without render-blocking delays. Cross-reference the waterfall timing with ",[179,2316,181],{}," chunk priorities. Adjust ",[179,2319,2320],{},"webpackChunkName"," and dynamic import boundaries to align with measured Time to Interactive (TTI) targets.",[184,2323,2325],{"id":2324},"diagnostic-checklist-common-configuration-failures","Diagnostic Checklist: Common Configuration Failures",[229,2327,2328,2352,2376],{},[232,2329,2330,2333,2334],{},[235,2331,2332],{},"Symptom:"," Metrics show 3–5x expected size.\n",[229,2335,2336,2342],{},[232,2337,2338,2341],{},[235,2339,2340],{},"Root Cause:"," Analyzer ran against development build.",[232,2343,2344,2347,2348,2351],{},[235,2345,2346],{},"Fix:"," Execute ",[179,2349,2350],{},"ANALYZE=true npm run build:prod"," to trigger production minification pipeline.",[232,2353,2354,2356,2357],{},[235,2355,2332],{}," CI pipeline hangs indefinitely.\n",[229,2358,2359,2367],{},[232,2360,2361,2363,2364,2366],{},[235,2362,2340],{}," ",[179,2365,1844],{}," in headless environment.",[232,2368,2369,2371,2372,217,2374,298],{},[235,2370,2346],{}," Force ",[179,2373,282],{},[179,2375,289],{},[232,2377,2378,2380,2381],{},[235,2379,2332],{}," Thresholds fail unexpectedly due to inflated size.\n",[229,2382,2383,2388],{},[232,2384,2385,2387],{},[235,2386,2340],{}," Source maps included in asset size calculation.",[232,2389,2390,2392,2393,2396,2397,2400,2401,2404],{},[235,2391,2346],{}," Set ",[179,2394,2395],{},"devtool: 'hidden-source-map'"," and filter ",[179,2398,2399],{},"stats.assets"," to ",[179,2402,2403],{},".js"," files only before evaluation.",[184,2406,2408],{"id":2407},"frequently-asked-questions","Frequently Asked Questions",[169,2410,2411,2414],{},[235,2412,2413],{},"Does webpack-bundle-analyzer increase production bundle size?","\nNo, when configured conditionally. The plugin executes exclusively during the compilation phase and outputs standalone HTML\u002FJSON artifacts. It never injects runtime code into your shipped bundles.",[169,2416,2417,1480,2420,2422,2423,2425,2426,2428],{},[235,2418,2419],{},"What is the recommended analyzerMode for CI pipelines?",[179,2421,282],{}," paired with ",[179,2424,289],{},". This configuration generates a portable report and ",[179,2427,181],{}," without spawning a local server, eliminating headless environment timeouts.",[169,2430,2431,2434,2435,2437,2438,2441],{},[235,2432,2433],{},"How do I enforce bundle size limits automatically?","\nParse the generated ",[179,2436,181],{}," in a post-build validation script. Compare individual asset weights against your defined thresholds (e.g., 150KB gzipped for the main chunk). Return ",[179,2439,2440],{},"process.exit(1)"," on threshold violations to block pull requests automatically.",[1516,2443,2444],{},"html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}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 .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .s1o6E, html code.shiki .s1o6E{--shiki-default:#72F088;--shiki-default-font-weight:bold;--shiki-dark:#72F088;--shiki-dark-font-weight:bold;--shiki-light:#024C1A;--shiki-light-font-weight:bold}",{"title":305,"searchDepth":319,"depth":319,"links":2446},[2447,2452,2457,2462,2467,2472,2473],{"id":1557,"depth":319,"text":1558,"children":2448},[2449,2450,2451],{"id":1562,"depth":348,"text":1563},{"id":1569,"depth":348,"text":1570},{"id":1576,"depth":348,"text":1577},{"id":1583,"depth":319,"text":1584,"children":2453},[2454,2455,2456],{"id":1587,"depth":348,"text":1588},{"id":1619,"depth":348,"text":1620},{"id":1801,"depth":348,"text":1802},{"id":1819,"depth":319,"text":1820,"children":2458},[2459,2460,2461],{"id":1823,"depth":348,"text":1824},{"id":1837,"depth":348,"text":1838},{"id":1869,"depth":348,"text":1870},{"id":1898,"depth":319,"text":1899,"children":2463},[2464,2465,2466],{"id":1902,"depth":348,"text":1903},{"id":1916,"depth":348,"text":1917},{"id":1927,"depth":348,"text":1928},{"id":2278,"depth":319,"text":2279,"children":2468},[2469,2470,2471],{"id":2282,"depth":348,"text":2283},{"id":2292,"depth":348,"text":2293},{"id":2310,"depth":348,"text":2311},{"id":2324,"depth":319,"text":2325},{"id":2407,"depth":319,"text":2408},"Running bundle analysis on production builds is critical for accurate JavaScript Bundle Optimization & Code Splitting metrics. Development builds inflate payload sizes and mask real-world delivery characteristics. This guide details how to configure webpack-bundle-analyzer safely for production environments. You will learn to prevent accidental runtime injection, generate accurate stats.json artifacts, and establish precise size thresholds for automated CI\u002FCD gating.",{},{"title":2477,"description":2478},"Configure webpack-bundle-analyzer for Production","Set up webpack-bundle-analyzer safely for production builds. Generate accurate stats.json, visualize dependency graphs, and enforce automated size thresholds.","7cESpLEHQl5QFIJ8yHga0YUk0aU4nwTTI9QHiG9IKxs",{"id":2481,"title":135,"body":2482,"description":3718,"extension":1529,"meta":3719,"navigation":351,"path":136,"seo":3720,"stem":137,"__hash__":3723},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Findex.md",{"type":162,"value":2483,"toc":3701},[2484,2487,2496,2500,2517,2522,2566,2570,2582,2587,2663,2682,2686,2693,2698,2726,2745,2749,2752,2790,2810,2814,2821,2826,2851,2855,2869,2874,2918,2922,2925,2930,3049,3064,3068,3071,3076,3108,3111,3115,3119,3305,3309,3490,3494,3583,3585,3589,3624,3626,3628,3657,3683,3689,3698],[165,2485,135],{"id":2486},"tree-shaking-and-dead-code-elimination-advanced-implementation-diagnostics",[169,2488,2489,2490,2493,2494,298],{},"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 ",[179,2491,2492],{},"\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 ",[173,2495,108],{"href":1547},[184,2497,2499],{"id":2498},"static-analysis-esm-module-graph-construction","Static Analysis & ESM Module Graph Construction",[169,2501,2502,2503,2040,2505,2508,2509,2512,2513,2516],{},"Bundlers construct deterministic dependency graphs exclusively through ES Module (ESM) ",[179,2504,825],{},[179,2506,2507],{},"export"," syntax. Unlike CommonJS ",[179,2510,2511],{},"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 (",[179,2514,2515],{},"import * as lib from 'pkg'; lib[methodName]()",") breaks static analysis and forces the bundler to retain the entire module.",[169,2518,2519],{},[235,2520,2521],{},"Diagnostic Workflow:",[2523,2524,2525,2531,2547,2556],"ol",{},[232,2526,2527,2528],{},"Generate a detailed build profile: ",[179,2529,2530],{},"npx webpack --profile --json > stats.json",[232,2532,2533,2534,2536,2537,2540,2541,2543,2544,298],{},"Parse the ",[179,2535,1513],{}," array and filter for entries where ",[179,2538,2539],{},"usedExports"," evaluates to ",[179,2542,465],{}," or contains ",[179,2545,2546],{},"null",[232,2548,2549,2550,217,2553,298],{},"Calculate the delta between ",[179,2551,2552],{},"size",[179,2554,2555],{},"usedSize",[232,2557,2558,2561,2562,2565],{},[235,2559,2560],{},"Threshold:"," Flag any module with ",[179,2563,2564],{},">10KB"," of unused exports for immediate refactoring. Isolate heavy utilities into dedicated entry points or switch to granular ESM imports.",[184,2567,2569],{"id":2568},"configuring-sideeffects-package-manifest-overrides","Configuring sideEffects & Package Manifest Overrides",[169,2571,2572,2573,2575,2576,2578,2579,2581],{},"Bundlers default to assuming all files contain side effects unless explicitly overridden. The ",[179,2574,1435],{}," field in ",[179,2577,761],{}," acts as a strict contract with the build system. Setting it to ",[179,2580,465],{}," 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.",[169,2583,2584],{},[235,2585,2586],{},"Granular Configuration Strategy:",[300,2588,2590],{"className":660,"code":2589,"language":662,"meta":305,"style":305},"{\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",[179,2591,2592,2596,2608,2620,2628,2635,2642,2649,2654,2659],{"__ignoreMap":305},[309,2593,2594],{"class":311,"line":312},[309,2595,669],{"class":337},[309,2597,2598,2601,2603,2606],{"class":311,"line":319},[309,2599,2600],{"class":674},"  \"name\"",[309,2602,686],{"class":337},[309,2604,2605],{"class":341},"\"@my-org\u002Fui-components\"",[309,2607,456],{"class":337},[309,2609,2610,2613,2615,2618],{"class":311,"line":348},[309,2611,2612],{"class":674},"  \"version\"",[309,2614,686],{"class":337},[309,2616,2617],{"class":341},"\"1.0.0\"",[309,2619,456],{"class":337},[309,2621,2622,2625],{"class":311,"line":355},[309,2623,2624],{"class":674},"  \"sideEffects\"",[309,2626,2627],{"class":337},": [\n",[309,2629,2630,2633],{"class":311,"line":384},[309,2631,2632],{"class":341},"    \"*.css\"",[309,2634,456],{"class":337},[309,2636,2637,2640],{"class":311,"line":398},[309,2638,2639],{"class":341},"    \"*.scss\"",[309,2641,456],{"class":337},[309,2643,2644,2647],{"class":311,"line":403},[309,2645,2646],{"class":341},"    \"src\u002Fpolyfills.js\"",[309,2648,456],{"class":337},[309,2650,2651],{"class":311,"line":424},[309,2652,2653],{"class":341},"    \"src\u002FsetupTests.js\"\n",[309,2655,2656],{"class":311,"line":436},[309,2657,2658],{"class":337},"  ]\n",[309,2660,2661],{"class":311,"line":447},[309,2662,722],{"class":337},[169,2664,2665,2668,2669,2671,2672,2674,2675,2677,2678,2681],{},[235,2666,2667],{},"Verification & Audit:"," Cross-reference ",[179,2670,1435],{}," declarations with actual runtime DOM mutations or global scope modifications. Run a staging deployment with ",[179,2673,757],{}," and monitor console warnings for missing styles or broken polyfills. Never apply blanket ",[179,2676,465],{}," to legacy libraries without integration testing, as implicit side effects (e.g., ",[179,2679,2680],{},"window"," mutations, prototype extensions) will silently fail.",[184,2683,2685],{"id":2684},"minifier-level-dead-code-elimination-terser-swc-esbuild","Minifier-Level Dead Code Elimination (Terser, SWC, ESBuild)",[169,2687,2688,2689,2692],{},"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 ",[179,2690,2691],{},"\u002F*#__PURE__*\u002F"," annotation is critical for signaling safe removal to minifiers; without it, minifiers conservatively retain function calls that might mutate external state.",[169,2694,2695],{},[235,2696,2697],{},"Configuration Thresholds:",[229,2699,2700,2713],{},[232,2701,2702,2705,2706,2709,2710,298],{},[235,2703,2704],{},"Terser:"," Enable ",[179,2707,2708],{},"compress: { dead_code: true, unused: true, drop_console: true }"," and define ",[179,2711,2712],{},"pure_funcs: ['console.debug', 'console.info']",[232,2714,2715,2718,2719,217,2722,2725],{},[235,2716,2717],{},"ESBuild:"," Configure ",[179,2720,2721],{},"pure: ['console.log', 'debug']",[179,2723,2724],{},"drop: ['console', 'debugger']"," to strip debug calls at compile time.",[169,2727,2728,2730,2731,2733,2734,2737,2738,2741,2742,2744],{},[235,2729,2521],{}," Compare pre-minified and post-minified bundle sizes using bundler verbose output. ",[235,2732,2560],{}," A ",[179,2735,2736],{},">15%"," size reduction post-minification indicates successful DCE. If reduction falls below ",[179,2739,2740],{},"10%",", audit for missing ",[179,2743,2691],{}," annotations or overly conservative minifier settings.",[184,2746,2748],{"id":2747},"diagnostic-workflows-bundle-visualization","Diagnostic Workflows & Bundle Visualization",[169,2750,2751],{},"Establish a repeatable audit pipeline to identify residual dead code before deployment.",[2523,2753,2754,2762,2771,2779],{},[232,2755,2756,2757,750,2759,298],{},"Generate bundle stats via ",[179,2758,271],{},[179,2760,2761],{},"rollup-plugin-visualizer",[232,2763,2764,2765,217,2768,298],{},"Filter modules by ",[179,2766,2767],{},"isEntry: false",[179,2769,2770],{},"size: > 5KB",[232,2772,2773,2774,217,2776,2778],{},"Cross-reference with ",[179,2775,2539],{},[179,2777,1435],{}," metadata to isolate false positives.",[232,2780,2781,2782,2785,2786,2789],{},"Validate against runtime usage via Chrome DevTools Coverage tab (",[179,2783,2784],{},"Ctrl+Shift+P"," → ",[179,2787,2788],{},"Show Coverage",").",[169,2791,2792,2795,2796,2799,2800,2803,2804,2806,2807,2809],{},[235,2793,2794],{},"Thresholds & CI Enforcement:"," Flag any non-entry chunk with ",[179,2797,2798],{},">20%"," unused bytes. Enforce a strict CI budget of ",[179,2801,2802],{},"\u003C150KB"," for core vendor chunks. For advanced visualization techniques and metric interpretation, refer to ",[173,2805,176],{"href":175},". Automate this pipeline using ",[179,2808,271],{}," in CI mode to fail PRs that exceed defined byte budgets.",[184,2811,2813],{"id":2812},"integration-with-dynamic-imports-route-based-splitting","Integration with Dynamic Imports & Route-Based Splitting",[169,2815,2816,2817,2820],{},"Tree shaking interacts directly with code splitting boundaries. When using ",[179,2818,2819],{},"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.",[169,2822,2823],{},[235,2824,2825],{},"Implementation Guardrails:",[229,2827,2828,2831,2834,2840],{},[232,2829,2830],{},"Isolate heavy dependencies to route-level components.",[232,2832,2833],{},"Avoid importing shared vendor modules in route chunks unless explicitly required.",[232,2835,2836,2839],{},[235,2837,2838],{},"Diagnostic:"," Ensure each route chunk contains only route-specific dependencies, not shared vendor bloat.",[232,2841,2842,2844,2845,2848,2849,298],{},[235,2843,2560],{}," Route chunks should not exceed ",[179,2846,2847],{},"30%"," of total vendor size. For implementation patterns that align chunk boundaries with route transitions, see ",[173,2850,809],{"href":808},[184,2852,2854],{"id":2853},"troubleshooting-legacy-libraries-commonjs-interop","Troubleshooting Legacy Libraries & CommonJS Interop",[169,2856,2857,2858,217,2861,2864,2865,2868],{},"Popular libraries like ",[179,2859,2860],{},"lodash",[179,2862,2863],{},"moment.js"," resist tree shaking due to CommonJS dynamic exports, ",[179,2866,2867],{},"module.exports"," object mutation, and lack of static analysis compatibility. CJS evaluates at runtime, forcing bundlers to disable tree shaking for safety.",[169,2870,2871],{},[235,2872,2873],{},"Remediation Strategies:",[229,2875,2876,2892,2899],{},[232,2877,2878,2879,2881,2882,2885,2886,2040,2889,298],{},"Replace ",[179,2880,2860],{}," with ",[179,2883,2884],{},"lodash-es"," or switch to ",[179,2887,2888],{},"date-fns",[179,2890,2891],{},"dayjs",[232,2893,2894,2895,2898],{},"Apply bundler-specific exclusions: ",[179,2896,2897],{},"webpack.ContextReplacementPlugin"," for moment locales.",[232,2900,2901,2904,2905,2907,2908,2911,2912,2914,2915,298],{},[235,2902,2903],{},"Workflow:"," Inspect ",[179,2906,181],{}," for the ",[179,2909,2910],{},"reasons"," array, trace back to CJS entry points, and verify if ",[179,2913,1435],{}," is overridden incorrectly. For step-by-step resolution of these specific packages, consult ",[173,2916,141],{"href":2917},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002F",[184,2919,2921],{"id":2920},"css-asset-dead-code-elimination","CSS & Asset Dead Code Elimination",[169,2923,2924],{},"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.",[169,2926,2927],{},[235,2928,2929],{},"PurgeCSS Configuration:",[300,2931,2933],{"className":302,"code":2932,"language":304,"meta":305,"style":305},"\u002F\u002F postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('@fullhuman\u002Fpostcss-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",[179,2934,2935,2940,2952,2957,2970,2991,3026,3036,3041,3045],{"__ignoreMap":305},[309,2936,2937],{"class":311,"line":312},[309,2938,2939],{"class":315},"\u002F\u002F postcss.config.js\n",[309,2941,2942,2944,2946,2948,2950],{"class":311,"line":319},[309,2943,358],{"class":326},[309,2945,298],{"class":337},[309,2947,363],{"class":326},[309,2949,330],{"class":322},[309,2951,381],{"class":337},[309,2953,2954],{"class":311,"line":348},[309,2955,2956],{"class":337},"  plugins: [\n",[309,2958,2959,2962,2964,2967],{"class":311,"line":355},[309,2960,2961],{"class":333},"    require",[309,2963,338],{"class":337},[309,2965,2966],{"class":341},"'@fullhuman\u002Fpostcss-purgecss'",[309,2968,2969],{"class":337},")({\n",[309,2971,2972,2975,2978,2980,2983,2985,2988],{"class":311,"line":384},[309,2973,2974],{"class":337},"      content: [",[309,2976,2977],{"class":341},"'.\u002Fsrc\u002F**\u002F*.html'",[309,2979,205],{"class":337},[309,2981,2982],{"class":341},"'.\u002Fsrc\u002F**\u002F*.js'",[309,2984,205],{"class":337},[309,2986,2987],{"class":341},"'.\u002Fsrc\u002F**\u002F*.vue'",[309,2989,2990],{"class":337},"],\n",[309,2992,2993,2996,2998,3001,3004,3007,3009,3011,3014,3016,3019,3021,3024],{"class":311,"line":398},[309,2994,2995],{"class":337},"      safelist: [",[309,2997,2040],{"class":341},[309,2999,3000],{"class":322},"^",[309,3002,3003],{"class":341},"animate-\u002F",[309,3005,3006],{"class":337},",",[309,3008,2202],{"class":341},[309,3010,3000],{"class":322},[309,3012,3013],{"class":341},"tooltip-\u002F",[309,3015,205],{"class":337},[309,3017,3018],{"class":341},"'html'",[309,3020,205],{"class":337},[309,3022,3023],{"class":341},"'body'",[309,3025,2990],{"class":337},[309,3027,3028,3031,3033],{"class":311,"line":403},[309,3029,3030],{"class":337},"      rejected: ",[309,3032,501],{"class":326},[309,3034,3035],{"class":315}," \u002F\u002F Outputs audit log of removed selectors\n",[309,3037,3038],{"class":311,"line":424},[309,3039,3040],{"class":337},"    })\n",[309,3042,3043],{"class":311,"line":436},[309,3044,2658],{"class":337},[309,3046,3047],{"class":311,"line":447},[309,3048,657],{"class":337},[169,3050,3051,3053,3054,3057,3058,2363,3060,3063],{},[235,3052,2838],{}," Run ",[179,3055,3056],{},"npx purgecss --css dist\u002F*.css --content \"src\u002F**\u002F*.html\" --output dist\u002Fpurged\u002F"," and compare byte reduction. ",[235,3059,2560],{},[179,3061,3062],{},">40%"," CSS reduction indicates successful purging for utility-class-heavy stylesheets.",[184,3065,3067],{"id":3066},"runtime-validation-performance-guardrails","Runtime Validation & Performance Guardrails",[169,3069,3070],{},"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.",[169,3072,3073],{},[235,3074,3075],{},"Validation Metrics:",[229,3077,3078,3093,3105],{},[232,3079,3080,3081,3084,3085,3088,3089,3092],{},"Target LCP ",[179,3082,3083],{},"\u003C 2.5s",", TBT ",[179,3086,3087],{},"\u003C 200ms",", and JS execution time reduction ",[179,3090,3091],{},">30%"," post-deployment.",[232,3094,3095,3096,3098,3099,750,3102,3104],{},"Run ",[179,3097,2302],{}," on PRs. Fail if ",[179,3100,3101],{},"unused-javascript > 10KB",[179,3103,2306],{}," exceeds budget.",[232,3106,3107],{},"Monitor Real User Monitoring (RUM) data to validate that reduced bundle size translates to faster Time to Interactive (TTI).",[3109,3110],"hr",{},[184,3112,3114],{"id":3113},"production-configuration-reference","Production Configuration Reference",[1560,3116,3118],{"id":3117},"webpack-enable-used-exports-side-effects","Webpack: Enable Used Exports & Side Effects",[300,3120,3122],{"className":302,"code":3121,"language":304,"meta":305,"style":305},"\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",[179,3123,3124,3128,3146,3150,3162,3171,3176,3185,3194,3203,3212,3217,3225,3230,3235,3244,3253,3262,3278,3283,3288,3292,3297,3301],{"__ignoreMap":305},[309,3125,3126],{"class":311,"line":312},[309,3127,316],{"class":315},[309,3129,3130,3132,3135,3137,3139,3141,3144],{"class":311,"line":319},[309,3131,323],{"class":322},[309,3133,3134],{"class":326}," TerserPlugin",[309,3136,330],{"class":322},[309,3138,334],{"class":333},[309,3140,338],{"class":337},[309,3142,3143],{"class":341},"'terser-webpack-plugin'",[309,3145,1081],{"class":337},[309,3147,3148],{"class":311,"line":348},[309,3149,352],{"emptyLinePlaceholder":351},[309,3151,3152,3154,3156,3158,3160],{"class":311,"line":355},[309,3153,358],{"class":326},[309,3155,298],{"class":337},[309,3157,363],{"class":326},[309,3159,330],{"class":322},[309,3161,381],{"class":337},[309,3163,3164,3167,3169],{"class":311,"line":384},[309,3165,3166],{"class":337},"  mode: ",[309,3168,566],{"class":341},[309,3170,456],{"class":337},[309,3172,3173],{"class":311,"line":398},[309,3174,3175],{"class":337},"  optimization: {\n",[309,3177,3178,3181,3183],{"class":311,"line":403},[309,3179,3180],{"class":337},"    usedExports: ",[309,3182,501],{"class":326},[309,3184,456],{"class":337},[309,3186,3187,3190,3192],{"class":311,"line":424},[309,3188,3189],{"class":337},"    sideEffects: ",[309,3191,501],{"class":326},[309,3193,456],{"class":337},[309,3195,3196,3199,3201],{"class":311,"line":436},[309,3197,3198],{"class":337},"    concatenateModules: ",[309,3200,501],{"class":326},[309,3202,456],{"class":337},[309,3204,3205,3208,3210],{"class":311,"line":447},[309,3206,3207],{"class":337},"    minimize: ",[309,3209,501],{"class":326},[309,3211,456],{"class":337},[309,3213,3214],{"class":311,"line":459},[309,3215,3216],{"class":337},"    minimizer: [\n",[309,3218,3219,3221,3223],{"class":311,"line":470},[309,3220,439],{"class":322},[309,3222,3134],{"class":333},[309,3224,444],{"class":337},[309,3226,3227],{"class":311,"line":495},[309,3228,3229],{"class":337},"        terserOptions: {\n",[309,3231,3232],{"class":311,"line":506},[309,3233,3234],{"class":337},"          compress: {\n",[309,3236,3237,3240,3242],{"class":311,"line":517},[309,3238,3239],{"class":337},"            dead_code: ",[309,3241,501],{"class":326},[309,3243,456],{"class":337},[309,3245,3246,3249,3251],{"class":311,"line":529},[309,3247,3248],{"class":337},"            unused: ",[309,3250,501],{"class":326},[309,3252,456],{"class":337},[309,3254,3255,3258,3260],{"class":311,"line":535},[309,3256,3257],{"class":337},"            drop_console: ",[309,3259,501],{"class":326},[309,3261,456],{"class":337},[309,3263,3264,3267,3270,3272,3275],{"class":311,"line":541},[309,3265,3266],{"class":337},"            pure_funcs: [",[309,3268,3269],{"class":341},"'console.debug'",[309,3271,205],{"class":337},[309,3273,3274],{"class":341},"'console.info'",[309,3276,3277],{"class":337},"]\n",[309,3279,3280],{"class":311,"line":547},[309,3281,3282],{"class":337},"          }\n",[309,3284,3285],{"class":311,"line":552},[309,3286,3287],{"class":337},"        }\n",[309,3289,3290],{"class":311,"line":560},[309,3291,532],{"class":337},[309,3293,3294],{"class":311,"line":571},[309,3295,3296],{"class":337},"    ]\n",[309,3298,3299],{"class":311,"line":577},[309,3300,544],{"class":337},[309,3302,3303],{"class":311,"line":587},[309,3304,657],{"class":337},[1560,3306,3308],{"id":3307},"vite-esbuild-pure-functions-tree-shaking","Vite: ESBuild Pure Functions & Tree Shaking",[300,3310,3312],{"className":302,"code":3311,"language":304,"meta":305,"style":305},"\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'],\n    drop: ['debugger']\n  }\n});\n",[179,3313,3314,3319,3333,3337,3349,3354,3364,3374,3379,3384,3401,3428,3432,3437,3442,3449,3454,3469,3479,3483],{"__ignoreMap":305},[309,3315,3316],{"class":311,"line":312},[309,3317,3318],{"class":315},"\u002F\u002F vite.config.js\n",[309,3320,3321,3323,3326,3328,3331],{"class":311,"line":319},[309,3322,825],{"class":322},[309,3324,3325],{"class":337}," { defineConfig } ",[309,3327,831],{"class":322},[309,3329,3330],{"class":341}," 'vite'",[309,3332,837],{"class":337},[309,3334,3335],{"class":311,"line":348},[309,3336,352],{"emptyLinePlaceholder":351},[309,3338,3339,3341,3344,3347],{"class":311,"line":355},[309,3340,2507],{"class":322},[309,3342,3343],{"class":322}," default",[309,3345,3346],{"class":333}," defineConfig",[309,3348,444],{"class":371},[309,3350,3351],{"class":311,"line":384},[309,3352,3353],{"class":337},"  build: {\n",[309,3355,3356,3359,3362],{"class":311,"line":398},[309,3357,3358],{"class":337},"    target: ",[309,3360,3361],{"class":341},"'esnext'",[309,3363,456],{"class":337},[309,3365,3366,3369,3372],{"class":311,"line":403},[309,3367,3368],{"class":337},"    minify: ",[309,3370,3371],{"class":341},"'esbuild'",[309,3373,456],{"class":337},[309,3375,3376],{"class":311,"line":424},[309,3377,3378],{"class":337},"    rollupOptions: {\n",[309,3380,3381],{"class":311,"line":436},[309,3382,3383],{"class":337},"      output: {\n",[309,3385,3386,3389,3392,3395,3397,3399],{"class":311,"line":447},[309,3387,3388],{"class":333},"        manualChunks",[309,3390,3391],{"class":337},": (",[309,3393,3394],{"class":371},"id",[309,3396,375],{"class":337},[309,3398,378],{"class":322},[309,3400,381],{"class":337},[309,3402,3403,3406,3409,3412,3414,3417,3420,3423,3426],{"class":311,"line":459},[309,3404,3405],{"class":322},"          if",[309,3407,3408],{"class":337}," (id.",[309,3410,3411],{"class":333},"includes",[309,3413,338],{"class":337},[309,3415,3416],{"class":341},"'node_modules'",[309,3418,3419],{"class":337},")) ",[309,3421,3422],{"class":322},"return",[309,3424,3425],{"class":341}," 'vendor'",[309,3427,837],{"class":337},[309,3429,3430],{"class":311,"line":470},[309,3431,3287],{"class":337},[309,3433,3434],{"class":311,"line":495},[309,3435,3436],{"class":337},"      }\n",[309,3438,3439],{"class":311,"line":506},[309,3440,3441],{"class":337},"    }\n",[309,3443,3444,3447],{"class":311,"line":517},[309,3445,3446],{"class":337},"  }",[309,3448,456],{"class":371},[309,3450,3451],{"class":311,"line":529},[309,3452,3453],{"class":337},"  esbuild: {\n",[309,3455,3456,3459,3462,3464,3467],{"class":311,"line":535},[309,3457,3458],{"class":337},"    pure: [",[309,3460,3461],{"class":341},"'console.log'",[309,3463,205],{"class":337},[309,3465,3466],{"class":341},"'console.warn'",[309,3468,2990],{"class":337},[309,3470,3471,3474,3477],{"class":311,"line":541},[309,3472,3473],{"class":337},"    drop: [",[309,3475,3476],{"class":341},"'debugger'",[309,3478,3277],{"class":337},[309,3480,3481],{"class":311,"line":547},[309,3482,544],{"class":337},[309,3484,3485,3488],{"class":311,"line":552},[309,3486,3487],{"class":371},"})",[309,3489,837],{"class":337},[1560,3491,3493],{"id":3492},"rollup-advanced-treeshake-configuration","Rollup: Advanced Treeshake Configuration",[300,3495,3497],{"className":302,"code":3496,"language":304,"meta":305,"style":305},"\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  }\n};\n",[179,3498,3499,3504,3512,3522,3541,3546,3556,3565,3572,3576],{"__ignoreMap":305},[309,3500,3501],{"class":311,"line":312},[309,3502,3503],{"class":315},"\u002F\u002F rollup.config.js\n",[309,3505,3506,3508,3510],{"class":311,"line":319},[309,3507,2507],{"class":322},[309,3509,3343],{"class":322},[309,3511,381],{"class":371},[309,3513,3514,3517,3520],{"class":311,"line":348},[309,3515,3516],{"class":337},"  input: ",[309,3518,3519],{"class":341},"'src\u002Fmain.js'",[309,3521,456],{"class":371},[309,3523,3524,3527,3530,3533,3536,3539],{"class":311,"line":355},[309,3525,3526],{"class":337},"  output: { file: ",[309,3528,3529],{"class":341},"'dist\u002Fbundle.js'",[309,3531,3532],{"class":337},", format: ",[309,3534,3535],{"class":341},"'es'",[309,3537,3538],{"class":337}," }",[309,3540,456],{"class":371},[309,3542,3543],{"class":311,"line":384},[309,3544,3545],{"class":337},"  treeshake: {\n",[309,3547,3548,3551,3554],{"class":311,"line":398},[309,3549,3550],{"class":337},"    moduleSideEffects: ",[309,3552,3553],{"class":341},"'no-external'",[309,3555,456],{"class":337},[309,3557,3558,3561,3563],{"class":311,"line":403},[309,3559,3560],{"class":337},"    propertyReadSideEffects: ",[309,3562,465],{"class":326},[309,3564,456],{"class":337},[309,3566,3567,3570],{"class":311,"line":424},[309,3568,3569],{"class":337},"    tryCatchDeoptimization: ",[309,3571,633],{"class":326},[309,3573,3574],{"class":311,"line":436},[309,3575,544],{"class":337},[309,3577,3578,3581],{"class":311,"line":447},[309,3579,3580],{"class":371},"}",[309,3582,837],{"class":337},[3109,3584],{},[184,3586,3588],{"id":3587},"common-implementation-mistakes","Common Implementation Mistakes",[229,3590,3591,3598,3604,3612,3618,3621],{},[232,3592,3593,3594,3597],{},"Importing entire namespaces (e.g., ",[179,3595,3596],{},"import * as _ from 'lodash'",") instead of named exports, which breaks static analysis.",[232,3599,3600,3601,3603],{},"Setting ",[179,3602,757],{}," globally without auditing CSS, polyfills, or global registry mutations, causing silent runtime failures.",[232,3605,3606,3607,750,3609,3611],{},"Relying solely on minifier DCE without enabling ",[179,3608,2539],{},[179,3610,1435],{},", leaving unused modules in the graph.",[232,3613,3614,3615,3617],{},"Ignoring ",[179,3616,2691],{}," annotations in custom utility libraries, preventing minifiers from safely removing unused function calls.",[232,3619,3620],{},"Mixing CommonJS and ESM in the same dependency chain, forcing bundlers to disable tree shaking for safety.",[232,3622,3623],{},"Failing to purge dynamically generated class names in CSS, resulting in false-positive removal of critical styles.",[3109,3625],{},[184,3627,2408],{"id":2407},[169,3629,3630,3633,3634,2040,3636,3638,3639,3641,3642,3644,3645,750,3647,3650,3651,3653,3654,3656],{},[235,3631,3632],{},"Why does my bundle still contain unused code after enabling tree shaking?","\nTree shaking requires strict ESM compliance. Verify that all dependencies use ",[179,3635,825],{},[179,3637,2507],{},", check ",[179,3640,761],{}," for correct ",[179,3643,1435],{}," declarations, and ensure your bundler's ",[179,3646,2539],{},[179,3648,3649],{},"treeshake"," options are enabled. Use ",[179,3652,181],{}," to trace unused modules and confirm they aren't referenced via dynamic ",[179,3655,2511],{}," or side-effectful imports.",[169,3658,3659,3662,3663,3666,3667,3670,3671,3674,3675,3678,3679,3682],{},[235,3660,3661],{},"How do I safely remove console logs without breaking production?","\nUse minifier-level DCE flags like ",[179,3664,3665],{},"drop_console: true"," (Terser) or ",[179,3668,3669],{},"drop: ['console']"," (ESBuild). These operate at the AST level and only remove calls when ",[179,3672,3673],{},"compress"," is active. Always test in staging, as some libraries rely on ",[179,3676,3677],{},"console"," for feature detection. For critical logs, wrap them in ",[179,3680,3681],{},"if (process.env.NODE_ENV !== 'production')"," blocks.",[169,3684,3685,3688],{},[235,3686,3687],{},"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.",[169,3690,3691,3694,3695,3697],{},[235,3692,3693],{},"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 ",[179,3696,2492],{}," unused code, enforce bundle budgets in CI, and monitor LCP\u002FTBT metrics post-deployment to validate real-world gains.",[1516,3699,3700],{},"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":305,"searchDepth":319,"depth":319,"links":3702},[3703,3704,3705,3706,3707,3708,3709,3710,3711,3716,3717],{"id":2498,"depth":319,"text":2499},{"id":2568,"depth":319,"text":2569},{"id":2684,"depth":319,"text":2685},{"id":2747,"depth":319,"text":2748},{"id":2812,"depth":319,"text":2813},{"id":2853,"depth":319,"text":2854},{"id":2920,"depth":319,"text":2921},{"id":3066,"depth":319,"text":3067},{"id":3113,"depth":319,"text":3114,"children":3712},[3713,3714,3715],{"id":3117,"depth":348,"text":3118},{"id":3307,"depth":348,"text":3308},{"id":3492,"depth":348,"text":3493},{"id":3587,"depth":319,"text":3588},{"id":2407,"depth":319,"text":2408},"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.",{},{"title":3721,"description":3722},"Tree Shaking & Dead Code Elimination Guide","Eliminate unused code with tree shaking and dead code elimination. Configure Rollup, Webpack, and Vite to achieve \u003C5% unused code in production bundles.","b11pAcMAmDoXQ3oGOwCulWQCfpyrPRGEtuYul6rq66E",{"id":3725,"title":141,"body":3726,"description":4668,"extension":1529,"meta":4669,"navigation":351,"path":142,"seo":4670,"stem":143,"__hash__":4673},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002Findex.md",{"type":162,"value":3727,"toc":4657},[3728,3731,3739,3742,3746,3762,3767,3772,3785,3790,3819,3823,3831,3837,3842,3858,3862,3885,3889,3899,3906,3910,3918,3922,3950,4037,4102,4106,4112,4131,4135,4147,4151,4174,4291,4379,4393,4397,4400,4403,4407,4418,4422,4443,4447,4461,4465,4480,4484,4506,4508,4595,4597,4612,4626,4638,4654],[165,3729,141],{"id":3730},"fixing-tree-shaking-issues-with-lodash-and-moment",[169,3732,3733,3734,217,3736,3738],{},"This guide delivers a rapid diagnostic and resolution workflow for frontend engineers facing unexplained bundle bloat from ",[179,3735,2860],{},[179,3737,2863],{},". Modern bundlers fail to statically analyze these legacy CommonJS packages without explicit configuration.",[169,3740,3741],{},"We outline exact configuration steps to enable dead code elimination. Strict metric thresholds are provided to validate performance gains. The focus remains on actionable, tool-agnostic fixes with precise Webpack and Vite implementations.",[184,3743,3745],{"id":3744},"root-cause-analysis-why-tree-shaking-fails-on-lodash-moment","Root Cause Analysis: Why Tree Shaking Fails on Lodash & Moment",[169,3747,3748,3749,217,3751,3753,3754,217,3756,3759,3760,298],{},"Tree shaking relies on static ",[179,3750,825],{},[179,3752,2507],{}," syntax to map dependency graphs. The default ",[179,3755,2860],{},[179,3757,3758],{},"moment"," packages ship as monolithic CommonJS modules using ",[179,3761,2867],{},[169,3763,3764,3765,298],{},"Dynamic property access and opaque side-effect declarations force bundlers to assume every export is required. This breaks static analysis and forces full dependency inclusion. For foundational context on how modern bundlers prune dependency graphs, review ",[173,3766,773],{"href":772},[169,3768,3769],{},[235,3770,3771],{},"Baseline Bundle Footprint (gzipped):",[229,3773,3774,3780],{},[232,3775,3776,3777,3779],{},"Default ",[179,3778,2860],{},": ~24KB gzipped (full library; unminified raw is ~72KB)",[232,3781,3776,3782,3784],{},[179,3783,3758],{}," core (no locales): ~18KB gzipped (locale files add ~160KB when all are included)",[169,3786,3787],{},[235,3788,3789],{},"Diagnostic Steps:",[229,3791,3792,3806,3813],{},[232,3793,3794,3795,3797,3798,3801,3802,3805],{},"Audit ",[179,3796,761],{}," for ",[179,3799,3800],{},"\"module\""," vs ",[179,3803,3804],{},"\"main\""," entry points in dependencies.",[232,3807,3808,3809,3812],{},"Verify bundler execution mode (",[179,3810,3811],{},"production"," enables minification and tree shaking).",[232,3814,3815,3816,3818],{},"Check for explicit ",[179,3817,1435],{}," declarations in dependency manifests.",[184,3820,3822],{"id":3821},"rapid-diagnosis-bundle-analysis-metric-thresholds","Rapid Diagnosis: Bundle Analysis & Metric Thresholds",[169,3824,3825,3826,750,3828,3830],{},"Deploy ",[179,3827,271],{},[179,3829,2761],{}," to isolate exact byte allocations. Cross-reference with the Chrome DevTools Coverage tab to measure unused JavaScript percentages.",[169,3832,3833,3834,3836],{},"Establish clear failure thresholds before applying fixes. Integrate these findings into broader ",[173,3835,108],{"href":1547}," workflows to align with route-based splitting strategies.",[169,3838,3839],{},[235,3840,3841],{},"Target Metrics:",[229,3843,3844,3852,3855],{},[232,3845,3846,3847,2040,3849,3851],{},"Unused ",[179,3848,2860],{},[179,3850,3758],{}," code: \u003C5%",[232,3853,3854],{},"Main thread parse time: \u003C100ms",[232,3856,3857],{},"Total utility contribution after optimization: \u003C20KB gzipped",[169,3859,3860],{},[235,3861,3789],{},[229,3863,3864,3867,3874,3882],{},[232,3865,3866],{},"Generate a production build with source maps enabled.",[232,3868,3869,3870,3873],{},"Execute ",[179,3871,3872],{},"npx webpack-bundle-analyzer dist"," or equivalent visualizer.",[232,3875,3876,3877,217,3879,3881],{},"Filter the treemap view by ",[179,3878,2860],{},[179,3880,3758],{}," directories.",[232,3883,3884],{},"Record initial parse and compile times via the Chrome Performance panel.",[184,3886,3888],{"id":3887},"step-by-step-resolution-lodash-modularization","Step-by-Step Resolution: Lodash Modularization",[169,3890,3891,3892,3894,3895,3898],{},"Replace monolithic namespace imports with ESM-compatible alternatives. Install ",[179,3893,2884],{}," to access a fully modularized build. Configure ",[179,3896,3897],{},"babel-plugin-lodash"," if source modification is restricted.",[169,3900,3901,3902,3905],{},"Update your project manifest with ",[179,3903,3904],{},"\"sideEffects\": false",". This signals to the bundler that utility functions are pure and safe to eliminate.",[169,3907,3908],{},[235,3909,3841],{},[229,3911,3912,3915],{},[232,3913,3914],{},"Lodash contribution: \u003C5KB gzipped for 3-5 utilities",[232,3916,3917],{},"Unused lodash code: 0% in final bundle",[169,3919,3920],{},[235,3921,3789],{},[229,3923,3924,3932,3939,3947],{},[232,3925,3095,3926,750,3929,298],{},[179,3927,3928],{},"npm install lodash-es",[179,3930,3931],{},"yarn add lodash-es",[232,3933,3934,3935,2400,3937,298],{},"Update all imports from ",[179,3936,2860],{},[179,3938,2884],{},[232,3940,3941,3942,3944,3945,298],{},"Add ",[179,3943,3904],{}," to your root ",[179,3946,761],{},[232,3948,3949],{},"Rebuild and verify analyzer output shows isolated function nodes.",[300,3951,3953],{"className":302,"code":3952,"language":304,"meta":305,"style":305},"\u002F\u002F FAILS TREE SHAKING: CJS monolithic import\nimport _ from 'lodash';\nconst result = _.debounce(fn, 300);\n\n\u002F\u002F ENABLES TREE SHAKING: named ESM import\nimport { debounce } from 'lodash-es';\nconst result = debounce(fn, 300);\n",[179,3954,3955,3960,3974,3997,4001,4006,4020],{"__ignoreMap":305},[309,3956,3957],{"class":311,"line":312},[309,3958,3959],{"class":315},"\u002F\u002F FAILS TREE SHAKING: CJS monolithic import\n",[309,3961,3962,3964,3967,3969,3972],{"class":311,"line":319},[309,3963,825],{"class":322},[309,3965,3966],{"class":337}," _ ",[309,3968,831],{"class":322},[309,3970,3971],{"class":341}," 'lodash'",[309,3973,837],{"class":337},[309,3975,3976,3978,3981,3983,3986,3989,3992,3995],{"class":311,"line":348},[309,3977,323],{"class":322},[309,3979,3980],{"class":326}," result",[309,3982,330],{"class":322},[309,3984,3985],{"class":337}," _.",[309,3987,3988],{"class":333},"debounce",[309,3990,3991],{"class":337},"(fn, ",[309,3993,3994],{"class":326},"300",[309,3996,1081],{"class":337},[309,3998,3999],{"class":311,"line":355},[309,4000,352],{"emptyLinePlaceholder":351},[309,4002,4003],{"class":311,"line":384},[309,4004,4005],{"class":315},"\u002F\u002F ENABLES TREE SHAKING: named ESM import\n",[309,4007,4008,4010,4013,4015,4018],{"class":311,"line":398},[309,4009,825],{"class":322},[309,4011,4012],{"class":337}," { debounce } ",[309,4014,831],{"class":322},[309,4016,4017],{"class":341}," 'lodash-es'",[309,4019,837],{"class":337},[309,4021,4022,4024,4026,4028,4031,4033,4035],{"class":311,"line":403},[309,4023,323],{"class":322},[309,4025,3980],{"class":326},[309,4027,330],{"class":322},[309,4029,4030],{"class":333}," debounce",[309,4032,3991],{"class":337},[309,4034,3994],{"class":326},[309,4036,1081],{"class":337},[300,4038,4040],{"className":660,"code":4039,"language":662,"meta":305,"style":305},"{\n  \"name\": \"my-app\",\n  \"version\": \"1.0.0\",\n  \"sideEffects\": false,\n  \"dependencies\": {\n    \"lodash-es\": \"^4.17.21\"\n  }\n}\n",[179,4041,4042,4046,4057,4067,4077,4084,4094,4098],{"__ignoreMap":305},[309,4043,4044],{"class":311,"line":312},[309,4045,669],{"class":337},[309,4047,4048,4050,4052,4055],{"class":311,"line":319},[309,4049,2600],{"class":674},[309,4051,686],{"class":337},[309,4053,4054],{"class":341},"\"my-app\"",[309,4056,456],{"class":337},[309,4058,4059,4061,4063,4065],{"class":311,"line":348},[309,4060,2612],{"class":674},[309,4062,686],{"class":337},[309,4064,2617],{"class":341},[309,4066,456],{"class":337},[309,4068,4069,4071,4073,4075],{"class":311,"line":355},[309,4070,2624],{"class":674},[309,4072,686],{"class":337},[309,4074,465],{"class":326},[309,4076,456],{"class":337},[309,4078,4079,4082],{"class":311,"line":384},[309,4080,4081],{"class":674},"  \"dependencies\"",[309,4083,678],{"class":337},[309,4085,4086,4089,4091],{"class":311,"line":398},[309,4087,4088],{"class":674},"    \"lodash-es\"",[309,4090,686],{"class":337},[309,4092,4093],{"class":341},"\"^4.17.21\"\n",[309,4095,4096],{"class":311,"line":403},[309,4097,544],{"class":337},[309,4099,4100],{"class":311,"line":424},[309,4101,722],{"class":337},[184,4103,4105],{"id":4104},"step-by-step-resolution-momentjs-locale-stripping-alternatives","Step-by-Step Resolution: Moment.js Locale Stripping & Alternatives",[169,4107,4108,4109,4111],{},"Moment's core architecture inherently resists tree shaking due to dynamic locale loading. The locale files are loaded via a dynamic ",[179,4110,2511],{}," context that bundlers cannot statically analyze. Address locale bloat using bundler-specific context replacement.",[169,4113,4114,4115,4118,4119,4122,4123,4126,4127,4130],{},"For Webpack, implement ",[179,4116,4117],{},"ContextReplacementPlugin"," to restrict ",[179,4120,4121],{},"moment\u002Flocale"," resolution. For Vite, use ",[179,4124,4125],{},"resolve.alias"," to redirect legacy imports and apply ",[179,4128,4129],{},"optimizeDeps"," to pre-bundle the result.",[169,4132,4133],{},[235,4134,3841],{},[229,4136,4137,4144],{},[232,4138,4139,4140,4143],{},"Moment core + ",[179,4141,4142],{},"en"," locale only: ~5KB gzipped",[232,4145,4146],{},"Non-English locale files: 0 in final bundle",[169,4148,4149],{},[235,4150,3789],{},[229,4152,4153,4156,4165,4171],{},[232,4154,4155],{},"Identify active locales currently used in your codebase.",[232,4157,4158,4159,4161,4162,4164],{},"Apply ",[179,4160,4117],{}," (Webpack) or ",[179,4163,4125],{}," with a wrapper (Vite).",[232,4166,4167,4168,4170],{},"Verify the ",[179,4169,4121],{}," directory is excluded from the final output.",[232,4172,4173],{},"Test date formatting across all supported locales to prevent runtime breaks.",[300,4175,4177],{"className":302,"code":4176,"language":304,"meta":305,"style":305},"\u002F\u002F webpack.config.js\nconst webpack = require('webpack');\n\nmodule.exports = {\n  \u002F\u002F ...\n  plugins: [\n    new webpack.ContextReplacementPlugin(\n      \u002Fmoment[\\\\\u002F]locale$\u002F,\n      \u002F^\\.\\\u002Fen$\u002F\n    )\n  ]\n};\n",[179,4178,4179,4183,4201,4205,4217,4222,4226,4238,4261,4278,4283,4287],{"__ignoreMap":305},[309,4180,4181],{"class":311,"line":312},[309,4182,316],{"class":315},[309,4184,4185,4187,4190,4192,4194,4196,4199],{"class":311,"line":319},[309,4186,323],{"class":322},[309,4188,4189],{"class":326}," webpack",[309,4191,330],{"class":322},[309,4193,334],{"class":333},[309,4195,338],{"class":337},[309,4197,4198],{"class":341},"'webpack'",[309,4200,1081],{"class":337},[309,4202,4203],{"class":311,"line":348},[309,4204,352],{"emptyLinePlaceholder":351},[309,4206,4207,4209,4211,4213,4215],{"class":311,"line":355},[309,4208,358],{"class":326},[309,4210,298],{"class":337},[309,4212,363],{"class":326},[309,4214,330],{"class":322},[309,4216,381],{"class":337},[309,4218,4219],{"class":311,"line":384},[309,4220,4221],{"class":315},"  \u002F\u002F ...\n",[309,4223,4224],{"class":311,"line":398},[309,4225,2956],{"class":337},[309,4227,4228,4231,4234,4236],{"class":311,"line":403},[309,4229,4230],{"class":322},"    new",[309,4232,4233],{"class":337}," webpack.",[309,4235,4117],{"class":333},[309,4237,433],{"class":337},[309,4239,4240,4243,4246,4249,4252,4255,4257,4259],{"class":311,"line":424},[309,4241,4242],{"class":341},"      \u002Fmoment",[309,4244,4245],{"class":326},"[",[309,4247,4248],{"class":2030},"\\\\",[309,4250,4251],{"class":326},"\u002F]",[309,4253,4254],{"class":341},"locale",[309,4256,2037],{"class":322},[309,4258,2040],{"class":341},[309,4260,456],{"class":337},[309,4262,4263,4266,4268,4271,4273,4275],{"class":311,"line":436},[309,4264,4265],{"class":341},"      \u002F",[309,4267,3000],{"class":322},[309,4269,4270],{"class":2030},"\\.\\\u002F",[309,4272,4142],{"class":341},[309,4274,2037],{"class":322},[309,4276,4277],{"class":341},"\u002F\n",[309,4279,4280],{"class":311,"line":447},[309,4281,4282],{"class":337},"    )\n",[309,4284,4285],{"class":311,"line":459},[309,4286,2658],{"class":337},[309,4288,4289],{"class":311,"line":470},[309,4290,657],{"class":337},[300,4292,4294],{"className":302,"code":4293,"language":304,"meta":305,"style":305},"\u002F\u002F vite.config.js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n  resolve: {\n    alias: {\n      lodash: 'lodash-es'\n    }\n  },\n  optimizeDeps: {\n    include: ['lodash-es']\n  }\n});\n",[179,4295,4296,4300,4312,4316,4326,4331,4336,4344,4348,4354,4359,4369,4373],{"__ignoreMap":305},[309,4297,4298],{"class":311,"line":312},[309,4299,3318],{"class":315},[309,4301,4302,4304,4306,4308,4310],{"class":311,"line":319},[309,4303,825],{"class":322},[309,4305,3325],{"class":337},[309,4307,831],{"class":322},[309,4309,3330],{"class":341},[309,4311,837],{"class":337},[309,4313,4314],{"class":311,"line":348},[309,4315,352],{"emptyLinePlaceholder":351},[309,4317,4318,4320,4322,4324],{"class":311,"line":355},[309,4319,2507],{"class":322},[309,4321,3343],{"class":322},[309,4323,3346],{"class":333},[309,4325,444],{"class":371},[309,4327,4328],{"class":311,"line":384},[309,4329,4330],{"class":337},"  resolve: {\n",[309,4332,4333],{"class":311,"line":398},[309,4334,4335],{"class":337},"    alias: {\n",[309,4337,4338,4341],{"class":311,"line":403},[309,4339,4340],{"class":337},"      lodash: ",[309,4342,4343],{"class":341},"'lodash-es'\n",[309,4345,4346],{"class":311,"line":424},[309,4347,3441],{"class":337},[309,4349,4350,4352],{"class":311,"line":436},[309,4351,3446],{"class":337},[309,4353,456],{"class":371},[309,4355,4356],{"class":311,"line":447},[309,4357,4358],{"class":337},"  optimizeDeps: {\n",[309,4360,4361,4364,4367],{"class":311,"line":459},[309,4362,4363],{"class":337},"    include: [",[309,4365,4366],{"class":341},"'lodash-es'",[309,4368,3277],{"class":337},[309,4370,4371],{"class":311,"line":470},[309,4372,544],{"class":337},[309,4374,4375,4377],{"class":311,"line":495},[309,4376,3487],{"class":371},[309,4378,837],{"class":337},[169,4380,4381,4384,4385,2400,4387,4389,4390,4392],{},[235,4382,4383],{},"Long-term recommendation:"," Consider migrating from ",[179,4386,3758],{},[179,4388,2888],{}," (tree-shakable by design) or ",[179,4391,2891],{}," (2KB core). Both support equivalent date manipulation APIs with full ESM exports, enabling bundlers to include only the functions you actually use.",[184,4394,4396],{"id":4395},"validation-performance-thresholds","Validation & Performance Thresholds",[169,4398,4399],{},"Execute post-fix bundle comparison using Lighthouse CI or WebPageTest. Validate against strict performance thresholds to confirm successful optimization.",[169,4401,4402],{},"Document delta metrics directly in pull request descriptions. Ensure zero regression in runtime functionality by running integration tests against date manipulation and utility logic.",[169,4404,4405],{},[235,4406,3841],{},[229,4408,4409,4412,4415],{},[232,4410,4411],{},"Lighthouse Performance score: >90",[232,4413,4414],{},"Initial route JS transfer size: \u003C150KB gzipped",[232,4416,4417],{},"Unused lodash\u002Fmoment bytes: \u003C5% in coverage report",[169,4419,4420],{},[235,4421,3789],{},[229,4423,4424,4430,4433,4436],{},[232,4425,3095,4426,4429],{},[179,4427,4428],{},"npx lighthouse --view --output=html --output-path=.\u002Freport.html \u003Curl>"," against staging URLs.",[232,4431,4432],{},"Compare pre\u002Fpost bundle sizes via CI pipeline artifacts.",[232,4434,4435],{},"Execute functional test suite for date and utility logic.",[232,4437,4438,4439,4442],{},"Verify no dynamic ",[179,4440,4441],{},"require"," fallbacks remain in compiled output.",[184,4444,4446],{"id":4445},"cicd-integration-regression-prevention","CI\u002FCD Integration & Regression Prevention",[169,4448,4449,4450,4453,4454,750,4457,4460],{},"Implement automated bundle size budgets using ",[179,4451,4452],{},"bundlesize"," or equivalent tools in CI pipelines. Configure ESLint with ",[179,4455,4456],{},"import\u002Fno-restricted-paths",[179,4458,4459],{},"no-restricted-imports"," rules to block full namespace imports from lodash.",[169,4462,4463],{},[235,4464,3841],{},[229,4466,4467,4473],{},[232,4468,4469,4470,4472],{},"CI failure threshold: ",[179,4471,2884],{}," contribution >8KB gzipped",[232,4474,4475,4476,4479],{},"Tolerance for ",[179,4477,4478],{},"import _ from 'lodash'",": 0 occurrences in PRs",[169,4481,4482],{},[235,4483,3789],{},[229,4485,4486,4489,4500,4503],{},[232,4487,4488],{},"Add size budget configuration to your CI workflow file.",[232,4490,4491,4492,4494,4495,217,4497,4499],{},"Configure ESLint ",[179,4493,4459],{}," for the bare ",[179,4496,2860],{},[179,4498,3758],{}," package names.",[232,4501,4502],{},"Set up automated PR size diff reporting.",[232,4504,4505],{},"Document a dependency upgrade checklist for team review.",[1560,4507,1399],{"id":1398},[4509,4510,4511,4528],"table",{},[4512,4513,4514],"thead",{},[4515,4516,4517,4522,4525],"tr",{},[4518,4519,4521],"th",{"align":4520},"left","Mistake",[4518,4523,4524],{"align":4520},"Impact",[4518,4526,4527],{"align":4520},"Fix",[4529,4530,4531,4550,4567,4580],"tbody",{},[4515,4532,4533,4539,4542],{},[4534,4535,4536,4537,2208],"td",{"align":4520},"Using full namespace imports (",[179,4538,4478],{},[4534,4540,4541],{"align":4520},"Bundler includes entire library regardless of usage.",[4534,4543,4544,4545,4547,4548,298],{"align":4520},"Switch to named imports from ",[179,4546,2884],{}," or configure ",[179,4549,3897],{},[4515,4551,4552,4559,4562],{},[4534,4553,4554,4555,743,4557],{"align":4520},"Omitting ",[179,4556,757],{},[179,4558,761],{},[4534,4560,4561],{"align":4520},"Bundler assumes imports have global side effects and skips elimination.",[4534,4563,3941,4564,4566],{"align":4520},[179,4565,3904],{}," to project manifest or verify dependency exports.",[4515,4568,4569,4572,4575],{},[4534,4570,4571],{"align":4520},"Ignoring moment.js locale directory bloat",[4534,4573,4574],{"align":4520},"All locale files bundle by default, adding ~160KB.",[4534,4576,4158,4577,4579],{"align":4520},[179,4578,4117],{}," to restrict active locales.",[4515,4581,4582,4585,4588],{},[4534,4583,4584],{"align":4520},"Mixing CJS and ESM in the same dependency graph",[4534,4586,4587],{"align":4520},"Bundler duplicates modules or fails to optimize, causing hydration errors.",[4534,4589,4590,4591,4594],{"align":4520},"Standardize on ESM entry points, use ",[179,4592,4593],{},"mainFields: ['module', 'main']",", and audit exports.",[1560,4596,1462],{"id":1461},[169,4598,4599,4602,4603,4605,4606,4608,4609,4611],{},[235,4600,4601],{},"Why doesn't tree shaking work on the standard lodash package?","\nThe default ",[179,4604,2860],{}," package exports via CommonJS (",[179,4607,2867],{},"), which lacks static import\u002Fexport syntax. Bundlers cannot safely analyze dynamic property access patterns, so they include the entire library to prevent runtime errors. ",[179,4610,2884],{}," is a separate package that re-exports the same functions as named ES module exports.",[169,4613,4614,4617,4618,4620,4621,750,4623,4625],{},[235,4615,4616],{},"Can I tree shake moment.js without replacing it?","\nPartially. You can strip unused locales using ",[179,4619,4117],{},". However, moment's core architecture relies on dynamic locale loading and global state mutation, making full tree shaking of the core impossible. For new projects, ",[179,4622,2888],{},[179,4624,2891],{}," are better choices.",[169,4627,4628,4631,4632,4634,4635,4637],{},[235,4629,4630],{},"What is the exact bundle size threshold for lodash after optimization?","\nAfter switching to ",[179,4633,2884],{}," and using named imports, each utility typically contributes 1-3KB minified. A realistic threshold for a standard feature set (10-15 utilities) is \u003C8KB gzipped total. Anything above 15KB indicates residual monolithic imports or missing ",[179,4636,1435],{}," declarations.",[169,4639,4640,4643,4644,750,4646,4648,4649,750,4651,4653],{},[235,4641,4642],{},"How do I verify tree shaking actually worked in production?","\nGenerate a production build with ",[179,4645,271],{},[179,4647,2761],{},". Inspect the treemap for ",[179,4650,2884],{},[179,4652,3758],{}," nodes and verify they only contain imported functions. Cross-validate with Chrome DevTools Coverage tab, which should show \u003C5% unused code for these modules after optimization.",[1516,4655,4656],{},"html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sCJTb, html code.shiki .sCJTb{--shiki-default:#FF9492;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}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 .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .s1o6E, html code.shiki .s1o6E{--shiki-default:#72F088;--shiki-default-font-weight:bold;--shiki-dark:#72F088;--shiki-dark-font-weight:bold;--shiki-light:#024C1A;--shiki-light-font-weight:bold}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":305,"searchDepth":319,"depth":319,"links":4658},[4659,4660,4661,4662,4663,4664],{"id":3744,"depth":319,"text":3745},{"id":3821,"depth":319,"text":3822},{"id":3887,"depth":319,"text":3888},{"id":4104,"depth":319,"text":4105},{"id":4395,"depth":319,"text":4396},{"id":4445,"depth":319,"text":4446,"children":4665},[4666,4667],{"id":1398,"depth":348,"text":1399},{"id":1461,"depth":348,"text":1462},"This guide delivers a rapid diagnostic and resolution workflow for frontend engineers facing unexplained bundle bloat from lodash and moment.js. Modern bundlers fail to statically analyze these legacy CommonJS packages without explicit configuration.",{},{"title":4671,"description":4672},"Fix Tree Shaking Issues with Lodash and Moment","Resolve bundle bloat from lodash and moment.js by fixing tree shaking. Diagnostic workflow to eliminate CommonJS barriers and reduce JS payload by 40%+.","KFgRAlOuwTI1agMmTJDIzsrLSIjejXsUYBh7qjMKitE",{"id":4675,"title":123,"body":4676,"description":5491,"extension":1529,"meta":5492,"navigation":351,"path":124,"seo":5493,"stem":125,"__hash__":5495},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Findex.md",{"type":162,"value":4677,"toc":5474},[4678,4681,4687,4691,4708,4717,4721,4760,4764,4783,4787,4812,4816,4834,4838,4844,4847,4969,4975,4978,5168,5175,5178,5324,5328,5385,5387,5396,5416,5435,5462,5471],[165,4679,123],{"id":4680},"modern-module-formats-esm-vs-commonjs",[169,4682,4683,4684,4686],{},"The transition from CommonJS (CJS) to ECMAScript Modules (ESM) represents a fundamental shift in how JavaScript applications are structured, parsed, and delivered. While CJS relies on synchronous, runtime evaluation, ESM enables static analysis, asynchronous loading, and deterministic dependency graphs. For performance-conscious engineering teams, selecting and configuring the correct module format directly impacts bundle size, parse times, and memory allocation. This guide provides a deep-dive into implementation strategies, tooling configurations, and metric optimization thresholds. By aligning your architecture with modern standards, you can eliminate redundant payloads and establish a scalable foundation for broader ",[173,4685,108],{"href":1547}," initiatives.",[184,4688,4690],{"id":4689},"architectural-divergence-static-analysis-vs-runtime-resolution","Architectural Divergence: Static Analysis vs Runtime Resolution",[169,4692,4693,4694,4696,4697,217,4699,4701,4702,4704,4705,4707],{},"Understanding the core execution model is critical for diagnosing performance bottlenecks. CommonJS evaluates modules synchronously at runtime, wrapping exports in a function closure that executes immediately upon ",[179,4695,2511],{},". This dynamic nature prevents bundlers from safely eliminating unused exports without exhaustive runtime tracing. Conversely, ESM enforces static ",[179,4698,825],{},[179,4700,2507],{}," declarations at the top level, allowing parsers to build a complete dependency graph before execution begins. This static structure is the absolute prerequisite for aggressive tree-shaking. When auditing legacy codebases, engineers should leverage ",[173,4703,176],{"href":175}," to identify CJS modules that block dead code elimination. The performance delta is measurable: ESM typically reduces initial parse time by 15–30% in modern V8 engines due to optimized bytecode generation, predictable scope hoisting, and the elimination of runtime ",[179,4706,4441],{}," resolution overhead.",[169,4709,4710,4713,4714,4716],{},[235,4711,4712],{},"Trade-off Analysis:"," CJS offers superior backward compatibility and simpler dynamic ",[179,4715,2511],{}," patterns, but at the cost of static analyzability. ESM sacrifices some runtime flexibility for deterministic builds, enabling bundlers to perform dead code elimination, module concatenation, and parallel network fetching.",[184,4718,4720],{"id":4719},"tooling-configuration-for-hybrid-environments","Tooling Configuration for Hybrid Environments",[169,4722,4723,4724,4726,4727,4730,4731,217,4733,4736,4737,4740,4741,4743,4744,4747,4748,4750,4751,4753,4754,4756,4757,4759],{},"Real-world applications rarely operate in a pure ESM or CJS environment. Configuring bundlers to handle dual formats requires explicit resolution strategies. In ",[179,4725,761],{},", setting ",[179,4728,4729],{},"\"type\": \"module\""," forces ESM interpretation, while ",[179,4732,749],{},[179,4734,4735],{},".mjs"," extensions provide granular control. Webpack and Rollup require ",[179,4738,4739],{},"resolve.mainFields"," to prioritize ",[179,4742,358],{}," over ",[179,4745,4746],{},"main"," for ESM-first resolution. Vite leverages native browser ESM support during development, bypassing bundling entirely until production builds. To maximize efficiency, configure ",[179,4749,757],{}," or provide an explicit array to signal pure modules. When implementing asynchronous chunk loading, ensure your routing layer aligns with ",[173,4752,809],{"href":808}," to prevent waterfall requests. Misconfigured ",[179,4755,363],{}," maps in ",[179,4758,761],{}," frequently cause dual-package hazards, where the same dependency is bundled twice under different formats.",[184,4761,4763],{"id":4762},"runtime-overhead-metric-optimization-thresholds","Runtime Overhead & Metric Optimization Thresholds",[169,4765,4766,4767,4771,4772,4775,4776,217,4779,4782],{},"Module format selection directly influences Core Web Vitals and execution metrics. ESM's asynchronous loading model allows the browser to fetch, parse, and compile modules in parallel, improving Time to First Byte (TTFB) and First Contentful Paint (FCP). Target thresholds for modern SPAs include: initial JavaScript payload \u003C 150KB (gzipped), main thread parse\u002Fcompile time \u003C 100ms, and module instantiation latency \u003C 15ms per chunk. CJS modules introduce synchronous blocking, which can inflate Total Blocking Time (TBT) when large dependency trees are evaluated. To mitigate this, defer non-essential third-party integrations using ",[173,4768,4770],{"href":4769},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Fdeferring-non-critical-analytics-scripts-safely\u002F","Deferring non-critical analytics scripts safely",". Monitor ",[179,4773,4774],{},"PerformanceObserver"," metrics for ",[179,4777,4778],{},"resource",[179,4780,4781],{},"longtask"," entries to detect module resolution spikes.",[184,4784,4786],{"id":4785},"diagnostic-workflows-for-module-resolution-failures","Diagnostic Workflows for Module Resolution Failures",[169,4788,4789,4790,750,4793,4796,4797,750,4800,4803,4804,4807,4808,4811],{},"Hybrid architectures frequently trigger ",[179,4791,4792],{},"ERR_REQUIRE_ESM",[179,4794,4795],{},"SyntaxError: Cannot use import statement outside a module"," errors. A systematic diagnostic workflow begins with verifying Node.js version compatibility (v18+ for stable ESM in production; v14+ for experimental support) and inspecting the dependency tree using ",[179,4798,4799],{},"npm ls",[179,4801,4802],{},"yarn why",". Circular dependencies in CJS cause ",[179,4805,4806],{},"undefined"," exports at runtime because the dependent module has not finished evaluating when the circular reference is accessed. ESM enforces strict temporal dead zones and live bindings, which fail fast and surface the problem earlier. Use ",[179,4809,4810],{},"--trace-warnings"," to surface resolution paths. When troubleshooting persistent memory retention in long-lived server processes, heap snapshots can help identify orphaned module caches.",[184,4813,4815],{"id":4814},"advanced-memory-management-platform-specific-tuning","Advanced Memory Management & Platform-Specific Tuning",[169,4817,4818,4819,4821,4822,4825,4826,4829,4830,4833],{},"Memory footprint optimization varies significantly across execution environments. ESM's strict lexical scoping and immutable export bindings reduce garbage collection pressure compared to CJS's mutable ",[179,4820,2867],{}," objects. However, iOS Safari's JavaScriptCore engine exhibits distinct parsing behaviors for ESM, often requiring explicit ",[179,4823,4824],{},"nomodule"," fallbacks for legacy support. To minimize memory bloat, implement strict module boundaries, avoid global state mutation, and leverage ",[179,4827,4828],{},"import.meta.url"," for asset resolution instead of runtime path manipulation. Monitor ",[179,4831,4832],{},"JSHeapUsedSize"," via the Chrome DevTools Memory API to validate that module format transitions yield measurable heap reductions.",[184,4835,4837],{"id":4836},"production-ready-configurations","Production-Ready Configurations",[1560,4839,4841,4842,2208],{"id":4840},"dual-package-hazard-mitigation-packagejson","Dual-Package Hazard Mitigation (",[179,4843,761],{},[169,4845,4846],{},"Explicitly map conditional exports to prevent duplicate module instantiation across ESM and CJS consumers.",[300,4848,4850],{"className":660,"code":4849,"language":662,"meta":305,"style":305},"{\n  \"name\": \"@org\u002Fcore-lib\",\n  \"type\": \"module\",\n  \"exports\": {\n    \".\": {\n      \"import\": \".\u002Fdist\u002Findex.mjs\",\n      \"require\": \".\u002Fdist\u002Findex.cjs\",\n      \"types\": \".\u002Fdist\u002Findex.d.ts\"\n    },\n    \".\u002Futils\": {\n      \"import\": \".\u002Fdist\u002Futils.mjs\",\n      \"require\": \".\u002Fdist\u002Futils.cjs\"\n    }\n  }\n}\n",[179,4851,4852,4856,4867,4878,4885,4892,4904,4916,4926,4930,4937,4948,4957,4961,4965],{"__ignoreMap":305},[309,4853,4854],{"class":311,"line":312},[309,4855,669],{"class":337},[309,4857,4858,4860,4862,4865],{"class":311,"line":319},[309,4859,2600],{"class":674},[309,4861,686],{"class":337},[309,4863,4864],{"class":341},"\"@org\u002Fcore-lib\"",[309,4866,456],{"class":337},[309,4868,4869,4872,4874,4876],{"class":311,"line":348},[309,4870,4871],{"class":674},"  \"type\"",[309,4873,686],{"class":337},[309,4875,3800],{"class":341},[309,4877,456],{"class":337},[309,4879,4880,4883],{"class":311,"line":355},[309,4881,4882],{"class":674},"  \"exports\"",[309,4884,678],{"class":337},[309,4886,4887,4890],{"class":311,"line":384},[309,4888,4889],{"class":674},"    \".\"",[309,4891,678],{"class":337},[309,4893,4894,4897,4899,4902],{"class":311,"line":398},[309,4895,4896],{"class":674},"      \"import\"",[309,4898,686],{"class":337},[309,4900,4901],{"class":341},"\".\u002Fdist\u002Findex.mjs\"",[309,4903,456],{"class":337},[309,4905,4906,4909,4911,4914],{"class":311,"line":403},[309,4907,4908],{"class":674},"      \"require\"",[309,4910,686],{"class":337},[309,4912,4913],{"class":341},"\".\u002Fdist\u002Findex.cjs\"",[309,4915,456],{"class":337},[309,4917,4918,4921,4923],{"class":311,"line":424},[309,4919,4920],{"class":674},"      \"types\"",[309,4922,686],{"class":337},[309,4924,4925],{"class":341},"\".\u002Fdist\u002Findex.d.ts\"\n",[309,4927,4928],{"class":311,"line":436},[309,4929,639],{"class":337},[309,4931,4932,4935],{"class":311,"line":447},[309,4933,4934],{"class":674},"    \".\u002Futils\"",[309,4936,678],{"class":337},[309,4938,4939,4941,4943,4946],{"class":311,"line":459},[309,4940,4896],{"class":674},[309,4942,686],{"class":337},[309,4944,4945],{"class":341},"\".\u002Fdist\u002Futils.mjs\"",[309,4947,456],{"class":337},[309,4949,4950,4952,4954],{"class":311,"line":470},[309,4951,4908],{"class":674},[309,4953,686],{"class":337},[309,4955,4956],{"class":341},"\".\u002Fdist\u002Futils.cjs\"\n",[309,4958,4959],{"class":311,"line":495},[309,4960,3441],{"class":337},[309,4962,4963],{"class":311,"line":506},[309,4964,544],{"class":337},[309,4966,4967],{"class":311,"line":517},[309,4968,722],{"class":337},[1560,4970,4972,4973,2208],{"id":4971},"webpack-esm-first-tree-shaking-optimization-webpackconfigjs","Webpack ESM-First & Tree-Shaking Optimization (",[179,4974,200],{},[169,4976,4977],{},"Prioritize ESM entry points, enable scope hoisting, and explicitly declare side-effect purity.",[300,4979,4981],{"className":302,"code":4980,"language":304,"meta":305,"style":305},"module.exports = {\n  mode: 'production',\n  resolve: {\n    mainFields: ['module', 'main'],\n    extensions: ['.mjs', '.js', '.json']\n  },\n  optimization: {\n    usedExports: true,\n    sideEffects: true, \u002F\u002F Reads \"sideEffects\" from each package.json\n    concatenateModules: true, \u002F\u002F Scope hoisting for faster execution\n    splitChunks: {\n      chunks: 'all',\n      cacheGroups: {\n        vendor: {\n          test: \u002F[\\\\\u002F]node_modules[\\\\\u002F]\u002F,\n          name: 'vendor',\n          chunks: 'all'\n        }\n      }\n    }\n  }\n};\n",[179,4982,4983,4995,5003,5007,5022,5041,5046,5050,5058,5069,5080,5085,5094,5099,5104,5130,5140,5148,5152,5156,5160,5164],{"__ignoreMap":305},[309,4984,4985,4987,4989,4991,4993],{"class":311,"line":312},[309,4986,358],{"class":326},[309,4988,298],{"class":337},[309,4990,363],{"class":326},[309,4992,330],{"class":322},[309,4994,381],{"class":337},[309,4996,4997,4999,5001],{"class":311,"line":319},[309,4998,3166],{"class":337},[309,5000,566],{"class":341},[309,5002,456],{"class":337},[309,5004,5005],{"class":311,"line":348},[309,5006,4330],{"class":337},[309,5008,5009,5012,5015,5017,5020],{"class":311,"line":355},[309,5010,5011],{"class":337},"    mainFields: [",[309,5013,5014],{"class":341},"'module'",[309,5016,205],{"class":337},[309,5018,5019],{"class":341},"'main'",[309,5021,2990],{"class":337},[309,5023,5024,5027,5030,5032,5034,5036,5039],{"class":311,"line":384},[309,5025,5026],{"class":337},"    extensions: [",[309,5028,5029],{"class":341},"'.mjs'",[309,5031,205],{"class":337},[309,5033,976],{"class":341},[309,5035,205],{"class":337},[309,5037,5038],{"class":341},"'.json'",[309,5040,3277],{"class":337},[309,5042,5043],{"class":311,"line":398},[309,5044,5045],{"class":337},"  },\n",[309,5047,5048],{"class":311,"line":403},[309,5049,3175],{"class":337},[309,5051,5052,5054,5056],{"class":311,"line":424},[309,5053,3180],{"class":337},[309,5055,501],{"class":326},[309,5057,456],{"class":337},[309,5059,5060,5062,5064,5066],{"class":311,"line":436},[309,5061,3189],{"class":337},[309,5063,501],{"class":326},[309,5065,205],{"class":337},[309,5067,5068],{"class":315},"\u002F\u002F Reads \"sideEffects\" from each package.json\n",[309,5070,5071,5073,5075,5077],{"class":311,"line":447},[309,5072,3198],{"class":337},[309,5074,501],{"class":326},[309,5076,205],{"class":337},[309,5078,5079],{"class":315},"\u002F\u002F Scope hoisting for faster execution\n",[309,5081,5082],{"class":311,"line":459},[309,5083,5084],{"class":337},"    splitChunks: {\n",[309,5086,5087,5089,5092],{"class":311,"line":470},[309,5088,590],{"class":337},[309,5090,5091],{"class":341},"'all'",[309,5093,456],{"class":337},[309,5095,5096],{"class":311,"line":495},[309,5097,5098],{"class":337},"      cacheGroups: {\n",[309,5100,5101],{"class":311,"line":506},[309,5102,5103],{"class":337},"        vendor: {\n",[309,5105,5106,5109,5111,5113,5115,5117,5120,5122,5124,5126,5128],{"class":311,"line":517},[309,5107,5108],{"class":337},"          test:",[309,5110,2202],{"class":341},[309,5112,4245],{"class":326},[309,5114,4248],{"class":2030},[309,5116,4251],{"class":326},[309,5118,5119],{"class":341},"node_modules",[309,5121,4245],{"class":326},[309,5123,4248],{"class":2030},[309,5125,4251],{"class":326},[309,5127,2040],{"class":341},[309,5129,456],{"class":337},[309,5131,5132,5135,5138],{"class":311,"line":529},[309,5133,5134],{"class":337},"          name: ",[309,5136,5137],{"class":341},"'vendor'",[309,5139,456],{"class":337},[309,5141,5142,5145],{"class":311,"line":535},[309,5143,5144],{"class":337},"          chunks: ",[309,5146,5147],{"class":341},"'all'\n",[309,5149,5150],{"class":311,"line":541},[309,5151,3287],{"class":337},[309,5153,5154],{"class":311,"line":547},[309,5155,3436],{"class":337},[309,5157,5158],{"class":311,"line":552},[309,5159,3441],{"class":337},[309,5161,5162],{"class":311,"line":560},[309,5163,544],{"class":337},[309,5165,5166],{"class":311,"line":571},[309,5167,657],{"class":337},[1560,5169,5171,5172,2208],{"id":5170},"vite-pre-bundling-production-rollup-viteconfigts","Vite Pre-Bundling & Production Rollup (",[179,5173,5174],{},"vite.config.ts",[169,5176,5177],{},"Leverage Vite's native ESM dev server while optimizing CJS interop and production chunking.",[300,5179,5183],{"className":5180,"code":5181,"language":5182,"meta":305,"style":305},"language-typescript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","import { defineConfig } from 'vite';\n\nexport default defineConfig({\n  optimizeDeps: {\n    include: ['lodash-es', 'dayjs'], \u002F\u002F Force ESM pre-bundling for CJS deps\n    exclude: ['@custom\u002Finternal-lib']\n  },\n  build: {\n    target: 'esnext',\n    rollupOptions: {\n      output: {\n        manualChunks: (id) => {\n          if (id.includes('node_modules')) return 'vendor';\n        }\n      }\n    }\n  }\n});\n","typescript",[179,5184,5185,5197,5201,5211,5215,5232,5242,5248,5252,5260,5264,5268,5282,5302,5306,5310,5314,5318],{"__ignoreMap":305},[309,5186,5187,5189,5191,5193,5195],{"class":311,"line":312},[309,5188,825],{"class":322},[309,5190,3325],{"class":337},[309,5192,831],{"class":322},[309,5194,3330],{"class":341},[309,5196,837],{"class":337},[309,5198,5199],{"class":311,"line":319},[309,5200,352],{"emptyLinePlaceholder":351},[309,5202,5203,5205,5207,5209],{"class":311,"line":348},[309,5204,2507],{"class":322},[309,5206,3343],{"class":322},[309,5208,3346],{"class":333},[309,5210,444],{"class":371},[309,5212,5213],{"class":311,"line":355},[309,5214,4358],{"class":337},[309,5216,5217,5219,5221,5223,5226,5229],{"class":311,"line":384},[309,5218,4363],{"class":337},[309,5220,4366],{"class":341},[309,5222,205],{"class":337},[309,5224,5225],{"class":341},"'dayjs'",[309,5227,5228],{"class":337},"], ",[309,5230,5231],{"class":315},"\u002F\u002F Force ESM pre-bundling for CJS deps\n",[309,5233,5234,5237,5240],{"class":311,"line":398},[309,5235,5236],{"class":337},"    exclude: [",[309,5238,5239],{"class":341},"'@custom\u002Finternal-lib'",[309,5241,3277],{"class":337},[309,5243,5244,5246],{"class":311,"line":403},[309,5245,3446],{"class":337},[309,5247,456],{"class":371},[309,5249,5250],{"class":311,"line":424},[309,5251,3353],{"class":337},[309,5253,5254,5256,5258],{"class":311,"line":436},[309,5255,3358],{"class":337},[309,5257,3361],{"class":341},[309,5259,456],{"class":337},[309,5261,5262],{"class":311,"line":447},[309,5263,3378],{"class":337},[309,5265,5266],{"class":311,"line":459},[309,5267,3383],{"class":337},[309,5269,5270,5272,5274,5276,5278,5280],{"class":311,"line":470},[309,5271,3388],{"class":333},[309,5273,3391],{"class":337},[309,5275,3394],{"class":371},[309,5277,375],{"class":337},[309,5279,378],{"class":322},[309,5281,381],{"class":337},[309,5283,5284,5286,5288,5290,5292,5294,5296,5298,5300],{"class":311,"line":495},[309,5285,3405],{"class":322},[309,5287,3408],{"class":337},[309,5289,3411],{"class":333},[309,5291,338],{"class":337},[309,5293,3416],{"class":341},[309,5295,3419],{"class":337},[309,5297,3422],{"class":322},[309,5299,3425],{"class":341},[309,5301,837],{"class":337},[309,5303,5304],{"class":311,"line":506},[309,5305,3287],{"class":337},[309,5307,5308],{"class":311,"line":517},[309,5309,3436],{"class":337},[309,5311,5312],{"class":311,"line":529},[309,5313,3441],{"class":337},[309,5315,5316],{"class":311,"line":535},[309,5317,544],{"class":337},[309,5319,5320,5322],{"class":311,"line":541},[309,5321,3487],{"class":371},[309,5323,837],{"class":337},[184,5325,5327],{"id":5326},"common-implementation-pitfalls","Common Implementation Pitfalls",[229,5329,5330,5341,5352,5361,5370,5379],{},[232,5331,5332,5340],{},[235,5333,5334,5335,217,5337,5339],{},"Mixing ",[179,5336,825],{},[179,5338,2511],{}," in the same execution context",", causing dual-package hazards and duplicated dependencies.",[232,5342,5343,5351],{},[235,5344,5345,5346,5348,5349],{},"Omitting the ",[179,5347,1435],{}," flag in ",[179,5350,761],{},", which forces bundlers to retain unused CSS and utility modules.",[232,5353,5354,5357,5358,5360],{},[235,5355,5356],{},"Assuming all npm packages support ESM","; failing to verify ",[179,5359,363],{}," maps leads to runtime resolution failures.",[232,5362,5363,5369],{},[235,5364,5365,5366,5368],{},"Using dynamic ",[179,5367,2819],{}," for CJS modules without proper transpilation",", resulting in broken promise chains and incorrect namespace mapping.",[232,5371,5372,5378],{},[235,5373,5374,5375,5377],{},"Neglecting to configure ",[179,5376,4739],{}," in bundlers",", causing fallback to CommonJS and disabling static analysis.",[232,5380,5381,5384],{},[235,5382,5383],{},"Over-relying on runtime module resolution in production",", which increases TTFB and blocks the main thread during synchronous evaluation.",[184,5386,2408],{"id":2407},[169,5388,5389,5392,5393,5395],{},[235,5390,5391],{},"Does ESM always outperform CommonJS in bundle size?","\nNot inherently. ESM enables static analysis, which allows bundlers to safely eliminate dead code. However, if a library lacks proper ",[179,5394,1435],{}," declarations or uses dynamic runtime evaluation, ESM and CJS will produce similar bundle sizes. Performance gains depend on correct tooling configuration and dependency tree hygiene.",[169,5397,5398,5401,5402,5405,5406,5408,5409,5412,5413,5415],{},[235,5399,5400],{},"How do I handle a package that only ships CommonJS in an ESM project?","\nModern bundlers like Vite and Webpack can automatically wrap CJS modules in ESM-compatible shims during the build step. Use ",[179,5403,5404],{},"optimizeDeps.include"," in Vite or ",[179,5407,4125],{}," in Webpack to force pre-bundling. Alternatively, leverage ",[179,5410,5411],{},"createRequire"," from Node's ",[179,5414,358],{}," package in Node.js environments to safely bridge the formats.",[169,5417,5418,5421,5422,2363,5424,5427,5428,5430,5431,750,5433,298],{},[235,5419,5420],{},"What is the \"dual-package hazard\" and how do I prevent it?","\nThe dual-package hazard occurs when the same dependency is imported via both ESM and CJS in a single application, causing it to be instantiated twice with separate internal states. Prevent this by enforcing a single module format via ",[179,5423,761],{},[179,5425,5426],{},"\"type\"",", utilizing explicit ",[179,5429,363],{}," maps, and auditing dependency trees with ",[179,5432,4799],{},[179,5434,4802],{},[169,5436,5437,5443,5444,5446,5447,5450,5451,5453,5454,5457,5458,5461],{},[235,5438,5439,5440,5442],{},"Can I use ",[179,5441,2819],{}," with CommonJS modules?","\nYes, but with caveats. Dynamic ",[179,5445,2819],{}," returns a promise that resolves to the module's namespace object. In CJS, the ",[179,5448,5449],{},"default"," export maps to ",[179,5452,2867],{},". Ensure your bundler is configured to handle ",[179,5455,5456],{},"interopDefault"," correctly, or explicitly access ",[179,5459,5460],{},".default"," when consuming the resolved promise.",[169,5463,5464,5467,5468,5470],{},[235,5465,5466],{},"How does module format impact iOS Safari performance?","\nSafari's JavaScriptCore engine parses ESM asynchronously but enforces strict module graph validation. Large ESM graphs can trigger memory spikes during initial compilation. Mitigate this by precompiling to static chunks, avoiding deeply nested dynamic imports, and utilizing ",[179,5469,4824],{}," fallbacks for legacy Safari versions to prevent redundant parsing.",[1516,5472,5473],{},"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 .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 .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .s1o6E, html code.shiki .s1o6E{--shiki-default:#72F088;--shiki-default-font-weight:bold;--shiki-dark:#72F088;--shiki-dark-font-weight:bold;--shiki-light:#024C1A;--shiki-light-font-weight:bold}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":305,"searchDepth":319,"depth":319,"links":5475},[5476,5477,5478,5479,5480,5481,5489,5490],{"id":4689,"depth":319,"text":4690},{"id":4719,"depth":319,"text":4720},{"id":4762,"depth":319,"text":4763},{"id":4785,"depth":319,"text":4786},{"id":4814,"depth":319,"text":4815},{"id":4836,"depth":319,"text":4837,"children":5482},[5483,5485,5487],{"id":4840,"depth":348,"text":5484},"Dual-Package Hazard Mitigation (package.json)",{"id":4971,"depth":348,"text":5486},"Webpack ESM-First & Tree-Shaking Optimization (webpack.config.js)",{"id":5170,"depth":348,"text":5488},"Vite Pre-Bundling & Production Rollup (vite.config.ts)",{"id":5326,"depth":319,"text":5327},{"id":2407,"depth":319,"text":2408},"The transition from CommonJS (CJS) to ECMAScript Modules (ESM) represents a fundamental shift in how JavaScript applications are structured, parsed, and delivered. While CJS relies on synchronous, runtime evaluation, ESM enables static analysis, asynchronous loading, and deterministic dependency graphs. For performance-conscious engineering teams, selecting and configuring the correct module format directly impacts bundle size, parse times, and memory allocation. This guide provides a deep-dive into implementation strategies, tooling configurations, and metric optimization thresholds. By aligning your architecture with modern standards, you can eliminate redundant payloads and establish a scalable foundation for broader JavaScript Bundle Optimization & Code Splitting initiatives.",{},{"title":123,"description":5494},"Compare ESM and CommonJS for bundle optimization. Learn how module format choice affects tree shaking, parse time, and delivery performance in production.","zlc3HjZOLtGMm6BXWvT19UZA5oH_opjODVrVqochBnU",{"id":5497,"title":129,"body":5498,"description":6268,"extension":1529,"meta":6269,"navigation":351,"path":130,"seo":6270,"stem":131,"__hash__":6273},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002Fdeferring-non-critical-analytics-scripts-safely\u002Findex.md",{"type":162,"value":5499,"toc":6258},[5500,5503,5509,5513,5520,5523,5528,5541,5545,5548,5590,5593,5613,5620,5624,5638,5642,5645,5674,5681,5685,5703,5707,5710,5723,5733,5739,5745,5830,5961,6054,6058,6075,6079,6082,6103,6110,6114,6125,6129,6132,6163,6167,6178,6180,6208,6210,6219,6234,6243,6249,6255],[165,5501,129],{"id":5502},"deferring-non-critical-analytics-scripts-safely-a-diagnostic-implementation-guide",[169,5504,5505,5506,5508],{},"Third-party analytics scripts frequently trigger Lighthouse warnings for render-blocking resources and excessive main-thread work. This directly degrades Core Web Vitals. This guide targets a narrow, high-impact workflow: safely deferring non-critical tracking code without breaking session stitching, consent compliance, or data accuracy. By isolating the exact execution window and applying deterministic loading patterns, frontend teams can recover 150–400ms on First Contentful Paint (FCP) while maintaining >99.5% tracking parity. The strategies outlined here integrate seamlessly with broader ",[173,5507,108],{"href":1547}," initiatives and account for modern module resolution patterns that dictate how vendors package their SDKs.",[184,5510,5512],{"id":5511},"root-cause-analysis-why-analytics-scripts-block-rendering","Root Cause Analysis: Why Analytics Scripts Block Rendering",[169,5514,5515,5516,5519],{},"Synchronous script tags in the ",[179,5517,5518],{},"\u003Chead>"," halt HTML parsing until the resource is fetched, parsed, and executed. Analytics vendors frequently bundle heavy dependencies. These include DOM parsers, network queues, and consent managers that initialize before hydration. This creates immediate main-thread contention.",[169,5521,5522],{},"Network download time is rarely the bottleneck. Execution time inflates Total Blocking Time (TBT) and delays paint cycles. Heavy initialization routines compete directly with the browser's compositor thread, pushing FCP beyond acceptable thresholds.",[169,5524,5525],{},[235,5526,5527],{},"Key Takeaways:",[229,5529,5530,5535,5538],{},[232,5531,5532,5533],{},"Analytics scripts block HTML parsing when placed synchronously in ",[179,5534,5518],{},[232,5536,5537],{},"Execution time, not download time, causes TBT inflation",[232,5539,5540],{},"Heavy initialization routines compete with main thread for paint cycles",[184,5542,5544],{"id":5543},"diagnostic-workflow-devtools-lighthouse-thresholds","Diagnostic Workflow: DevTools & Lighthouse Thresholds",[169,5546,5547],{},"Isolate the exact execution window before applying fixes. Follow this diagnostic sequence:",[2523,5549,5550,5557,5564,5571,5581],{},[232,5551,5552,5553,5556],{},"Open Chrome DevTools → ",[235,5554,5555],{},"Performance"," tab.",[232,5558,5559,5560,5563],{},"Disable cache, set throttling to ",[235,5561,5562],{},"Simulated Fast 4G",", and record a page load.",[232,5565,5566,5567,5570],{},"Filter the timeline by ",[235,5568,5569],{},"Scripting"," and locate long tasks exceeding 50ms.",[232,5572,5573,5574,750,5577,5580],{},"Expand the ",[235,5575,5576],{},"Call Tree",[235,5578,5579],{},"Bottom-Up"," view to trace execution back to analytics domains.",[232,5582,5583,5584,217,5587,298],{},"Run Lighthouse and audit ",[235,5585,5586],{},"Reduce unused JavaScript",[235,5588,5589],{},"Eliminate render-blocking resources",[169,5591,5592],{},"Target the following thresholds post-optimization:",[229,5594,5595,5601,5607],{},[232,5596,5597,5600],{},[235,5598,5599],{},"FCP:"," \u003C 1.8s",[232,5602,5603,5606],{},[235,5604,5605],{},"LCP:"," \u003C 2.5s",[232,5608,5609,5612],{},[235,5610,5611],{},"TBT:"," \u003C 200ms",[169,5614,5615,5616,5619],{},"Module resolution overhead often compounds parsing delays. Understanding how vendors bundle dependencies aligns with patterns discussed in ",[173,5617,123],{"href":5618},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002F",", where tree-shakable exports reduce initial parse cost.",[169,5621,5622],{},[235,5623,5527],{},[229,5625,5626,5629,5632],{},[232,5627,5628],{},"Use Performance tab to pinpoint exact execution start\u002Fend",[232,5630,5631],{},"Target TBT \u003C 200ms and eliminate >50ms long tasks from analytics",[232,5633,5634,5635,5637],{},"Lighthouse render-blocking warnings indicate ",[179,5636,5518],{}," synchronous scripts",[184,5639,5641],{"id":5640},"safe-deferral-strategies-execution-timing-patterns","Safe Deferral Strategies: Execution Timing Patterns",[169,5643,5644],{},"Script loading attributes dictate execution timing and dependency safety.",[229,5646,5647,5652,5662,5668],{},[232,5648,5649,5651],{},[179,5650,1032],{},": Downloads in parallel but executes immediately upon fetch completion. Unsafe for analytics dependent on consent managers or sequential libraries due to race conditions.",[232,5653,5654,5657,5658,5661],{},[179,5655,5656],{},"defer",": Downloads in parallel but executes only after DOM parsing completes (",[179,5659,5660],{},"DOMContentLoaded","). Preserves script order and guarantees non-blocking behavior.",[232,5663,5664,5667],{},[179,5665,5666],{},"dynamic import()",": Loads modules on-demand. Ideal for below-fold tracking or post-interaction events.",[232,5669,5670,5673],{},[179,5671,5672],{},"requestIdleCallback",": Defers initialization until the main thread is idle. Prevents paint interference but requires a fallback timeout for browsers that don't support it.",[169,5675,5676,5677,5680],{},"Avoid using ",[179,5678,5679],{},"setTimeout"," as a deferral mechanism. It executes unpredictably relative to paint cycles and can still block rendering if scheduled during a critical layout phase.",[169,5682,5683],{},[235,5684,5527],{},[229,5686,5687,5692,5697],{},[232,5688,5689,5691],{},[179,5690,5656],{}," guarantees DOM parsing completion before execution",[232,5693,5694,5696],{},[179,5695,5672],{}," safely delays non-critical init until idle",[232,5698,5699,5700,5702],{},"Avoid ",[179,5701,1032],{}," for scripts requiring sequential dependency loading",[184,5704,5706],{"id":5705},"implementation-tag-manager-native-script-loading","Implementation: Tag Manager & Native Script Loading",[169,5708,5709],{},"Apply deterministic loading patterns using native HTML and JavaScript.",[169,5711,5712,5717,5718,5720,5721,298],{},[235,5713,5714,5715],{},"Step 1: Replace synchronous tags with ",[179,5716,5656],{},"\nMove all third-party analytics scripts out of ",[179,5719,5518],{}," and append ",[179,5722,5656],{},[169,5724,5725,5728,5729,5732],{},[235,5726,5727],{},"Step 2: Implement dataLayer buffering","\nInitialize the ",[179,5730,5731],{},"dataLayer"," array before the SDK loads to capture early events.",[169,5734,5735,5738],{},[235,5736,5737],{},"Step 3: Wrap heavy SDKs in dynamic imports","\nTrigger initialization after user interaction or route completion.",[169,5740,5741,5744],{},[235,5742,5743],{},"Step 4: Gate behind explicit consent","\nNever execute tracking until the consent state resolves.",[300,5746,5750],{"className":5747,"code":5748,"language":5749,"meta":305,"style":305},"language-html shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u003C!-- Native defer pattern with dataLayer buffering -->\n\u003Cscript>\n  window.dataLayer = window.dataLayer || [];\n  window.dataLayer.push({event: 'pageview'});\n\u003C\u002Fscript>\n\u003Cscript defer src=\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-XXXXXXX\">\u003C\u002Fscript>\n","html",[179,5751,5752,5757,5768,5782,5797,5806],{"__ignoreMap":305},[309,5753,5754],{"class":311,"line":312},[309,5755,5756],{"class":315},"\u003C!-- Native defer pattern with dataLayer buffering -->\n",[309,5758,5759,5762,5765],{"class":311,"line":319},[309,5760,5761],{"class":337},"\u003C",[309,5763,5764],{"class":674},"script",[309,5766,5767],{"class":337},">\n",[309,5769,5770,5773,5775,5778,5780],{"class":311,"line":348},[309,5771,5772],{"class":337},"  window.dataLayer ",[309,5774,1605],{"class":322},[309,5776,5777],{"class":337}," window.dataLayer ",[309,5779,1056],{"class":322},[309,5781,395],{"class":337},[309,5783,5784,5787,5789,5792,5795],{"class":311,"line":355},[309,5785,5786],{"class":337},"  window.dataLayer.",[309,5788,430],{"class":333},[309,5790,5791],{"class":337},"({event: ",[309,5793,5794],{"class":341},"'pageview'",[309,5796,1364],{"class":337},[309,5798,5799,5802,5804],{"class":311,"line":384},[309,5800,5801],{"class":337},"\u003C\u002F",[309,5803,5764],{"class":674},[309,5805,5767],{"class":337},[309,5807,5808,5810,5812,5815,5818,5820,5823,5826,5828],{"class":311,"line":398},[309,5809,5761],{"class":337},[309,5811,5764],{"class":674},[309,5813,5814],{"class":326}," defer",[309,5816,5817],{"class":326}," src",[309,5819,1605],{"class":337},[309,5821,5822],{"class":341},"\"https:\u002F\u002Fwww.googletagmanager.com\u002Fgtag\u002Fjs?id=G-XXXXXXX\"",[309,5824,5825],{"class":337},">\u003C\u002F",[309,5827,5764],{"class":674},[309,5829,5767],{"class":337},[300,5831,5833],{"className":302,"code":5832,"language":304,"meta":305,"style":305},"\u002F\u002F requestIdleCallback wrapper for non-critical init\nfunction initAnalytics() {\n  if ('requestIdleCallback' in window) {\n    requestIdleCallback(() => {\n      window.gtag('config', 'G-XXXXXXX');\n    }, { timeout: 2000 });\n  } else {\n    \u002F\u002F Fallback for browsers without requestIdleCallback (Safari \u003C 16.4)\n    setTimeout(() => window.gtag('config', 'G-XXXXXXX'), 100);\n  }\n}\n",[179,5834,5835,5840,5850,5865,5877,5897,5908,5918,5923,5953,5957],{"__ignoreMap":305},[309,5836,5837],{"class":311,"line":312},[309,5838,5839],{"class":315},"\u002F\u002F requestIdleCallback wrapper for non-critical init\n",[309,5841,5842,5845,5848],{"class":311,"line":319},[309,5843,5844],{"class":322},"function",[309,5846,5847],{"class":333}," initAnalytics",[309,5849,1041],{"class":337},[309,5851,5852,5854,5856,5859,5862],{"class":311,"line":348},[309,5853,406],{"class":322},[309,5855,368],{"class":337},[309,5857,5858],{"class":341},"'requestIdleCallback'",[309,5860,5861],{"class":322}," in",[309,5863,5864],{"class":337}," window) {\n",[309,5866,5867,5870,5873,5875],{"class":311,"line":355},[309,5868,5869],{"class":333},"    requestIdleCallback",[309,5871,5872],{"class":337},"(() ",[309,5874,378],{"class":322},[309,5876,381],{"class":337},[309,5878,5879,5882,5885,5887,5890,5892,5895],{"class":311,"line":384},[309,5880,5881],{"class":337},"      window.",[309,5883,5884],{"class":333},"gtag",[309,5886,338],{"class":337},[309,5888,5889],{"class":341},"'config'",[309,5891,205],{"class":337},[309,5893,5894],{"class":341},"'G-XXXXXXX'",[309,5896,1081],{"class":337},[309,5898,5899,5902,5905],{"class":311,"line":398},[309,5900,5901],{"class":337},"    }, { timeout: ",[309,5903,5904],{"class":326},"2000",[309,5906,5907],{"class":337}," });\n",[309,5909,5910,5913,5916],{"class":311,"line":403},[309,5911,5912],{"class":337},"  } ",[309,5914,5915],{"class":322},"else",[309,5917,381],{"class":337},[309,5919,5920],{"class":311,"line":424},[309,5921,5922],{"class":315},"    \u002F\u002F Fallback for browsers without requestIdleCallback (Safari \u003C 16.4)\n",[309,5924,5925,5928,5930,5932,5935,5937,5939,5941,5943,5945,5948,5951],{"class":311,"line":436},[309,5926,5927],{"class":333},"    setTimeout",[309,5929,5872],{"class":337},[309,5931,378],{"class":322},[309,5933,5934],{"class":337}," window.",[309,5936,5884],{"class":333},[309,5938,338],{"class":337},[309,5940,5889],{"class":341},[309,5942,205],{"class":337},[309,5944,5894],{"class":341},[309,5946,5947],{"class":337},"), ",[309,5949,5950],{"class":326},"100",[309,5952,1081],{"class":337},[309,5954,5955],{"class":311,"line":447},[309,5956,544],{"class":337},[309,5958,5959],{"class":311,"line":459},[309,5960,722],{"class":337},[300,5962,5964],{"className":302,"code":5963,"language":304,"meta":305,"style":305},"\u002F\u002F Dynamic import with consent check\nasync function loadAnalyticsSafely() {\n  const consent = await checkUserConsent();\n  if (consent) {\n    const { init } = await import('.\u002Fheavy-analytics-sdk.js');\n    init({ trackingId: 'UA-XXXXX' });\n  }\n}\n",[179,5965,5966,5971,5982,6000,6007,6033,6046,6050],{"__ignoreMap":305},[309,5967,5968],{"class":311,"line":312},[309,5969,5970],{"class":315},"\u002F\u002F Dynamic import with consent check\n",[309,5972,5973,5975,5977,5980],{"class":311,"line":319},[309,5974,1032],{"class":322},[309,5976,1035],{"class":322},[309,5978,5979],{"class":333}," loadAnalyticsSafely",[309,5981,1041],{"class":337},[309,5983,5984,5986,5989,5991,5994,5997],{"class":311,"line":348},[309,5985,387],{"class":322},[309,5987,5988],{"class":326}," consent",[309,5990,330],{"class":322},[309,5992,5993],{"class":322}," await",[309,5995,5996],{"class":333}," checkUserConsent",[309,5998,5999],{"class":337},"();\n",[309,6001,6002,6004],{"class":311,"line":355},[309,6003,406],{"class":322},[309,6005,6006],{"class":337}," (consent) {\n",[309,6008,6009,6012,6014,6017,6019,6021,6023,6026,6028,6031],{"class":311,"line":384},[309,6010,6011],{"class":322},"    const",[309,6013,1635],{"class":337},[309,6015,6016],{"class":326},"init",[309,6018,1641],{"class":337},[309,6020,1605],{"class":322},[309,6022,5993],{"class":322},[309,6024,6025],{"class":322}," import",[309,6027,338],{"class":337},[309,6029,6030],{"class":341},"'.\u002Fheavy-analytics-sdk.js'",[309,6032,1081],{"class":337},[309,6034,6035,6038,6041,6044],{"class":311,"line":398},[309,6036,6037],{"class":333},"    init",[309,6039,6040],{"class":337},"({ trackingId: ",[309,6042,6043],{"class":341},"'UA-XXXXX'",[309,6045,5907],{"class":337},[309,6047,6048],{"class":311,"line":403},[309,6049,544],{"class":337},[309,6051,6052],{"class":311,"line":424},[309,6053,722],{"class":337},[169,6055,6056],{},[235,6057,5527],{},[229,6059,6060,6067,6072],{},[232,6061,6062,6063,6066],{},"Buffer ",[179,6064,6065],{},"dataLayer.push"," calls before SDK loads to prevent data loss",[232,6068,1884,6069,6071],{},[179,6070,5666],{}," for below-fold or post-interaction tracking",[232,6073,6074],{},"Always defer until consent state is explicitly resolved",[184,6076,6078],{"id":6077},"validation-monitoring-ensuring-data-integrity","Validation & Monitoring: Ensuring Data Integrity",[169,6080,6081],{},"Verify deferral does not compromise tracking accuracy.",[2523,6083,6084,6087,6097,6100],{},[232,6085,6086],{},"Compare the network waterfall pre- and post-deployment. Confirm analytics requests shift below the critical rendering path.",[232,6088,6089,6090,750,6093,6096],{},"Validate tracking parity using Real-Time dashboards and the Network inspector. Filter for ",[179,6091,6092],{},"collect",[179,6094,6095],{},"batch"," endpoints.",[232,6098,6099],{},"Implement synthetic monitoring to detect script load failures or CSP violations.",[232,6101,6102],{},"Configure fallback logging to capture dropped events during deferral windows.",[169,6104,6105,6106,6109],{},"Maintain an acceptable data variance threshold of ",[235,6107,6108],{},"\u003C0.5%",". Any deviation beyond this requires immediate rollback or buffer adjustment.",[169,6111,6112],{},[235,6113,5527],{},[229,6115,6116,6119,6122],{},[232,6117,6118],{},"Verify tracking parity via network endpoint inspection",[232,6120,6121],{},"Monitor script load failures with synthetic checks",[232,6123,6124],{},"Maintain \u003C0.5% acceptable data variance during deferral",[184,6126,6128],{"id":6127},"edge-cases-compliance-considerations","Edge Cases & Compliance Considerations",[169,6130,6131],{},"Deferral introduces specific architectural and legal constraints.",[229,6133,6134,6151,6157],{},[232,6135,6136,6139,6140,750,6143,6146,6147,6150],{},[235,6137,6138],{},"SPA Routing:"," Deferred scripts miss virtual pageviews. Hook into the router's ",[179,6141,6142],{},"afterEach",[179,6144,6145],{},"history"," listener to manually trigger ",[179,6148,6149],{},"pageview"," events after SDK initialization.",[232,6152,6153,6156],{},[235,6154,6155],{},"Consent Mode:"," GDPR\u002FCCPA requires explicit user approval before tracking. Consent banners must load synchronously or with high priority. Only defer the tracking SDK until consent resolves — never defer the consent UI itself.",[232,6158,6159,6162],{},[235,6160,6161],{},"Ad Blockers:"," Deferred scripts remain vulnerable to network-level blocking. Design for graceful degradation by wrapping analytics calls in try\u002Fcatch blocks and routing to first-party fallback endpoints.",[169,6164,6165],{},[235,6166,5527],{},[229,6168,6169,6172,6175],{},[232,6170,6171],{},"SPA routing requires manual pageview triggers after deferral",[232,6173,6174],{},"Consent mode must gate script execution, not merely defer it",[232,6176,6177],{},"Ad blockers may still block deferred scripts; design for graceful degradation",[184,6179,1399],{"id":1398},[229,6181,6182,6190,6193,6199,6205],{},[232,6183,1418,6184,6186,6187,6189],{},[179,6185,1032],{}," on scripts that depend on ",[179,6188,5731],{}," initialization, causing race conditions and dropped events",[232,6191,6192],{},"Deferring consent-required trackers without gating them behind explicit user approval, violating GDPR\u002FCCPA",[232,6194,6195,6196,6198],{},"Relying on ",[179,6197,5679],{}," for deferral, which executes unpredictably and can still block paint",[232,6200,6201,6202,6204],{},"Failing to buffer early ",[179,6203,6065],{}," calls, resulting in lost pageview data on first load",[232,6206,6207],{},"Ignoring SPA routing, causing deferred scripts to miss subsequent virtual pageviews",[184,6209,1462],{"id":1461},[169,6211,6212,6215,6216,6218],{},[235,6213,6214],{},"Does deferring analytics scripts break tracking accuracy?","\nNo, provided you buffer early events using a ",[179,6217,5731],{}," array and ensure the SDK initializes before the user navigates away. Proper deferral maintains >99.5% tracking parity while significantly improving FCP and TBT.",[169,6220,6221,6224,6225,6227,6228,6230,6231,6233],{},[235,6222,6223],{},"Should I use async or defer for third-party analytics?","\nAlways use ",[179,6226,5656],{}," for analytics that depend on other scripts or initialization order. ",[179,6229,1032],{}," executes immediately upon download, which can cause race conditions with consent managers or dependent libraries. ",[179,6232,5656],{}," guarantees execution after DOM parsing, preserving script order.",[169,6235,6236,6239,6240,6242],{},[235,6237,6238],{},"How do I defer analytics in a Single Page Application (SPA)?","\nIn SPAs, defer the initial SDK load, then manually trigger pageview events using the router's ",[179,6241,6142],{}," or history listener. Ensure the SDK is fully initialized before pushing virtual pageviews to avoid dropped data.",[169,6244,6245,6248],{},[235,6246,6247],{},"What Lighthouse thresholds indicate successful deferral?","\nSuccessful deferral should eliminate \"Eliminate render-blocking resources\" warnings, reduce Total Blocking Time (TBT) to \u003C200ms, and push First Contentful Paint (FCP) under 1.8s on simulated Fast 4G connections.",[169,6250,6251,6254],{},[235,6252,6253],{},"Can I safely defer consent management scripts?","\nNo. Consent banners and preference centers must load synchronously or with high priority to comply with GDPR\u002FCCPA. Only defer the actual analytics tracking SDKs until explicit consent is granted.",[1516,6256,6257],{},"html pre.shiki code .sXJMR, html code.shiki .sXJMR{--shiki-default:#BDC4CC;--shiki-dark:#BDC4CC;--shiki-light:#66707B}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 .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 .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--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);}",{"title":305,"searchDepth":319,"depth":319,"links":6259},[6260,6261,6262,6263,6264,6265,6266,6267],{"id":5511,"depth":319,"text":5512},{"id":5543,"depth":319,"text":5544},{"id":5640,"depth":319,"text":5641},{"id":5705,"depth":319,"text":5706},{"id":6077,"depth":319,"text":6078},{"id":6127,"depth":319,"text":6128},{"id":1398,"depth":319,"text":1399},{"id":1461,"depth":319,"text":1462},"Third-party analytics scripts frequently trigger Lighthouse warnings for render-blocking resources and excessive main-thread work. This directly degrades Core Web Vitals. This guide targets a narrow, high-impact workflow: safely deferring non-critical tracking code without breaking session stitching, consent compliance, or data accuracy. By isolating the exact execution window and applying deterministic loading patterns, frontend teams can recover 150–400ms on First Contentful Paint (FCP) while maintaining >99.5% tracking parity. The strategies outlined here integrate seamlessly with broader JavaScript Bundle Optimization & Code Splitting initiatives and account for modern module resolution patterns that dictate how vendors package their SDKs.",{},{"title":6271,"description":6272},"Defer Non-Critical Analytics Scripts Safely","Safely defer third-party analytics scripts without losing data. Recover 150–400ms FCP while maintaining tracking accuracy and consent compliance.","BjoCubX-y8qSqeJSwp1kE3k2b2JA6whUr2Nr-vqRLGQ",1780418356004]