[{"data":1,"prerenderedAt":1010},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production":1004},{"id":4,"title":5,"body":6,"description":997,"extension":998,"meta":999,"navigation":155,"path":1000,"seo":1001,"stem":1002,"__hash__":1003},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002Findex.md","How to configure webpack-bundle-analyzer for production",{"type":7,"value":8,"toc":968},"minimark",[9,13,32,37,42,45,49,52,56,59,63,67,70,106,110,113,344,348,364,368,372,383,387,394,419,423,434,450,454,458,468,472,479,483,486,489,800,804,808,814,818,832,836,846,850,926,930,936,951,964],[10,11,5],"h1",{"id":12},"how-to-configure-webpack-bundle-analyzer-for-production",[14,15,16,17,22,23,27,28,31],"p",{},"Running bundle analysis on production builds is critical for accurate ",[18,19,21],"a",{"href":20},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting"," metrics. Development builds inflate payload sizes and mask real-world delivery characteristics. This guide details how to configure ",[24,25,26],"code",{},"webpack-bundle-analyzer"," safely for production environments. You will learn to prevent accidental runtime injection, generate accurate ",[24,29,30],{},"stats.json"," artifacts, and establish precise size thresholds for automated CI\u002FCD gating.",[33,34,36],"h2",{"id":35},"root-cause-why-dev-mode-analysis-fails-in-production","Root Cause: Why Dev-Mode Analysis Fails in Production",[38,39,41],"h3",{"id":40},"false-positives-from-unminified-code","False Positives from Unminified Code",[14,43,44],{},"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.",[38,46,48],{"id":47},"missing-tree-shaking-and-dead-code-elimination","Missing Tree-Shaking and Dead Code Elimination",[14,50,51],{},"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.",[38,53,55],{"id":54},"the-risk-of-shipping-analyzer-runtime","The Risk of Shipping Analyzer Runtime",[14,57,58],{},"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.",[33,60,62],{"id":61},"step-1-secure-production-only-plugin-injection","Step 1: Secure Production-Only Plugin Injection",[38,64,66],{"id":65},"environment-variable-gating","Environment Variable Gating",[14,68,69],{},"Isolate the analyzer behind a dedicated environment flag. This prevents the plugin from executing during standard deployments or local development.",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"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","",[24,78,79],{"__ignoreMap":76},[80,81,84,88,92,96,100,103],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"s3sCt","ANALYZE",[80,89,91],{"class":90},"sCJTb","=",[80,93,95],{"class":94},"sJdzJ","true",[80,97,99],{"class":98},"spFnL"," npm",[80,101,102],{"class":94}," run",[80,104,105],{"class":94}," build:prod\n",[38,107,109],{"id":108},"conditional-plugin-array-splicing","Conditional Plugin Array Splicing",[14,111,112],{},"Inject the plugin dynamically within your Webpack configuration. Use functional exports to evaluate the environment before modifying the plugin array.",[71,114,118],{"className":115,"code":116,"language":117,"meta":76,"style":76},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');\n\nmodule.exports = (env) => {\n const plugins = [\u002F* existing plugins *\u002F];\n\n if (env.ANALYZE === 'true') {\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","javascript",[24,119,120,150,157,187,208,213,233,253,265,276,286,297,306,312,318,323,338],{"__ignoreMap":76},[80,121,122,125,128,132,135,137,141,144,147],{"class":82,"line":83},[80,123,124],{"class":90},"const",[80,126,127],{"class":86}," { ",[80,129,131],{"class":130},"s5hCx","BundleAnalyzerPlugin",[80,133,134],{"class":86}," } ",[80,136,91],{"class":90},[80,138,140],{"class":139},"sGhOu"," require",[80,142,143],{"class":86},"(",[80,145,146],{"class":94},"'webpack-bundle-analyzer'",[80,148,149],{"class":86},");\n",[80,151,153],{"class":82,"line":152},2,[80,154,156],{"emptyLinePlaceholder":155},true,"\n",[80,158,160,163,166,169,172,175,178,181,184],{"class":82,"line":159},3,[80,161,162],{"class":130},"module",[80,164,165],{"class":86},".",[80,167,168],{"class":130},"exports",[80,170,171],{"class":90}," =",[80,173,174],{"class":86}," (",[80,176,177],{"class":98},"env",[80,179,180],{"class":86},") ",[80,182,183],{"class":90},"=>",[80,185,186],{"class":86}," {\n",[80,188,190,193,196,198,201,205],{"class":82,"line":189},4,[80,191,192],{"class":90}," const",[80,194,195],{"class":130}," plugins",[80,197,171],{"class":90},[80,199,200],{"class":86}," [",[80,202,204],{"class":203},"sXJMR","\u002F* existing plugins *\u002F",[80,206,207],{"class":86},"];\n",[80,209,211],{"class":82,"line":210},5,[80,212,156],{"emptyLinePlaceholder":155},[80,214,216,219,222,224,227,230],{"class":82,"line":215},6,[80,217,218],{"class":90}," if",[80,220,221],{"class":86}," (env.",[80,223,87],{"class":130},[80,225,226],{"class":90}," ===",[80,228,229],{"class":94}," 'true'",[80,231,232],{"class":86},") {\n",[80,234,236,239,242,244,247,250],{"class":82,"line":235},7,[80,237,238],{"class":86}," plugins.",[80,240,241],{"class":139},"push",[80,243,143],{"class":86},[80,245,246],{"class":90},"new",[80,248,249],{"class":139}," BundleAnalyzerPlugin",[80,251,252],{"class":86},"({\n",[80,254,256,259,262],{"class":82,"line":255},8,[80,257,258],{"class":86}," analyzerMode: ",[80,260,261],{"class":94},"'static'",[80,263,264],{"class":86},",\n",[80,266,268,271,274],{"class":82,"line":267},9,[80,269,270],{"class":86}," openAnalyzer: ",[80,272,273],{"class":130},"false",[80,275,264],{"class":86},[80,277,279,282,284],{"class":82,"line":278},10,[80,280,281],{"class":86}," generateStatsFile: ",[80,283,95],{"class":130},[80,285,264],{"class":86},[80,287,289,292,295],{"class":82,"line":288},11,[80,290,291],{"class":86}," statsFilename: ",[80,293,294],{"class":94},"'stats.json'",[80,296,264],{"class":86},[80,298,300,303],{"class":82,"line":299},12,[80,301,302],{"class":86}," reportFilename: ",[80,304,305],{"class":94},"'bundle-report.html'\n",[80,307,309],{"class":82,"line":308},13,[80,310,311],{"class":86}," }));\n",[80,313,315],{"class":82,"line":314},14,[80,316,317],{"class":86}," }\n",[80,319,321],{"class":82,"line":320},15,[80,322,156],{"emptyLinePlaceholder":155},[80,324,326,329,332,335],{"class":82,"line":325},16,[80,327,328],{"class":90}," return",[80,330,331],{"class":86}," { plugins, ",[80,333,334],{"class":203},"\u002F* rest of config *\u002F",[80,336,337],{"class":86}," };\n",[80,339,341],{"class":82,"line":340},17,[80,342,343],{"class":86},"};\n",[38,345,347],{"id":346},"generating-accurate-stats-files","Generating Accurate Stats Files",[14,349,350,351,354,355,359,360,363],{},"Configure Webpack to emit standard stats alongside the analyzer report. The ",[24,352,353],{},"stats: 'normal'"," preset captures module resolution, chunk dependencies, and asset sizes without verbose noise. For deeper context on interpreting these outputs, review our ",[18,356,358],{"href":357},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F","Webpack Bundle Analysis Techniques"," documentation. Ensure ",[24,361,362],{},"generateStatsFile: true"," is active to produce machine-readable JSON for CI pipelines.",[33,365,367],{"id":366},"step-2-configure-analyzer-modes-for-safe-execution","Step 2: Configure Analyzer Modes for Safe Execution",[38,369,371],{"id":370},"static-vs-server-mode-trade-offs","Static vs Server Mode Trade-offs",[14,373,374,375,378,379,382],{},"The default ",[24,376,377],{},"server"," mode launches an interactive HTTP server. This requires manual intervention and blocks automated pipelines. Switch to ",[24,380,381],{},"static"," to generate a self-contained HTML file and JSON artifact.",[38,384,386],{"id":385},"disabling-open-browser-in-ci","Disabling Open Browser in CI",[14,388,389,390,393],{},"Headless CI runners lack display servers. Setting ",[24,391,392],{},"openAnalyzer: true"," forces the process to hang while attempting to spawn a browser. Explicitly disable this flag to guarantee non-blocking execution.",[395,396,397,405,412],"ul",{},[398,399,400,401,404],"li",{},"Set ",[24,402,403],{},"openAnalyzer: false"," in all CI configurations.",[398,406,407,408,411],{},"Verify exit codes return ",[24,409,410],{},"0"," upon successful report generation.",[398,413,414,415,418],{},"Confirm no ",[24,416,417],{},"localhost"," ports are bound during the build step.",[38,420,422],{"id":421},"setting-report-output-paths","Setting Report Output Paths",[14,424,425,426,429,430,433],{},"Define explicit output directories to prevent artifact pollution. Route reports to a dedicated ",[24,427,428],{},"reports\u002F"," or ",[24,431,432],{},"dist\u002F"," subfolder.",[395,435,436,442,447],{},[398,437,438,439],{},"Use ",[24,440,441],{},"reportFilename: 'reports\u002Fbundle-report.html'",[398,443,438,444],{},[24,445,446],{},"statsFilename: 'reports\u002Fstats.json'",[398,448,449],{},"Parse the JSON output programmatically to audit module paths without exposing internal structures to end users.",[33,451,453],{"id":452},"step-3-implement-metric-thresholds-automated-alerts","Step 3: Implement Metric Thresholds & Automated Alerts",[38,455,457],{"id":456},"defining-gzip-size-limits","Defining Gzip Size Limits",[14,459,460,461,429,464,467],{},"Uncompressed sizes misrepresent network delivery costs. Always enforce thresholds against ",[24,462,463],{},"gzip",[24,465,466],{},"brotli"," compressed weights. A main entry chunk exceeding 150KB gzipped should trigger a hard build failure.",[38,469,471],{"id":470},"detecting-module-duplication","Detecting Module Duplication",[14,473,474,475,478],{},"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 ",[24,476,477],{},"optimization.splitChunks"," to consolidate common dependencies.",[38,480,482],{"id":481},"third-party-vs-first-party-ratios","Third-Party vs First-Party Ratios",[14,484,485],{},"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.",[14,487,488],{},"Automate validation using a post-build Node script:",[71,490,492],{"className":115,"code":491,"language":117,"meta":76,"style":76},"const fs = require('fs');\nconst gzipSize = require('gzip-size');\nconst stats = JSON.parse(fs.readFileSync('dist\u002Fstats.json', 'utf8'));\nconst mainAsset = stats.assets.find(a => a.name.match(\u002Fmain.*\\.js$\u002F));\n\nif (!mainAsset) process.exit(1);\n\nconst raw = fs.readFileSync(`dist\u002F${mainAsset.name}`, 'utf8');\nconst gzipped = gzipSize.sync(raw);\n\nif (gzipped > 153600) { \u002F\u002F 150KB limit\n console.error(`FAIL: Main chunk is ${Math.round(gzipped\u002F1024)}KB gzipped (limit: 150KB)`);\n process.exit(1);\n}\nconsole.log('PASS: Bundle size within acceptable thresholds.');\n",[24,493,494,512,530,567,620,624,647,651,687,705,709,728,767,780,785],{"__ignoreMap":76},[80,495,496,498,501,503,505,507,510],{"class":82,"line":83},[80,497,124],{"class":90},[80,499,500],{"class":130}," fs",[80,502,171],{"class":90},[80,504,140],{"class":139},[80,506,143],{"class":86},[80,508,509],{"class":94},"'fs'",[80,511,149],{"class":86},[80,513,514,516,519,521,523,525,528],{"class":82,"line":152},[80,515,124],{"class":90},[80,517,518],{"class":130}," gzipSize",[80,520,171],{"class":90},[80,522,140],{"class":139},[80,524,143],{"class":86},[80,526,527],{"class":94},"'gzip-size'",[80,529,149],{"class":86},[80,531,532,534,537,539,542,544,547,550,553,555,558,561,564],{"class":82,"line":159},[80,533,124],{"class":90},[80,535,536],{"class":130}," stats",[80,538,171],{"class":90},[80,540,541],{"class":130}," JSON",[80,543,165],{"class":86},[80,545,546],{"class":139},"parse",[80,548,549],{"class":86},"(fs.",[80,551,552],{"class":139},"readFileSync",[80,554,143],{"class":86},[80,556,557],{"class":94},"'dist\u002Fstats.json'",[80,559,560],{"class":86},", ",[80,562,563],{"class":94},"'utf8'",[80,565,566],{"class":86},"));\n",[80,568,569,571,574,576,579,582,584,586,589,592,595,597,600,602,605,609,612,615,618],{"class":82,"line":189},[80,570,124],{"class":90},[80,572,573],{"class":130}," mainAsset",[80,575,171],{"class":90},[80,577,578],{"class":86}," stats.assets.",[80,580,581],{"class":139},"find",[80,583,143],{"class":86},[80,585,18],{"class":98},[80,587,588],{"class":90}," =>",[80,590,591],{"class":86}," a.name.",[80,593,594],{"class":139},"match",[80,596,143],{"class":86},[80,598,599],{"class":94},"\u002Fmain",[80,601,165],{"class":130},[80,603,604],{"class":90},"*",[80,606,608],{"class":607},"s1o6E","\\.",[80,610,611],{"class":94},"js",[80,613,614],{"class":90},"$",[80,616,617],{"class":94},"\u002F",[80,619,566],{"class":86},[80,621,622],{"class":82,"line":210},[80,623,156],{"emptyLinePlaceholder":155},[80,625,626,629,631,634,637,640,642,645],{"class":82,"line":215},[80,627,628],{"class":90},"if",[80,630,174],{"class":86},[80,632,633],{"class":90},"!",[80,635,636],{"class":86},"mainAsset) process.",[80,638,639],{"class":139},"exit",[80,641,143],{"class":86},[80,643,644],{"class":130},"1",[80,646,149],{"class":86},[80,648,649],{"class":82,"line":235},[80,650,156],{"emptyLinePlaceholder":155},[80,652,653,655,658,660,663,665,667,670,673,675,678,681,683,685],{"class":82,"line":255},[80,654,124],{"class":90},[80,656,657],{"class":130}," raw",[80,659,171],{"class":90},[80,661,662],{"class":86}," fs.",[80,664,552],{"class":139},[80,666,143],{"class":86},[80,668,669],{"class":94},"`dist\u002F${",[80,671,672],{"class":86},"mainAsset",[80,674,165],{"class":94},[80,676,677],{"class":86},"name",[80,679,680],{"class":94},"}`",[80,682,560],{"class":86},[80,684,563],{"class":94},[80,686,149],{"class":86},[80,688,689,691,694,696,699,702],{"class":82,"line":267},[80,690,124],{"class":90},[80,692,693],{"class":130}," gzipped",[80,695,171],{"class":90},[80,697,698],{"class":86}," gzipSize.",[80,700,701],{"class":139},"sync",[80,703,704],{"class":86},"(raw);\n",[80,706,707],{"class":82,"line":278},[80,708,156],{"emptyLinePlaceholder":155},[80,710,711,713,716,719,722,725],{"class":82,"line":288},[80,712,628],{"class":90},[80,714,715],{"class":86}," (gzipped ",[80,717,718],{"class":90},">",[80,720,721],{"class":130}," 153600",[80,723,724],{"class":86},") { ",[80,726,727],{"class":203},"\u002F\u002F 150KB limit\n",[80,729,730,733,736,738,741,744,746,749,751,754,756,759,762,765],{"class":82,"line":299},[80,731,732],{"class":86}," console.",[80,734,735],{"class":139},"error",[80,737,143],{"class":86},[80,739,740],{"class":94},"`FAIL: Main chunk is ${",[80,742,743],{"class":86},"Math",[80,745,165],{"class":94},[80,747,748],{"class":139},"round",[80,750,143],{"class":94},[80,752,753],{"class":86},"gzipped",[80,755,617],{"class":90},[80,757,758],{"class":130},"1024",[80,760,761],{"class":94},")",[80,763,764],{"class":94},"}KB gzipped (limit: 150KB)`",[80,766,149],{"class":86},[80,768,769,772,774,776,778],{"class":82,"line":308},[80,770,771],{"class":86}," process.",[80,773,639],{"class":139},[80,775,143],{"class":86},[80,777,644],{"class":130},[80,779,149],{"class":86},[80,781,782],{"class":82,"line":314},[80,783,784],{"class":86},"}\n",[80,786,787,790,793,795,798],{"class":82,"line":320},[80,788,789],{"class":86},"console.",[80,791,792],{"class":139},"log",[80,794,143],{"class":86},[80,796,797],{"class":94},"'PASS: Bundle size within acceptable thresholds.'",[80,799,149],{"class":86},[33,801,803],{"id":802},"step-4-validate-with-devtools-lighthouse-workflows","Step 4: Validate with DevTools & Lighthouse Workflows",[38,805,807],{"id":806},"cross-referencing-coverage-tab","Cross-Referencing Coverage Tab",[14,809,810,811,813],{},"Open Chrome DevTools and navigate to the Coverage panel. Reload the page and compare the reported unused bytes against the ",[24,812,30],{}," module tree. Discrepancies indicate runtime-injected code or dynamic imports missing from the static analysis.",[38,815,817],{"id":816},"lighthouse-performance-budgets","Lighthouse Performance Budgets",[14,819,820,821,823,824,827,828,831],{},"Integrate ",[24,822,30],{}," asset sizes into ",[24,825,826],{},"lighthouse-ci"," budgets. Map the ",[24,829,830],{},"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.",[38,833,835],{"id":834},"network-waterfall-correlation","Network Waterfall Correlation",[14,837,838,839,841,842,845],{},"Inspect the Network tab to verify chunk loading order. Ensure critical path assets load sequentially without render-blocking delays. Cross-reference the waterfall timing with ",[24,840,30],{}," chunk priorities. Adjust ",[24,843,844],{},"webpackChunkName"," and dynamic import boundaries to align with measured Time to Interactive (TTI) targets.",[33,847,849],{"id":848},"diagnostic-checklist-common-configuration-failures","Diagnostic Checklist: Common Configuration Failures",[395,851,852,859,865,875,880,888,899,904,909],{},[398,853,854,858],{},[855,856,857],"strong",{},"Symptom:"," Metrics show 3–5x expected size.",[398,860,861,864],{},[855,862,863],{},"Root Cause:"," Analyzer ran against development build.",[398,866,867,870,871,874],{},[855,868,869],{},"Fix:"," Execute ",[24,872,873],{},"ANALYZE=true npm run build:prod"," to trigger production minification pipeline.",[398,876,877,879],{},[855,878,857],{}," CI pipeline hangs indefinitely.",[398,881,882,884,885,887],{},[855,883,863],{}," ",[24,886,392],{}," in headless environment.",[398,889,890,892,893,896,897,165],{},[855,891,869],{}," Force ",[24,894,895],{},"analyzerMode: 'static'"," and ",[24,898,403],{},[398,900,901,903],{},[855,902,857],{}," Thresholds fail unexpectedly.",[398,905,906,908],{},[855,907,863],{}," Source maps included in asset calculation.",[398,910,911,913,914,917,918,921,922,925],{},[855,912,869],{}," Set ",[24,915,916],{},"devtool: 'hidden-source-map'"," and filter ",[24,919,920],{},"stats.assets"," with ",[24,923,924],{},"\u002F\\.js$\u002F"," before evaluation.",[33,927,929],{"id":928},"frequently-asked-questions","Frequently Asked Questions",[14,931,932,935],{},[855,933,934],{},"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.",[14,937,938,941,942,944,945,947,948,950],{},[855,939,940],{},"What is the recommended analyzerMode for CI pipelines?","\nUse ",[24,943,895],{}," paired with ",[24,946,403],{},". This configuration generates a portable report and ",[24,949,30],{}," without spawning a local server, eliminating headless environment timeouts.",[14,952,953,956,957,959,960,963],{},[855,954,955],{},"How do I enforce bundle size limits automatically?","\nParse the generated ",[24,958,30],{}," in a post-build validation script. Compare individual asset weights against your defined thresholds (e.g., 150KB gzipped for the main chunk). Return ",[24,961,962],{},"process.exit(1)"," on threshold violations to block pull requests automatically.",[965,966,967],"style",{},"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":76,"searchDepth":152,"depth":152,"links":969},[970,975,980,985,990,995,996],{"id":35,"depth":152,"text":36,"children":971},[972,973,974],{"id":40,"depth":159,"text":41},{"id":47,"depth":159,"text":48},{"id":54,"depth":159,"text":55},{"id":61,"depth":152,"text":62,"children":976},[977,978,979],{"id":65,"depth":159,"text":66},{"id":108,"depth":159,"text":109},{"id":346,"depth":159,"text":347},{"id":366,"depth":152,"text":367,"children":981},[982,983,984],{"id":370,"depth":159,"text":371},{"id":385,"depth":159,"text":386},{"id":421,"depth":159,"text":422},{"id":452,"depth":152,"text":453,"children":986},[987,988,989],{"id":456,"depth":159,"text":457},{"id":470,"depth":159,"text":471},{"id":481,"depth":159,"text":482},{"id":802,"depth":152,"text":803,"children":991},[992,993,994],{"id":806,"depth":159,"text":807},{"id":816,"depth":159,"text":817},{"id":834,"depth":159,"text":835},{"id":848,"depth":152,"text":849},{"id":928,"depth":152,"text":929},"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.","md",{},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production",{"title":5,"description":997},"javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fhow-to-configure-webpack-bundle-analyzer-for-production\u002Findex","mJjuMh48O3H9YoBR7-j5CiIMv7bBLEQ9UjFfVhc4ThQ",[1005,1009],{"title":1006,"path":1007,"stem":1008,"children":-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",null,1777925997721]