[{"data":1,"prerenderedAt":1192},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting":1183},{"id":4,"title":5,"body":6,"description":16,"extension":1177,"meta":1178,"navigation":419,"path":1179,"seo":1180,"stem":1181,"__hash__":1182},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Findex.md","JavaScript Bundle Optimization & Code Splitting",{"type":7,"value":8,"toc":1167},"minimark",[9,13,17,20,25,28,31,34,40,56,60,63,72,75,80,91,95,103,111,116,374,379,583,588,599,603,618,631,638,643,754,759,770,774,781,784,789,862,867,878,882,885,888,891,896,1052,1057,1068,1072,1103,1107,1113,1119,1144,1150,1163],[10,11,5],"h1",{"id":12},"javascript-bundle-optimization-code-splitting",[14,15,16],"p",{},"Modern frontend applications operate under strict performance budgets dictated by Core Web Vitals. Achieving LCP \u003C 2.5s and INP \u003C 200ms requires a metric-driven approach to JavaScript delivery. Theoretical optimization must yield to production-ready architecture.",[14,18,19],{},"This guide establishes diagnostic workflows and implements strategic code splitting patterns. Engineers will learn to audit dependency graphs and enforce immutable caching. The focus remains on minimizing main-thread blocking across release cycles.",[21,22,24],"h2",{"id":23},"core-web-vitals-bundle-architecture","Core Web Vitals & Bundle Architecture",[14,26,27],{},"Performance budgets must map directly to business KPIs. JavaScript execution time directly correlates with INP degradation. Initial payload size dictates LCP thresholds.",[14,29,30],{},"Synchronous script execution blocks the main thread. This delay cascades into First Contentful Paint (FCP) regression. Only hydration-critical code belongs in the initial chunk. All other logic must route through deferred execution paths.",[14,32,33],{},"Calculate maximum allowable bundle sizes using target device network conditions. Simulate 4G and 3G throttling during local profiling. Adjust chunk limits based on median Time to Interactive (TTI) measurements.",[14,35,36],{},[37,38,39],"strong",{},"Explicit Performance Targets:",[41,42,43,47,50,53],"ul",{},[44,45,46],"li",{},"LCP \u003C 2.5s",[44,48,49],{},"INP \u003C 200ms",[44,51,52],{},"CLS \u003C 0.1",[44,54,55],{},"Initial JS Payload \u003C 150KB (gzip)",[21,57,59],{"id":58},"diagnostic-workflows-baseline-analysis","Diagnostic Workflows & Baseline Analysis",[14,61,62],{},"Implement a repeatable, CI-integrated diagnostic workflow. Start with Lighthouse CI and WebPageTest to capture lab metrics under controlled throttling. Visualize dependency graphs to identify oversized chunks and track third-party bloat.",[14,64,65,66,71],{},"Leverage ",[67,68,70],"a",{"href":69},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F","Webpack Bundle Analysis Techniques"," to audit module sizes and detect duplicate dependencies. Generate treemap outputs during every pull request. Interpret these outputs to isolate heavy transitive dependencies.",[14,73,74],{},"Establish automated performance regression gates. Block PRs that exceed baseline thresholds without documented justification. Integrate size checks into your pipeline to prevent silent payload growth.",[14,76,77],{},[37,78,79],{},"CI & Baseline Thresholds:",[41,81,82,85,88],{},[44,83,84],{},"CI Build Time \u003C 30s",[44,86,87],{},"Bundle Size Regression \u003C 5%",[44,89,90],{},"Third-Party Payload \u003C 40% of Total",[21,92,94],{"id":93},"strategic-code-splitting-implementation","Strategic Code Splitting Implementation",[14,96,97,98,102],{},"Transition from monolithic bundles to granular, route-driven chunks. Maintain UX parity by implementing ",[67,99,101],{"href":100},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fdynamic-imports-and-route-based-splitting\u002F","Dynamic Imports and Route-Based Splitting"," using framework-native routing equivalents. Configure chunk splitting rules to separate vendor, framework, and application logic.",[14,104,105,106,110],{},"Apply ",[107,108,109],"code",{},"\u003Clink rel=\"modulepreload\">"," hints for predicted navigation paths. This eliminates sequential download waterfalls. Define fallback strategies for network failures and chunk loading errors. Implement error boundaries to catch failed dynamic imports gracefully.",[14,112,113],{},[37,114,115],{},"Webpack v5 Chunk Splitting Configuration",[117,118,123],"pre",{"className":119,"code":120,"language":121,"meta":122,"style":122},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F webpack.config.js\nmodule.exports = {\n optimization: {\n splitChunks: {\n chunks: 'all',\n cacheGroups: {\n vendor: {\n test: \u002F[\\\\\u002F]node_modules[\\\\\u002F]\u002F,\n name: 'vendors',\n chunks: 'all',\n priority: 10\n },\n framework: {\n test: \u002F[\\\\\u002F]node_modules[\\\\\u002F](react|react-dom|scheduler)[\\\\\u002F]\u002F,\n name: 'framework',\n chunks: 'all',\n priority: 20\n }\n }\n },\n runtimeChunk: 'single'\n }\n};\n","javascript","",[107,124,125,134,155,161,167,180,186,192,225,236,245,254,260,266,311,321,330,338,344,349,354,363,368],{"__ignoreMap":122},[126,127,130],"span",{"class":128,"line":129},"line",1,[126,131,133],{"class":132},"sXJMR","\u002F\u002F webpack.config.js\n",[126,135,137,141,145,148,152],{"class":128,"line":136},2,[126,138,140],{"class":139},"s5hCx","module",[126,142,144],{"class":143},"s3sCt",".",[126,146,147],{"class":139},"exports",[126,149,151],{"class":150},"sCJTb"," =",[126,153,154],{"class":143}," {\n",[126,156,158],{"class":128,"line":157},3,[126,159,160],{"class":143}," optimization: {\n",[126,162,164],{"class":128,"line":163},4,[126,165,166],{"class":143}," splitChunks: {\n",[126,168,170,173,177],{"class":128,"line":169},5,[126,171,172],{"class":143}," chunks: ",[126,174,176],{"class":175},"sJdzJ","'all'",[126,178,179],{"class":143},",\n",[126,181,183],{"class":128,"line":182},6,[126,184,185],{"class":143}," cacheGroups: {\n",[126,187,189],{"class":128,"line":188},7,[126,190,191],{"class":143}," vendor: {\n",[126,193,195,198,201,204,208,211,214,216,218,220,223],{"class":128,"line":194},8,[126,196,197],{"class":143}," test:",[126,199,200],{"class":175}," \u002F",[126,202,203],{"class":139},"[",[126,205,207],{"class":206},"s1o6E","\\\\",[126,209,210],{"class":139},"\u002F]",[126,212,213],{"class":175},"node_modules",[126,215,203],{"class":139},[126,217,207],{"class":206},[126,219,210],{"class":139},[126,221,222],{"class":175},"\u002F",[126,224,179],{"class":143},[126,226,228,231,234],{"class":128,"line":227},9,[126,229,230],{"class":143}," name: ",[126,232,233],{"class":175},"'vendors'",[126,235,179],{"class":143},[126,237,239,241,243],{"class":128,"line":238},10,[126,240,172],{"class":143},[126,242,176],{"class":175},[126,244,179],{"class":143},[126,246,248,251],{"class":128,"line":247},11,[126,249,250],{"class":143}," priority: ",[126,252,253],{"class":139},"10\n",[126,255,257],{"class":128,"line":256},12,[126,258,259],{"class":143}," },\n",[126,261,263],{"class":128,"line":262},13,[126,264,265],{"class":143}," framework: {\n",[126,267,269,271,273,275,277,279,281,283,285,287,290,293,296,298,301,303,305,307,309],{"class":128,"line":268},14,[126,270,197],{"class":143},[126,272,200],{"class":175},[126,274,203],{"class":139},[126,276,207],{"class":206},[126,278,210],{"class":139},[126,280,213],{"class":175},[126,282,203],{"class":139},[126,284,207],{"class":206},[126,286,210],{"class":139},[126,288,289],{"class":175},"(react",[126,291,292],{"class":150},"|",[126,294,295],{"class":175},"react-dom",[126,297,292],{"class":150},[126,299,300],{"class":175},"scheduler)",[126,302,203],{"class":139},[126,304,207],{"class":206},[126,306,210],{"class":139},[126,308,222],{"class":175},[126,310,179],{"class":143},[126,312,314,316,319],{"class":128,"line":313},15,[126,315,230],{"class":143},[126,317,318],{"class":175},"'framework'",[126,320,179],{"class":143},[126,322,324,326,328],{"class":128,"line":323},16,[126,325,172],{"class":143},[126,327,176],{"class":175},[126,329,179],{"class":143},[126,331,333,335],{"class":128,"line":332},17,[126,334,250],{"class":143},[126,336,337],{"class":139},"20\n",[126,339,341],{"class":128,"line":340},18,[126,342,343],{"class":143}," }\n",[126,345,347],{"class":128,"line":346},19,[126,348,343],{"class":143},[126,350,352],{"class":128,"line":351},20,[126,353,259],{"class":143},[126,355,357,360],{"class":128,"line":356},21,[126,358,359],{"class":143}," runtimeChunk: ",[126,361,362],{"class":175},"'single'\n",[126,364,366],{"class":128,"line":365},22,[126,367,343],{"class":143},[126,369,371],{"class":128,"line":370},23,[126,372,373],{"class":143},"};\n",[14,375,376],{},[37,377,378],{},"Dynamic Import with Loading States",[117,380,382],{"className":119,"code":381,"language":121,"meta":122,"style":122},"import React, { Suspense, lazy } from 'react';\nimport ErrorBoundary from '.\u002FErrorBoundary';\n\nconst Dashboard = lazy(() => import('.\u002Froutes\u002FDashboard'));\n\nfunction AppRouter() {\n return (\n \u003CErrorBoundary fallback={\u003Cdiv>Route failed to load\u003C\u002Fdiv>}>\n \u003CSuspense fallback={\u003Cdiv className=\"skeleton-loader\">Loading...\u003C\u002Fdiv>}>\n \u003CDashboard \u002F>\n \u003C\u002FSuspense>\n \u003C\u002FErrorBoundary>\n );\n}\n",[107,383,384,401,415,421,453,457,468,476,511,546,556,565,573,578],{"__ignoreMap":122},[126,385,386,389,392,395,398],{"class":128,"line":129},[126,387,388],{"class":150},"import",[126,390,391],{"class":143}," React, { Suspense, lazy } ",[126,393,394],{"class":150},"from",[126,396,397],{"class":175}," 'react'",[126,399,400],{"class":143},";\n",[126,402,403,405,408,410,413],{"class":128,"line":136},[126,404,388],{"class":150},[126,406,407],{"class":143}," ErrorBoundary ",[126,409,394],{"class":150},[126,411,412],{"class":175}," '.\u002FErrorBoundary'",[126,414,400],{"class":143},[126,416,417],{"class":128,"line":157},[126,418,420],{"emptyLinePlaceholder":419},true,"\n",[126,422,423,426,429,431,435,438,441,444,447,450],{"class":128,"line":163},[126,424,425],{"class":150},"const",[126,427,428],{"class":139}," Dashboard",[126,430,151],{"class":150},[126,432,434],{"class":433},"sGhOu"," lazy",[126,436,437],{"class":143},"(() ",[126,439,440],{"class":150},"=>",[126,442,443],{"class":150}," import",[126,445,446],{"class":143},"(",[126,448,449],{"class":175},"'.\u002Froutes\u002FDashboard'",[126,451,452],{"class":143},"));\n",[126,454,455],{"class":128,"line":169},[126,456,420],{"emptyLinePlaceholder":419},[126,458,459,462,465],{"class":128,"line":182},[126,460,461],{"class":150},"function",[126,463,464],{"class":433}," AppRouter",[126,466,467],{"class":143},"() {\n",[126,469,470,473],{"class":128,"line":188},[126,471,472],{"class":150}," return",[126,474,475],{"class":143}," (\n",[126,477,478,481,485,488,491,494,497,500,502,505,508],{"class":128,"line":194},[126,479,480],{"class":143}," \u003C",[126,482,484],{"class":483},"sj_b3","ErrorBoundary",[126,486,487],{"class":139}," fallback",[126,489,490],{"class":150},"={",[126,492,493],{"class":143},"\u003C",[126,495,496],{"class":483},"div",[126,498,499],{"class":143},">Route failed to load\u003C\u002F",[126,501,496],{"class":483},[126,503,504],{"class":143},">",[126,506,507],{"class":150},"}",[126,509,510],{"class":143},">\n",[126,512,513,515,518,520,522,524,526,529,532,535,538,540,542,544],{"class":128,"line":227},[126,514,480],{"class":143},[126,516,517],{"class":483},"Suspense",[126,519,487],{"class":139},[126,521,490],{"class":150},[126,523,493],{"class":143},[126,525,496],{"class":483},[126,527,528],{"class":139}," className",[126,530,531],{"class":150},"=",[126,533,534],{"class":175},"\"skeleton-loader\"",[126,536,537],{"class":143},">Loading...\u003C\u002F",[126,539,496],{"class":483},[126,541,504],{"class":143},[126,543,507],{"class":150},[126,545,510],{"class":143},[126,547,548,550,553],{"class":128,"line":238},[126,549,480],{"class":143},[126,551,552],{"class":483},"Dashboard",[126,554,555],{"class":143}," \u002F>\n",[126,557,558,561,563],{"class":128,"line":247},[126,559,560],{"class":143}," \u003C\u002F",[126,562,517],{"class":483},[126,564,510],{"class":143},[126,566,567,569,571],{"class":128,"line":256},[126,568,560],{"class":143},[126,570,484],{"class":483},[126,572,510],{"class":143},[126,574,575],{"class":128,"line":262},[126,576,577],{"class":143}," );\n",[126,579,580],{"class":128,"line":268},[126,581,582],{"class":143},"}\n",[14,584,585],{},[37,586,587],{},"Route & Navigation Thresholds:",[41,589,590,593,596],{},[44,591,592],{},"Route Chunk Size \u003C 50KB",[44,594,595],{},"Navigation TTI \u003C 1.5s",[44,597,598],{},"Chunk Load Failure Rate \u003C 0.1%",[21,600,602],{"id":601},"tree-shaking-module-format-optimization","Tree Shaking & Module Format Optimization",[14,604,605,606,609,610,613,614,617],{},"Enforce strict dead code elimination across the entire dependency tree. Configure ",[107,607,608],{},"sideEffects: false"," in ",[107,611,612],{},"package.json",". Leverage ",[107,615,616],{},"\u002F*#__PURE__*\u002F"," annotations to signal safe removal to the bundler.",[14,619,620,621,625,626,630],{},"Review ",[67,622,624],{"href":623},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002F","Tree Shaking and Dead Code Elimination"," to audit module exports and remove unused utilities. Address interoperability challenges by understanding ",[67,627,629],{"href":628},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fmodern-module-formats-esm-vs-commonjs\u002F","Modern Module Formats: ESM vs CommonJS",". Prioritize native ESM for optimal bundler static analysis.",[14,632,633,634,637],{},"Migrate legacy CJS packages that block tree shaking. Use ",[107,635,636],{},"babel-plugin-import"," for selective module inclusion where ESM migration is blocked. Audit polyfill payloads to prevent unnecessary runtime bloat.",[14,639,640],{},[37,641,642],{},"Package.json Side Effects & ESM Config",[117,644,648],{"className":645,"code":646,"language":647,"meta":122,"style":122},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"name\": \"@org\u002Ffrontend-app\",\n \"type\": \"module\",\n \"sideEffects\": [\n \"*.css\",\n \".\u002Fsrc\u002Fpolyfills.js\"\n ],\n \"exports\": {\n \".\u002Futils\": {\n \"import\": \".\u002Fdist\u002Fesm\u002Futils.js\",\n \"require\": \".\u002Fdist\u002Fcjs\u002Futils.js\"\n }\n }\n}\n","json",[107,649,650,655,668,680,688,695,700,705,713,720,732,742,746,750],{"__ignoreMap":122},[126,651,652],{"class":128,"line":129},[126,653,654],{"class":143},"{\n",[126,656,657,660,663,666],{"class":128,"line":136},[126,658,659],{"class":483}," \"name\"",[126,661,662],{"class":143},": ",[126,664,665],{"class":175},"\"@org\u002Ffrontend-app\"",[126,667,179],{"class":143},[126,669,670,673,675,678],{"class":128,"line":157},[126,671,672],{"class":483}," \"type\"",[126,674,662],{"class":143},[126,676,677],{"class":175},"\"module\"",[126,679,179],{"class":143},[126,681,682,685],{"class":128,"line":163},[126,683,684],{"class":483}," \"sideEffects\"",[126,686,687],{"class":143},": [\n",[126,689,690,693],{"class":128,"line":169},[126,691,692],{"class":175}," \"*.css\"",[126,694,179],{"class":143},[126,696,697],{"class":128,"line":182},[126,698,699],{"class":175}," \".\u002Fsrc\u002Fpolyfills.js\"\n",[126,701,702],{"class":128,"line":188},[126,703,704],{"class":143}," ],\n",[126,706,707,710],{"class":128,"line":194},[126,708,709],{"class":483}," \"exports\"",[126,711,712],{"class":143},": {\n",[126,714,715,718],{"class":128,"line":227},[126,716,717],{"class":483}," \".\u002Futils\"",[126,719,712],{"class":143},[126,721,722,725,727,730],{"class":128,"line":238},[126,723,724],{"class":483}," \"import\"",[126,726,662],{"class":143},[126,728,729],{"class":175},"\".\u002Fdist\u002Fesm\u002Futils.js\"",[126,731,179],{"class":143},[126,733,734,737,739],{"class":128,"line":247},[126,735,736],{"class":483}," \"require\"",[126,738,662],{"class":143},[126,740,741],{"class":175},"\".\u002Fdist\u002Fcjs\u002Futils.js\"\n",[126,743,744],{"class":128,"line":256},[126,745,343],{"class":143},[126,747,748],{"class":128,"line":262},[126,749,343],{"class":143},[126,751,752],{"class":128,"line":268},[126,753,582],{"class":143},[14,755,756],{},[37,757,758],{},"Dead Code & Format Thresholds:",[41,760,761,764,767],{},[44,762,763],{},"Unused Code \u003C 10%",[44,765,766],{},"ESM Adoption > 85%",[44,768,769],{},"Polyfill Payload \u003C 15KB",[21,771,773],{"id":772},"delivery-caching-critical-path-integration","Delivery, Caching & Critical Path Integration",[14,775,776,777,780],{},"Optimize asset delivery through immutable caching and cache-busting strategies. Implement ",[107,778,779],{},"Cache-Control: public, max-age=31536000, immutable"," for content-hashed chunks. Coordinate JS execution with CSS delivery to prevent render-blocking.",[14,782,783],{},"Reference Optimizing CSS Delivery and Critical Path for inlining critical styles and deferring non-critical assets. Configure Brotli\u002FGzip compression at the CDN edge. Enforce HTTP\u002F2 multiplexing for parallel chunk fetching.",[14,785,786],{},[37,787,788],{},"Nginx Edge Configuration",[117,790,794],{"className":791,"code":792,"language":793,"meta":122,"style":122},"language-nginx shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","location ~* \\.(js|css|woff2)$ {\n expires 1y;\n add_header Cache-Control \"public, max-age=31536000, immutable\";\n brotli on;\n brotli_comp_level 6;\n brotli_types application\u002Fjavascript text\u002Fcss;\n}\n","nginx",[107,795,796,809,817,830,840,850,858],{"__ignoreMap":122},[126,797,798,801,804,807],{"class":128,"line":129},[126,799,800],{"class":150},"location",[126,802,803],{"class":150}," ~*",[126,805,806],{"class":175}," \\.(js|css|woff2)$ ",[126,808,654],{"class":143},[126,810,811,814],{"class":128,"line":136},[126,812,813],{"class":150}," expires ",[126,815,816],{"class":143},"1y;\n",[126,818,819,822,825,828],{"class":128,"line":157},[126,820,821],{"class":150}," add_header ",[126,823,824],{"class":143},"Cache-Control ",[126,826,827],{"class":175},"\"public, max-age=31536000, immutable\"",[126,829,400],{"class":143},[126,831,832,835,838],{"class":128,"line":163},[126,833,834],{"class":150}," brotli",[126,836,837],{"class":139}," on",[126,839,400],{"class":143},[126,841,842,845,848],{"class":128,"line":169},[126,843,844],{"class":150}," brotli_comp_level",[126,846,847],{"class":139}," 6",[126,849,400],{"class":143},[126,851,852,855],{"class":128,"line":182},[126,853,854],{"class":150}," brotli_types",[126,856,857],{"class":143}," application\u002Fjavascript text\u002Fcss;\n",[126,859,860],{"class":128,"line":188},[126,861,582],{"class":143},[14,863,864],{},[37,865,866],{},"Delivery & Caching Thresholds:",[41,868,869,872,875],{},[44,870,871],{},"Cache Hit Ratio > 95%",[44,873,874],{},"TTFB \u003C 0.8s",[44,876,877],{},"Compression Ratio > 70%",[21,879,881],{"id":880},"continuous-monitoring-rum-integration","Continuous Monitoring & RUM Integration",[14,883,884],{},"Deploy Real User Monitoring (RUM) to track field metrics against lab baselines. Integrate the Web Vitals library for client-side telemetry. Capture LCP, INP, and CLS across device tiers and network conditions.",[14,886,887],{},"Set up automated alerts for INP regressions or bundle size spikes. Route telemetry to Datadog, New Relic, or custom endpoints. Evaluate offloading compute-heavy tasks to WebAssembly for Performance-Critical Tasks when JS execution time threatens INP thresholds.",[14,889,890],{},"Establish a quarterly performance audit cadence. Correlate synthetic testing with field data. Adjust chunking strategies based on real-world navigation patterns.",[14,892,893],{},[37,894,895],{},"Web Vitals RUM Telemetry Snippet",[117,897,899],{"className":119,"code":898,"language":121,"meta":122,"style":122},"import { onLCP, onINP, onCLS } from 'web-vitals';\n\nfunction sendToAnalytics(metric) {\n const body = {\n name: metric.name,\n value: metric.value,\n id: metric.id,\n device: navigator.hardwareConcurrency || 'unknown',\n connection: navigator.connection?.effectiveType || 'unknown'\n };\n \n navigator.sendBeacon('\u002Fapi\u002Fvitals', JSON.stringify(body));\n}\n\nonLCP(sendToAnalytics);\nonINP(sendToAnalytics);\nonCLS(sendToAnalytics);\n",[107,900,901,915,919,935,947,952,957,962,975,985,990,995,1022,1026,1030,1038,1045],{"__ignoreMap":122},[126,902,903,905,908,910,913],{"class":128,"line":129},[126,904,388],{"class":150},[126,906,907],{"class":143}," { onLCP, onINP, onCLS } ",[126,909,394],{"class":150},[126,911,912],{"class":175}," 'web-vitals'",[126,914,400],{"class":143},[126,916,917],{"class":128,"line":136},[126,918,420],{"emptyLinePlaceholder":419},[126,920,921,923,926,928,932],{"class":128,"line":157},[126,922,461],{"class":150},[126,924,925],{"class":433}," sendToAnalytics",[126,927,446],{"class":143},[126,929,931],{"class":930},"spFnL","metric",[126,933,934],{"class":143},") {\n",[126,936,937,940,943,945],{"class":128,"line":163},[126,938,939],{"class":150}," const",[126,941,942],{"class":139}," body",[126,944,151],{"class":150},[126,946,154],{"class":143},[126,948,949],{"class":128,"line":169},[126,950,951],{"class":143}," name: metric.name,\n",[126,953,954],{"class":128,"line":182},[126,955,956],{"class":143}," value: metric.value,\n",[126,958,959],{"class":128,"line":188},[126,960,961],{"class":143}," id: metric.id,\n",[126,963,964,967,970,973],{"class":128,"line":194},[126,965,966],{"class":143}," device: navigator.hardwareConcurrency ",[126,968,969],{"class":150},"||",[126,971,972],{"class":175}," 'unknown'",[126,974,179],{"class":143},[126,976,977,980,982],{"class":128,"line":227},[126,978,979],{"class":143}," connection: navigator.connection?.effectiveType ",[126,981,969],{"class":150},[126,983,984],{"class":175}," 'unknown'\n",[126,986,987],{"class":128,"line":238},[126,988,989],{"class":143}," };\n",[126,991,992],{"class":128,"line":247},[126,993,994],{"class":143}," \n",[126,996,997,1000,1003,1005,1008,1011,1014,1016,1019],{"class":128,"line":256},[126,998,999],{"class":143}," navigator.",[126,1001,1002],{"class":433},"sendBeacon",[126,1004,446],{"class":143},[126,1006,1007],{"class":175},"'\u002Fapi\u002Fvitals'",[126,1009,1010],{"class":143},", ",[126,1012,1013],{"class":139},"JSON",[126,1015,144],{"class":143},[126,1017,1018],{"class":433},"stringify",[126,1020,1021],{"class":143},"(body));\n",[126,1023,1024],{"class":128,"line":262},[126,1025,582],{"class":143},[126,1027,1028],{"class":128,"line":268},[126,1029,420],{"emptyLinePlaceholder":419},[126,1031,1032,1035],{"class":128,"line":313},[126,1033,1034],{"class":433},"onLCP",[126,1036,1037],{"class":143},"(sendToAnalytics);\n",[126,1039,1040,1043],{"class":128,"line":323},[126,1041,1042],{"class":433},"onINP",[126,1044,1037],{"class":143},[126,1046,1047,1050],{"class":128,"line":332},[126,1048,1049],{"class":433},"onCLS",[126,1051,1037],{"class":143},[14,1053,1054],{},[37,1055,1056],{},"Field Monitoring Thresholds:",[41,1058,1059,1062,1065],{},[44,1060,1061],{},"Field LCP \u003C 2.5s (p75)",[44,1063,1064],{},"Field INP \u003C 200ms (p75)",[44,1066,1067],{},"RUM Data Coverage > 80%",[21,1069,1071],{"id":1070},"common-implementation-mistakes","Common Implementation Mistakes",[41,1073,1074,1077,1083,1094,1097,1100],{},[44,1075,1076],{},"Over-splitting bundles into dozens of micro-chunks, causing HTTP request waterfalls that degrade LCP.",[44,1078,1079,1080,1082],{},"Omitting ",[107,1081,608],{}," or failing to audit legacy CJS packages, resulting in failed tree shaking and bloated vendor chunks.",[44,1084,1085,1086,1089,1090,1093],{},"Neglecting ",[107,1087,1088],{},"modulepreload"," or ",[107,1091,1092],{},"prefetch"," hints for critical route chunks, forcing users to wait for sequential downloads.",[44,1095,1096],{},"Shipping synchronous third-party analytics or tracking scripts in the critical path, blocking main thread execution and spiking INP.",[44,1098,1099],{},"Failing to implement content-hashed filenames with immutable caching headers, causing unnecessary re-downloads on every deployment.",[44,1101,1102],{},"Relying solely on lab metrics (Lighthouse) without correlating field data (RUM), leading to optimizations that don't impact real users.",[21,1104,1106],{"id":1105},"frequently-asked-questions","Frequently Asked Questions",[14,1108,1109,1112],{},[37,1110,1111],{},"What is the optimal initial JavaScript bundle size for LCP \u003C 2.5s?","\nTarget an initial gzipped payload under 150KB. This accounts for parsing, compilation, and execution time on mid-tier mobile devices (Moto G4\u002F3G throttling). Exceeding this threshold typically pushes LCP beyond 2.5s due to main-thread blocking.",[14,1114,1115,1118],{},[37,1116,1117],{},"How does code splitting impact INP (Interaction to Next Paint)?","\nProper code splitting reduces main-thread contention by deferring non-critical JS. However, aggressive splitting can cause waterfall delays during navigation, temporarily spiking INP. Balance chunk count with preload hints and implement route-level hydration to keep INP consistently under 200ms.",[14,1120,1121,1124,1125,222,1127,1130,1131,1133,1134,222,1137,1140,1141,1143],{},[37,1122,1123],{},"Why isn't my tree shaking removing unused exports?","\nBundler tree shaking requires ESM syntax (",[107,1126,388],{},[107,1128,1129],{},"export",") and explicit ",[107,1132,608],{}," declarations. CommonJS modules (",[107,1135,1136],{},"require",[107,1138,1139],{},"module.exports",") lack static analysis capabilities, forcing bundlers to retain entire files. Migrate dependencies to ESM or use ",[107,1142,636],{}," for selective module inclusion.",[14,1145,1146,1149],{},[37,1147,1148],{},"Should I use HTTP\u002F2 or HTTP\u002F3 for optimized bundles?","\nHTTP\u002F2 multiplexing is sufficient for most code-splitting strategies, allowing parallel chunk fetching without head-of-line blocking. HTTP\u002F3 (QUIC) provides additional benefits on lossy networks but requires CDN-level support. Prioritize immutable caching and chunk size optimization before upgrading protocols.",[14,1151,1152,1155,1156,1089,1159,1162],{},[37,1153,1154],{},"How do I prevent bundle size regressions in CI\u002FCD?","\nIntegrate ",[107,1157,1158],{},"bundlesize",[107,1160,1161],{},"webpack-bundle-analyzer"," into your pipeline. Set hard limits on total bundle size and per-chunk thresholds. Configure PR checks to fail if payload increases by >5% without documented justification. Pair with Lighthouse CI to catch performance regressions before deployment.",[1164,1165,1166],"style",{},"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 .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 .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 .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 .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":122,"searchDepth":136,"depth":136,"links":1168},[1169,1170,1171,1172,1173,1174,1175,1176],{"id":23,"depth":136,"text":24},{"id":58,"depth":136,"text":59},{"id":93,"depth":136,"text":94},{"id":601,"depth":136,"text":602},{"id":772,"depth":136,"text":773},{"id":880,"depth":136,"text":881},{"id":1070,"depth":136,"text":1071},{"id":1105,"depth":136,"text":1106},"md",{},"\u002Fjavascript-bundle-optimization-code-splitting",{"title":5,"description":16},"javascript-bundle-optimization-code-splitting\u002Findex","xJLx0tXm_EAmobp64bOINuA9ygALaf85jfdHTbt3pnY",[1184,1188],{"title":1185,"path":1186,"stem":1187,"children":-1},"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",{"title":1189,"path":1190,"stem":1191,"children":-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",1777925997720]