[{"data":1,"prerenderedAt":1395},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques":1387},{"id":4,"title":5,"body":6,"description":1380,"extension":1381,"meta":1382,"navigation":228,"path":1383,"seo":1384,"stem":1385,"__hash__":1386},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Findex.md","Webpack Bundle Analysis Techniques: Diagnostic Workflows & Threshold Optimization",{"type":7,"value":8,"toc":1371},"minimark",[9,13,28,33,36,70,73,96,107,111,122,149,596,666,670,673,680,718,722,738,753,1216,1220,1234,1244,1247,1251,1314,1318,1324,1330,1339,1367],[10,11,5],"h1",{"id":12},"webpack-bundle-analysis-techniques-diagnostic-workflows-threshold-optimization",[14,15,16,17,22,23,27],"p",{},"Modern frontend architectures demand precise visibility into JavaScript payload composition. Without systematic ",[18,19,21],"a",{"href":20},"\u002Fjavascript-bundle-optimization-code-splitting\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 ",[24,25,26],"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.",[29,30,32],"h2",{"id":31},"establishing-baseline-metrics-and-analysis-prerequisites","Establishing Baseline Metrics and Analysis Prerequisites",[14,34,35],{},"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.",[14,37,38,39,42,43,46,47,50,51,54,55,58,59,62,63,66,67,69],{},"Configure the ",[24,40,41],{},"stats"," object in ",[24,44,45],{},"webpack.config.js"," to output granular module resolution data without inflating build times or memory consumption. Enable ",[24,48,49],{},"modules: true",", ",[24,52,53],{},"chunks: true",", and ",[24,56,57],{},"assets: true"," while explicitly disabling verbose ",[24,60,61],{},"children"," and ",[24,64,65],{},"moduleTrace"," fields. This configuration keeps the resulting ",[24,68,26],{}," artifact under 5MB, preventing memory exhaustion during CI runs and ensuring downstream analysis tools parse efficiently.",[14,71,72],{},"Understanding the distinction between compression types is critical for accurate diagnostics:",[74,75,76,84,90],"ul",{},[77,78,79,83],"li",{},[80,81,82],"strong",{},"Raw Size:"," Useful only for debugging module resolution paths and identifying unminified code leaks.",[77,85,86,89],{},[80,87,88],{},"Minified Size:"," Correlates directly with JavaScript parse and compile time on the main thread.",[77,91,92,95],{},[80,93,94],{},"Gzip\u002FBrotli Size:"," Represents actual network transfer cost and dictates initial load latency.",[14,97,98,99,102,103,106],{},"Isolate your analysis environment by running builds against a clean ",[24,100,101],{},"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 ",[24,104,105],{},"mode: 'production'"," outputs to capture deterministic, deployment-ready artifacts.",[29,108,110],{"id":109},"core-tooling-configuration-for-production-analysis","Core Tooling Configuration for Production Analysis",[14,112,113,114,117,118,121],{},"Production analysis requires deterministic, non-blocking tooling that integrates seamlessly into existing build pipelines. The ",[24,115,116],{},"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 ",[24,119,120],{},"--env analyze"," CLI flag to ensure zero impact on local iteration velocity.",[14,123,124,125,128,129,132,133,135,136,139,140,143,144,148],{},"Set ",[24,126,127],{},"analyzerMode: 'static'"," to generate portable HTML reports that can be archived alongside build artifacts or attached to pull requests. Pair this with ",[24,130,131],{},"webpack-stats-plugin"," (or the built-in ",[24,134,26],{}," generation) to output a normalized JSON payload compatible with CI size-checking scripts. In headless environments, explicitly configure ",[24,137,138],{},"openAnalyzer: false"," and define a deterministic ",[24,141,142],{},"reportFilename"," that includes build hashes or commit SHAs for traceability. For detailed setup steps, refer to ",[18,145,147],{"href":146},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002F","How to configure webpack-bundle-analyzer for production",".",[150,151,156],"pre",{"className":152,"code":153,"language":154,"meta":155,"style":155},"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;\nconst { StatsWriterPlugin } = require('webpack-stats-plugin');\n\nmodule.exports = (env) => {\n const plugins = [];\n \n if (env.ANALYZE) {\n plugins.push(\n new BundleAnalyzerPlugin({\n analyzerMode: 'static',\n openAnalyzer: false,\n reportFilename: `bundle-report-${Date.now()}.html`,\n defaultSizes: 'parsed' \u002F\u002F Aligns with parse-time metrics\n }),\n new StatsWriterPlugin({\n filename: 'stats.json',\n fields: ['assets', 'chunks', 'modules'],\n transform: (assets) => JSON.stringify(assets, null, 2)\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","",[24,157,158,167,196,223,230,259,273,279,294,306,317,329,340,365,377,383,393,404,426,464,470,476,482,487,495,506,512,523,533,543,553,563,572,578,584,590],{"__ignoreMap":155},[159,160,163],"span",{"class":161,"line":162},"line",1,[159,164,166],{"class":165},"sXJMR","\u002F\u002F webpack.config.js\n",[159,168,170,174,178,181,185,189,193],{"class":161,"line":169},2,[159,171,173],{"class":172},"sCJTb","const",[159,175,177],{"class":176},"s5hCx"," BundleAnalyzerPlugin",[159,179,180],{"class":172}," =",[159,182,184],{"class":183},"sGhOu"," require",[159,186,188],{"class":187},"s3sCt","(",[159,190,192],{"class":191},"sJdzJ","'webpack-bundle-analyzer'",[159,194,195],{"class":187},").BundleAnalyzerPlugin;\n",[159,197,199,201,204,207,210,213,215,217,220],{"class":161,"line":198},3,[159,200,173],{"class":172},[159,202,203],{"class":187}," { ",[159,205,206],{"class":176},"StatsWriterPlugin",[159,208,209],{"class":187}," } ",[159,211,212],{"class":172},"=",[159,214,184],{"class":183},[159,216,188],{"class":187},[159,218,219],{"class":191},"'webpack-stats-plugin'",[159,221,222],{"class":187},");\n",[159,224,226],{"class":161,"line":225},4,[159,227,229],{"emptyLinePlaceholder":228},true,"\n",[159,231,233,236,238,241,243,246,250,253,256],{"class":161,"line":232},5,[159,234,235],{"class":176},"module",[159,237,148],{"class":187},[159,239,240],{"class":176},"exports",[159,242,180],{"class":172},[159,244,245],{"class":187}," (",[159,247,249],{"class":248},"spFnL","env",[159,251,252],{"class":187},") ",[159,254,255],{"class":172},"=>",[159,257,258],{"class":187}," {\n",[159,260,262,265,268,270],{"class":161,"line":261},6,[159,263,264],{"class":172}," const",[159,266,267],{"class":176}," plugins",[159,269,180],{"class":172},[159,271,272],{"class":187}," [];\n",[159,274,276],{"class":161,"line":275},7,[159,277,278],{"class":187}," \n",[159,280,282,285,288,291],{"class":161,"line":281},8,[159,283,284],{"class":172}," if",[159,286,287],{"class":187}," (env.",[159,289,290],{"class":176},"ANALYZE",[159,292,293],{"class":187},") {\n",[159,295,297,300,303],{"class":161,"line":296},9,[159,298,299],{"class":187}," plugins.",[159,301,302],{"class":183},"push",[159,304,305],{"class":187},"(\n",[159,307,309,312,314],{"class":161,"line":308},10,[159,310,311],{"class":172}," new",[159,313,177],{"class":183},[159,315,316],{"class":187},"({\n",[159,318,320,323,326],{"class":161,"line":319},11,[159,321,322],{"class":187}," analyzerMode: ",[159,324,325],{"class":191},"'static'",[159,327,328],{"class":187},",\n",[159,330,332,335,338],{"class":161,"line":331},12,[159,333,334],{"class":187}," openAnalyzer: ",[159,336,337],{"class":176},"false",[159,339,328],{"class":187},[159,341,343,346,349,352,354,357,360,363],{"class":161,"line":342},13,[159,344,345],{"class":187}," reportFilename: ",[159,347,348],{"class":191},"`bundle-report-${",[159,350,351],{"class":187},"Date",[159,353,148],{"class":191},[159,355,356],{"class":183},"now",[159,358,359],{"class":191},"()",[159,361,362],{"class":191},"}.html`",[159,364,328],{"class":187},[159,366,368,371,374],{"class":161,"line":367},14,[159,369,370],{"class":187}," defaultSizes: ",[159,372,373],{"class":191},"'parsed'",[159,375,376],{"class":165}," \u002F\u002F Aligns with parse-time metrics\n",[159,378,380],{"class":161,"line":379},15,[159,381,382],{"class":187}," }),\n",[159,384,386,388,391],{"class":161,"line":385},16,[159,387,311],{"class":172},[159,389,390],{"class":183}," StatsWriterPlugin",[159,392,316],{"class":187},[159,394,396,399,402],{"class":161,"line":395},17,[159,397,398],{"class":187}," filename: ",[159,400,401],{"class":191},"'stats.json'",[159,403,328],{"class":187},[159,405,407,410,413,415,418,420,423],{"class":161,"line":406},18,[159,408,409],{"class":187}," fields: [",[159,411,412],{"class":191},"'assets'",[159,414,50],{"class":187},[159,416,417],{"class":191},"'chunks'",[159,419,50],{"class":187},[159,421,422],{"class":191},"'modules'",[159,424,425],{"class":187},"],\n",[159,427,429,432,435,438,440,442,445,447,450,453,456,458,461],{"class":161,"line":428},19,[159,430,431],{"class":183}," transform",[159,433,434],{"class":187},": (",[159,436,437],{"class":248},"assets",[159,439,252],{"class":187},[159,441,255],{"class":172},[159,443,444],{"class":176}," JSON",[159,446,148],{"class":187},[159,448,449],{"class":183},"stringify",[159,451,452],{"class":187},"(assets, ",[159,454,455],{"class":176},"null",[159,457,50],{"class":187},[159,459,460],{"class":176},"2",[159,462,463],{"class":187},")\n",[159,465,467],{"class":161,"line":466},20,[159,468,469],{"class":187}," })\n",[159,471,473],{"class":161,"line":472},21,[159,474,475],{"class":187}," );\n",[159,477,479],{"class":161,"line":478},22,[159,480,481],{"class":187}," }\n",[159,483,485],{"class":161,"line":484},23,[159,486,229],{"emptyLinePlaceholder":228},[159,488,490,493],{"class":161,"line":489},24,[159,491,492],{"class":172}," return",[159,494,258],{"class":187},[159,496,498,501,504],{"class":161,"line":497},25,[159,499,500],{"class":187}," mode: ",[159,502,503],{"class":191},"'production'",[159,505,328],{"class":187},[159,507,509],{"class":161,"line":508},26,[159,510,511],{"class":187}," stats: {\n",[159,513,515,518,521],{"class":161,"line":514},27,[159,516,517],{"class":187}," assets: ",[159,519,520],{"class":176},"true",[159,522,328],{"class":187},[159,524,526,529,531],{"class":161,"line":525},28,[159,527,528],{"class":187}," chunks: ",[159,530,520],{"class":176},[159,532,328],{"class":187},[159,534,536,539,541],{"class":161,"line":535},29,[159,537,538],{"class":187}," modules: ",[159,540,520],{"class":176},[159,542,328],{"class":187},[159,544,546,549,551],{"class":161,"line":545},30,[159,547,548],{"class":187}," children: ",[159,550,337],{"class":176},[159,552,328],{"class":187},[159,554,556,559,561],{"class":161,"line":555},31,[159,557,558],{"class":187}," moduleTrace: ",[159,560,337],{"class":176},[159,562,328],{"class":187},[159,564,566,569],{"class":161,"line":565},32,[159,567,568],{"class":187}," source: ",[159,570,571],{"class":176},"false\n",[159,573,575],{"class":161,"line":574},33,[159,576,577],{"class":187}," },\n",[159,579,581],{"class":161,"line":580},34,[159,582,583],{"class":187}," plugins\n",[159,585,587],{"class":161,"line":586},35,[159,588,589],{"class":187}," };\n",[159,591,593],{"class":161,"line":592},36,[159,594,595],{"class":187},"};\n",[150,597,601],{"className":598,"code":599,"language":600,"meta":155,"style":155},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F package.json\n{\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",[24,602,603,608,613,622,635,647,657,661],{"__ignoreMap":155},[159,604,605],{"class":161,"line":162},[159,606,607],{"class":165},"\u002F\u002F package.json\n",[159,609,610],{"class":161,"line":169},[159,611,612],{"class":187},"{\n",[159,614,615,619],{"class":161,"line":198},[159,616,618],{"class":617},"sj_b3"," \"scripts\"",[159,620,621],{"class":187},": {\n",[159,623,624,627,630,633],{"class":161,"line":225},[159,625,626],{"class":617}," \"build\"",[159,628,629],{"class":187},": ",[159,631,632],{"class":191},"\"webpack --config webpack.config.js\"",[159,634,328],{"class":187},[159,636,637,640,642,645],{"class":161,"line":232},[159,638,639],{"class":617}," \"analyze\"",[159,641,629],{"class":187},[159,643,644],{"class":191},"\"webpack --config webpack.config.js --env ANALYZE=true\"",[159,646,328],{"class":187},[159,648,649,652,654],{"class":161,"line":261},[159,650,651],{"class":617}," \"check-budget\"",[159,653,629],{"class":187},[159,655,656],{"class":191},"\"node scripts\u002Fcheck-bundle-budget.mjs\"\n",[159,658,659],{"class":161,"line":275},[159,660,481],{"class":187},[159,662,663],{"class":161,"line":281},[159,664,665],{"class":187},"}\n",[29,667,669],{"id":668},"interpreting-the-dependency-graph-and-module-overlap","Interpreting the Dependency Graph and Module Overlap",[14,671,672],{},"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.",[14,674,675,676,679],{},"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 ",[24,677,678],{},"SplitChunksPlugin",". Overlap directly increases network redundancy and forces the browser to re-parse identical code across navigation boundaries.",[14,681,682,683,686,687,689,690,693,694,697,698,701,702,705,706,50,709,712,713,717],{},"Map ESM vs CommonJS resolution paths to identify tree-shaking blockers. Inspect ",[24,684,685],{},"module.type"," in ",[24,688,26],{}," to verify entry points. When modules resolve to ",[24,691,692],{},".cjs"," or ",[24,695,696],{},"index.js"," without explicit ",[24,699,700],{},"sideEffects: false"," declarations in their ",[24,703,704],{},"package.json",", dead code persists regardless of import patterns. Audit polyfill injection and runtime helpers (",[24,707,708],{},"@babel\u002Fruntime",[24,710,711],{},"tslib",") to ensure they are externalized or deduplicated. Cross-reference findings with ",[18,714,716],{"href":715},"\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.",[29,719,721],{"id":720},"diagnostic-workflow-for-ci-integration-and-regression-prevention","Diagnostic Workflow for CI Integration and Regression Prevention",[14,723,724,725,727,728,62,730,733,734,737],{},"Manual analysis does not scale across engineering teams. Integrate bundle auditing directly into pull request workflows to enforce performance accountability. Generate ",[24,726,26],{}," during the build step, then pipe it to a lightweight Node.js script that parses ",[24,729,437],{},[24,731,732],{},"chunks"," arrays. Compare current sizes against a baseline ",[24,735,736],{},"budget.json"," file committed to the repository.",[14,739,740,741,693,744,747,748,752],{},"Enforce hard failures when initial JS exceeds 150KB or when any single chunk grows by >15% relative to the main branch. Use ",[24,742,743],{},"gzip-size",[24,745,746],{},"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 ",[18,749,751],{"href":750},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002F","Dynamic Imports and Route-Based Splitting"," implementations maintain predictable chunk boundaries.",[150,754,756],{"className":152,"code":755,"language":154,"meta":155,"style":155},"\u002F\u002F scripts\u002Fcheck-bundle-budget.mjs\nimport { readFileSync } from 'fs';\nimport { gzipSize } 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\n\u002F\u002F Normalize asset lookup to handle hash-prefixed filenames\nconst initialChunk = stats.assets.find(a => \u002Fmain|index\u002F.test(a.name));\nconst vendorChunk = stats.assets.find(a => \u002Fvendor|framework\u002F.test(a.name));\n\nasync function validateBudget() {\n if (!initialChunk || !vendorChunk) {\n throw new Error('Missing expected chunks in stats.json');\n }\n\n const initialGzip = await gzipSize(initialChunk.name);\n const vendorGzip = await gzipSize(vendorChunk.name);\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",[24,757,758,763,780,794,798,832,861,865,870,909,942,946,960,981,998,1002,1006,1024,1040,1044,1057,1089,1093,1105,1134,1138,1153,1157,1161,1181,1196,1211],{"__ignoreMap":155},[159,759,760],{"class":161,"line":162},[159,761,762],{"class":165},"\u002F\u002F scripts\u002Fcheck-bundle-budget.mjs\n",[159,764,765,768,771,774,777],{"class":161,"line":169},[159,766,767],{"class":172},"import",[159,769,770],{"class":187}," { readFileSync } ",[159,772,773],{"class":172},"from",[159,775,776],{"class":191}," 'fs'",[159,778,779],{"class":187},";\n",[159,781,782,784,787,789,792],{"class":161,"line":198},[159,783,767],{"class":172},[159,785,786],{"class":187}," { gzipSize } ",[159,788,773],{"class":172},[159,790,791],{"class":191}," 'gzip-size'",[159,793,779],{"class":187},[159,795,796],{"class":161,"line":225},[159,797,229],{"emptyLinePlaceholder":228},[159,799,800,802,805,807,809,811,814,816,819,821,824,826,829],{"class":161,"line":232},[159,801,173],{"class":172},[159,803,804],{"class":176}," stats",[159,806,180],{"class":172},[159,808,444],{"class":176},[159,810,148],{"class":187},[159,812,813],{"class":183},"parse",[159,815,188],{"class":187},[159,817,818],{"class":183},"readFileSync",[159,820,188],{"class":187},[159,822,823],{"class":191},"'.\u002Fdist\u002Fstats.json'",[159,825,50],{"class":187},[159,827,828],{"class":191},"'utf8'",[159,830,831],{"class":187},"));\n",[159,833,834,836,839,841,844,847,850,853,856,859],{"class":161,"line":261},[159,835,173],{"class":172},[159,837,838],{"class":176}," budgets",[159,840,180],{"class":172},[159,842,843],{"class":187}," { initial: ",[159,845,846],{"class":176},"150_000",[159,848,849],{"class":187},", chunk: ",[159,851,852],{"class":176},"50_000",[159,854,855],{"class":187},", vendor: ",[159,857,858],{"class":176},"200_000",[159,860,589],{"class":187},[159,862,863],{"class":161,"line":275},[159,864,229],{"emptyLinePlaceholder":228},[159,866,867],{"class":161,"line":281},[159,868,869],{"class":165},"\u002F\u002F Normalize asset lookup to handle hash-prefixed filenames\n",[159,871,872,874,877,879,882,885,887,889,892,895,898,901,903,906],{"class":161,"line":296},[159,873,173],{"class":172},[159,875,876],{"class":176}," initialChunk",[159,878,180],{"class":172},[159,880,881],{"class":187}," stats.assets.",[159,883,884],{"class":183},"find",[159,886,188],{"class":187},[159,888,18],{"class":248},[159,890,891],{"class":172}," =>",[159,893,894],{"class":191}," \u002Fmain",[159,896,897],{"class":172},"|",[159,899,900],{"class":191},"index\u002F",[159,902,148],{"class":187},[159,904,905],{"class":183},"test",[159,907,908],{"class":187},"(a.name));\n",[159,910,911,913,916,918,920,922,924,926,928,931,933,936,938,940],{"class":161,"line":308},[159,912,173],{"class":172},[159,914,915],{"class":176}," vendorChunk",[159,917,180],{"class":172},[159,919,881],{"class":187},[159,921,884],{"class":183},[159,923,188],{"class":187},[159,925,18],{"class":248},[159,927,891],{"class":172},[159,929,930],{"class":191}," \u002Fvendor",[159,932,897],{"class":172},[159,934,935],{"class":191},"framework\u002F",[159,937,148],{"class":187},[159,939,905],{"class":183},[159,941,908],{"class":187},[159,943,944],{"class":161,"line":319},[159,945,229],{"emptyLinePlaceholder":228},[159,947,948,951,954,957],{"class":161,"line":331},[159,949,950],{"class":172},"async",[159,952,953],{"class":172}," function",[159,955,956],{"class":183}," validateBudget",[159,958,959],{"class":187},"() {\n",[159,961,962,964,966,969,972,975,978],{"class":161,"line":342},[159,963,284],{"class":172},[159,965,245],{"class":187},[159,967,968],{"class":172},"!",[159,970,971],{"class":187},"initialChunk ",[159,973,974],{"class":172},"||",[159,976,977],{"class":172}," !",[159,979,980],{"class":187},"vendorChunk) {\n",[159,982,983,986,988,991,993,996],{"class":161,"line":367},[159,984,985],{"class":172}," throw",[159,987,311],{"class":172},[159,989,990],{"class":183}," Error",[159,992,188],{"class":187},[159,994,995],{"class":191},"'Missing expected chunks in stats.json'",[159,997,222],{"class":187},[159,999,1000],{"class":161,"line":379},[159,1001,481],{"class":187},[159,1003,1004],{"class":161,"line":385},[159,1005,229],{"emptyLinePlaceholder":228},[159,1007,1008,1010,1013,1015,1018,1021],{"class":161,"line":395},[159,1009,264],{"class":172},[159,1011,1012],{"class":176}," initialGzip",[159,1014,180],{"class":172},[159,1016,1017],{"class":172}," await",[159,1019,1020],{"class":183}," gzipSize",[159,1022,1023],{"class":187},"(initialChunk.name);\n",[159,1025,1026,1028,1031,1033,1035,1037],{"class":161,"line":406},[159,1027,264],{"class":172},[159,1029,1030],{"class":176}," vendorGzip",[159,1032,180],{"class":172},[159,1034,1017],{"class":172},[159,1036,1020],{"class":183},[159,1038,1039],{"class":187},"(vendorChunk.name);\n",[159,1041,1042],{"class":161,"line":428},[159,1043,278],{"class":187},[159,1045,1046,1048,1051,1054],{"class":161,"line":466},[159,1047,284],{"class":172},[159,1049,1050],{"class":187}," (initialGzip ",[159,1052,1053],{"class":172},">",[159,1055,1056],{"class":187}," budgets.initial) {\n",[159,1058,1059,1061,1063,1065,1067,1070,1073,1075,1078,1081,1084,1087],{"class":161,"line":472},[159,1060,985],{"class":172},[159,1062,311],{"class":172},[159,1064,990],{"class":183},[159,1066,188],{"class":187},[159,1068,1069],{"class":191},"`Initial JS exceeds ${",[159,1071,1072],{"class":187},"budgets",[159,1074,148],{"class":191},[159,1076,1077],{"class":187},"initial",[159,1079,1080],{"class":191},"}B limit. Current: ${",[159,1082,1083],{"class":187},"initialGzip",[159,1085,1086],{"class":191},"}B`",[159,1088,222],{"class":187},[159,1090,1091],{"class":161,"line":478},[159,1092,481],{"class":187},[159,1094,1095,1097,1100,1102],{"class":161,"line":484},[159,1096,284],{"class":172},[159,1098,1099],{"class":187}," (vendorGzip ",[159,1101,1053],{"class":172},[159,1103,1104],{"class":187}," budgets.vendor) {\n",[159,1106,1107,1109,1111,1113,1115,1118,1120,1122,1125,1127,1130,1132],{"class":161,"line":489},[159,1108,985],{"class":172},[159,1110,311],{"class":172},[159,1112,990],{"class":183},[159,1114,188],{"class":187},[159,1116,1117],{"class":191},"`Vendor chunk exceeds ${",[159,1119,1072],{"class":187},[159,1121,148],{"class":191},[159,1123,1124],{"class":187},"vendor",[159,1126,1080],{"class":191},[159,1128,1129],{"class":187},"vendorGzip",[159,1131,1086],{"class":191},[159,1133,222],{"class":187},[159,1135,1136],{"class":161,"line":497},[159,1137,481],{"class":187},[159,1139,1140,1143,1146,1148,1151],{"class":161,"line":508},[159,1141,1142],{"class":187}," console.",[159,1144,1145],{"class":183},"log",[159,1147,188],{"class":187},[159,1149,1150],{"class":191},"'✅ Bundle budgets validated.'",[159,1152,222],{"class":187},[159,1154,1155],{"class":161,"line":514},[159,1156,665],{"class":187},[159,1158,1159],{"class":161,"line":525},[159,1160,229],{"emptyLinePlaceholder":228},[159,1162,1163,1166,1169,1172,1174,1177,1179],{"class":161,"line":535},[159,1164,1165],{"class":183},"validateBudget",[159,1167,1168],{"class":187},"().",[159,1170,1171],{"class":183},"catch",[159,1173,188],{"class":187},[159,1175,1176],{"class":248},"err",[159,1178,891],{"class":172},[159,1180,258],{"class":187},[159,1182,1183,1185,1188,1190,1193],{"class":161,"line":545},[159,1184,1142],{"class":187},[159,1186,1187],{"class":183},"error",[159,1189,188],{"class":187},[159,1191,1192],{"class":191},"'❌ Budget check failed:'",[159,1194,1195],{"class":187},", err.message);\n",[159,1197,1198,1201,1204,1206,1209],{"class":161,"line":555},[159,1199,1200],{"class":187}," process.",[159,1202,1203],{"class":183},"exit",[159,1205,188],{"class":187},[159,1207,1208],{"class":176},"1",[159,1210,222],{"class":187},[159,1212,1213],{"class":161,"line":565},[159,1214,1215],{"class":187},"});\n",[29,1217,1219],{"id":1218},"actionable-optimization-strategies-from-analysis-findings","Actionable Optimization Strategies from Analysis Findings",[14,1221,1222,1223,1225,1226,1229,1230,1233],{},"Analysis must drive architectural decisions. When ",[24,1224,116],{}," reveals monolithic vendor chunks, restructure ",[24,1227,1228],{},"optimization.splitChunks.cacheGroups"," to isolate framework code, UI libraries, and utility modules. Assign higher ",[24,1231,1232],{},"priority"," values to frequently imported packages to ensure deterministic extraction and prevent race conditions in chunk generation.",[14,1235,1236,1237,62,1240,1243],{},"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 ",[24,1238,1239],{},"preload",[24,1241,1242],{},"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.",[14,1245,1246],{},"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. For execution-focused validation, see Reducing JavaScript execution time with code splitting.",[29,1248,1250],{"id":1249},"common-mistakes","Common Mistakes",[74,1252,1253,1259,1265,1279,1294,1308],{},[77,1254,1255,1258],{},[80,1256,1257],{},"Analyzing development builds:"," Dev builds contain unminified code, inline source maps, and HMR wrappers, artificially inflating sizes by 3–5x and corrupting baseline metrics.",[77,1260,1261,1264],{},[80,1262,1263],{},"Ignoring compression ratios:"," Optimizing solely for raw file size misrepresents actual network transfer costs. Brotli and gzip deliver significantly different transfer footprints.",[77,1266,1267,1274,1275,1278],{},[80,1268,1269,1270,1273],{},"Using ",[24,1271,1272],{},"analyzerMode: 'server'"," in CI:"," Headless runners will hang indefinitely waiting for a browser to open the interactive report. Always use ",[24,1276,1277],{},"static"," mode in automated pipelines.",[77,1280,1281,1288,1289,686,1291,1293],{},[80,1282,1283,1284,1287],{},"Overlooking ",[24,1285,1286],{},"sideEffects"," declarations:"," Without explicit ",[24,1290,700],{},[24,1292,704],{},", Webpack assumes all modules have side effects, bypassing tree-shaking and retaining dead code.",[77,1295,1296,1299,1300,1303,1304,1307],{},[80,1297,1298],{},"Failing to normalize chunk names in CI scripts:"," Hash-prefixed asset filenames (",[24,1301,1302],{},"main.a1b2c3.js",") break naive string matching. Use regex or Webpack's ",[24,1305,1306],{},"chunk.name"," property for reliable lookups.",[77,1309,1310,1313],{},[80,1311,1312],{},"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.",[29,1315,1317],{"id":1316},"faq","FAQ",[14,1319,1320,1323],{},[80,1321,1322],{},"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.",[14,1325,1326,1329],{},[80,1327,1328],{},"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.",[14,1331,1332,1335,1336,1338],{},[80,1333,1334],{},"How do I prevent webpack-bundle-analyzer from slowing down CI builds?","\nUse ",[24,1337,127],{}," 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.",[14,1340,1341,1344,1345,1347,1348,50,1351,1354,1355,1358,1359,1362,1363,1366],{},[80,1342,1343],{},"Why does my stats.json file exceed 50MB and crash the analyzer?","\nVerbose ",[24,1346,41],{}," configurations like ",[24,1349,1350],{},"children: true",[24,1352,1353],{},"moduleTrace: true",", or ",[24,1356,1357],{},"source: true"," exponentially increase output size. Restrict ",[24,1360,1361],{},"stats.fields"," to ",[24,1364,1365],{},"['assets', 'chunks', 'modules']"," and disable source inclusion to keep artifacts under 5MB.",[1368,1369,1370],"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":155,"searchDepth":169,"depth":169,"links":1372},[1373,1374,1375,1376,1377,1378,1379],{"id":31,"depth":169,"text":32},{"id":109,"depth":169,"text":110},{"id":668,"depth":169,"text":669},{"id":720,"depth":169,"text":721},{"id":1218,"depth":169,"text":1219},{"id":1249,"depth":169,"text":1250},{"id":1316,"depth":169,"text":1317},"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",{},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques",{"title":5,"description":1380},"javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Findex","d4aidD3Qi46jQqapj0-MvbkyyU0C9QoZdqppdChn8yA",[1388,1392],{"title":1389,"path":1390,"stem":1391,"children":-1},"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",{"title":147,"path":1393,"stem":1394,"children":-1},"\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",1777925997720]