[{"data":1,"prerenderedAt":1057},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment":1048},{"id":4,"title":5,"body":6,"description":1041,"extension":1042,"meta":1043,"navigation":325,"path":1044,"seo":1045,"stem":1046,"__hash__":1047},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002Findex.md","Fixing tree shaking issues with lodash and moment",{"type":7,"value":8,"toc":1030},"minimark",[9,13,26,29,34,54,62,68,83,88,119,123,134,142,146,163,167,190,194,205,212,216,224,228,253,366,446,450,453,476,480,492,496,519,653,752,756,759,762,766,777,781,802,806,817,823,827,845,849,870,875,967,971,983,998,1010,1026],[10,11,5],"h1",{"id":12},"fixing-tree-shaking-issues-with-lodash-and-moment",[14,15,16,17,21,22,25],"p",{},"This guide delivers a rapid diagnostic and resolution workflow for frontend engineers facing unexplained bundle bloat from ",[18,19,20],"code",{},"lodash"," and ",[18,23,24],{},"moment.js",". Modern bundlers fail to statically analyze these legacy CommonJS packages without explicit configuration.",[14,27,28],{},"We outline exact configuration steps to enable dead code elimination. Strict metric thresholds are provided to validate performance gains. The focus remains on actionable, tool-agnostic fixes with precise Webpack and Vite implementations.",[30,31,33],"h2",{"id":32},"root-cause-analysis-why-tree-shaking-fails-on-lodash-moment","Root Cause Analysis: Why Tree Shaking Fails on Lodash & Moment",[14,35,36,37,21,40,43,44,21,46,49,50,53],{},"Tree shaking relies on static ",[18,38,39],{},"import",[18,41,42],{},"export"," syntax to map dependency graphs. The default ",[18,45,20],{},[18,47,48],{},"moment"," packages ship as monolithic CommonJS modules using ",[18,51,52],{},"module.exports",".",[14,55,56,57,53],{},"Dynamic property access and opaque side-effect declarations force bundlers to assume every export is required. This breaks static analysis and forces full dependency inclusion. For foundational context on how modern bundlers prune dependency graphs, review ",[58,59,61],"a",{"href":60},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002F","Tree Shaking and Dead Code Elimination",[14,63,64],{},[65,66,67],"strong",{},"Target Metrics:",[69,70,71,78],"ul",{},[72,73,74,75,77],"li",{},"Baseline ",[18,76,20],{}," footprint: ~72KB gzipped",[72,79,74,80,82],{},[18,81,48],{}," footprint: ~32KB gzipped (excluding locales)",[14,84,85],{},[65,86,87],{},"Diagnostic Steps:",[69,89,90,105,112],{},[72,91,92,93,96,97,100,101,104],{},"Audit ",[18,94,95],{},"package.json"," for ",[18,98,99],{},"\"module\""," vs ",[18,102,103],{},"\"main\""," entry points in dependencies.",[72,106,107,108,111],{},"Verify bundler execution mode (",[18,109,110],{},"production"," enables minification and tree shaking).",[72,113,114,115,118],{},"Check for explicit ",[18,116,117],{},"sideEffects"," declarations in dependency manifests.",[30,120,122],{"id":121},"rapid-diagnosis-bundle-analysis-metric-thresholds","Rapid Diagnosis: Bundle Analysis & Metric Thresholds",[14,124,125,126,129,130,133],{},"Deploy ",[18,127,128],{},"webpack-bundle-analyzer"," or ",[18,131,132],{},"rollup-plugin-visualizer"," to isolate exact byte allocations. Cross-reference with the Chrome DevTools Coverage tab to measure unused JavaScript percentages.",[14,135,136,137,141],{},"Establish clear failure thresholds before applying fixes. Integrate these findings into broader ",[58,138,140],{"href":139},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting"," workflows to align with route-based splitting strategies.",[14,143,144],{},[65,145,67],{},[69,147,148,157,160],{},[72,149,150,151,153,154,156],{},"Unused ",[18,152,20],{},"\u002F",[18,155,48],{}," code: \u003C5%",[72,158,159],{},"Main thread parse time: \u003C100ms",[72,161,162],{},"Total utility contribution: \u003C20KB",[14,164,165],{},[65,166,87],{},[69,168,169,172,179,187],{},[72,170,171],{},"Generate a production build with enabled source maps.",[72,173,174,175,178],{},"Execute ",[18,176,177],{},"npx webpack-bundle-analyzer dist"," or equivalent visualizer.",[72,180,181,182,21,184,186],{},"Filter the treemap view by ",[18,183,20],{},[18,185,48],{}," directories.",[72,188,189],{},"Record initial parse and compile times via the Chrome Performance panel.",[30,191,193],{"id":192},"step-by-step-resolution-lodash-modularization","Step-by-Step Resolution: Lodash Modularization",[14,195,196,197,200,201,204],{},"Replace monolithic namespace imports with ESM-compatible alternatives. Install ",[18,198,199],{},"lodash-es"," to access a fully modularized build. Configure ",[18,202,203],{},"babel-plugin-lodash"," if source modification is restricted.",[14,206,207,208,211],{},"Update your project manifest with ",[18,209,210],{},"\"sideEffects\": false",". This signals to the bundler that utility functions are pure and safe to eliminate.",[14,213,214],{},[65,215,67],{},[69,217,218,221],{},[72,219,220],{},"Lodash contribution: \u003C5KB gzipped for 3-5 utilities",[72,222,223],{},"Unused lodash code: 0% in final bundle",[14,225,226],{},[65,227,87],{},[69,229,230,239,242,250],{},[72,231,232,233,129,236,53],{},"Run ",[18,234,235],{},"npm install lodash-es",[18,237,238],{},"yarn add lodash-es",[72,240,241],{},"Configure Babel plugin or bundler alias for automatic path rewriting.",[72,243,244,245,247,248,53],{},"Add ",[18,246,210],{}," to your root ",[18,249,95],{},[72,251,252],{},"Rebuild and verify analyzer output shows isolated function nodes.",[254,255,260],"pre",{"className":256,"code":257,"language":258,"meta":259,"style":259},"language-javascript shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F ❌ FAILS TREE SHAKING (CJS monolithic)\nimport _ from 'lodash';\nconst result = _.debounce(fn, 300);\n\n\u002F\u002F ✅ ENABLES TREE SHAKING (ESM modular)\nimport { debounce } from 'lodash-es';\nconst result = debounce(fn, 300);\n","javascript","",[18,261,262,271,291,320,327,333,348],{"__ignoreMap":259},[263,264,267],"span",{"class":265,"line":266},"line",1,[263,268,270],{"class":269},"sXJMR","\u002F\u002F ❌ FAILS TREE SHAKING (CJS monolithic)\n",[263,272,274,277,281,284,288],{"class":265,"line":273},2,[263,275,39],{"class":276},"sCJTb",[263,278,280],{"class":279},"s3sCt"," _ ",[263,282,283],{"class":276},"from",[263,285,287],{"class":286},"sJdzJ"," 'lodash'",[263,289,290],{"class":279},";\n",[263,292,294,297,301,304,307,311,314,317],{"class":265,"line":293},3,[263,295,296],{"class":276},"const",[263,298,300],{"class":299},"s5hCx"," result",[263,302,303],{"class":276}," =",[263,305,306],{"class":279}," _.",[263,308,310],{"class":309},"sGhOu","debounce",[263,312,313],{"class":279},"(fn, ",[263,315,316],{"class":299},"300",[263,318,319],{"class":279},");\n",[263,321,323],{"class":265,"line":322},4,[263,324,326],{"emptyLinePlaceholder":325},true,"\n",[263,328,330],{"class":265,"line":329},5,[263,331,332],{"class":269},"\u002F\u002F ✅ ENABLES TREE SHAKING (ESM modular)\n",[263,334,336,338,341,343,346],{"class":265,"line":335},6,[263,337,39],{"class":276},[263,339,340],{"class":279}," { debounce } ",[263,342,283],{"class":276},[263,344,345],{"class":286}," 'lodash-es'",[263,347,290],{"class":279},[263,349,351,353,355,357,360,362,364],{"class":265,"line":350},7,[263,352,296],{"class":276},[263,354,300],{"class":299},[263,356,303],{"class":276},[263,358,359],{"class":309}," debounce",[263,361,313],{"class":279},[263,363,316],{"class":299},[263,365,319],{"class":279},[254,367,371],{"className":368,"code":369,"language":370,"meta":259,"style":259},"language-json shiki shiki-themes github-dark-high-contrast github-dark-high-contrast github-light-high-contrast","{\n \"name\": \"my-app\",\n \"version\": \"1.0.0\",\n \"sideEffects\": false,\n \"dependencies\": {\n \"lodash-es\": \"^4.17.21\"\n }\n}\n","json",[18,372,373,378,393,405,417,425,435,440],{"__ignoreMap":259},[263,374,375],{"class":265,"line":266},[263,376,377],{"class":279},"{\n",[263,379,380,384,387,390],{"class":265,"line":273},[263,381,383],{"class":382},"sj_b3"," \"name\"",[263,385,386],{"class":279},": ",[263,388,389],{"class":286},"\"my-app\"",[263,391,392],{"class":279},",\n",[263,394,395,398,400,403],{"class":265,"line":293},[263,396,397],{"class":382}," \"version\"",[263,399,386],{"class":279},[263,401,402],{"class":286},"\"1.0.0\"",[263,404,392],{"class":279},[263,406,407,410,412,415],{"class":265,"line":322},[263,408,409],{"class":382}," \"sideEffects\"",[263,411,386],{"class":279},[263,413,414],{"class":299},"false",[263,416,392],{"class":279},[263,418,419,422],{"class":265,"line":329},[263,420,421],{"class":382}," \"dependencies\"",[263,423,424],{"class":279},": {\n",[263,426,427,430,432],{"class":265,"line":335},[263,428,429],{"class":382}," \"lodash-es\"",[263,431,386],{"class":279},[263,433,434],{"class":286},"\"^4.17.21\"\n",[263,436,437],{"class":265,"line":350},[263,438,439],{"class":279}," }\n",[263,441,443],{"class":265,"line":442},8,[263,444,445],{"class":279},"}\n",[30,447,449],{"id":448},"step-by-step-resolution-momentjs-locale-stripping-alternatives","Step-by-Step Resolution: Moment.js Locale Stripping & Alternatives",[14,451,452],{},"Moment's core architecture inherently resists tree shaking due to dynamic locale loading. Address locale bloat using bundler-specific context replacement.",[14,454,455,456,459,460,463,464,467,468,471,472,475],{},"For Webpack, implement ",[18,457,458],{},"ContextReplacementPlugin"," to restrict ",[18,461,462],{},"moment\u002Flocale"," resolution. For Vite, use ",[18,465,466],{},"resolve.alias"," to redirect legacy imports to ",[18,469,470],{},"moment-es"," or apply ",[18,473,474],{},"optimizeDeps"," exclusions.",[14,477,478],{},[65,479,67],{},[69,481,482,489],{},[72,483,484,485,488],{},"Moment core + ",[18,486,487],{},"en"," locale: \u003C18KB gzipped",[72,490,491],{},"Non-English locale files: 0 in final bundle",[14,493,494],{},[65,495,87],{},[69,497,498,501,510,516],{},[72,499,500],{},"Identify active locales currently used in your codebase.",[72,502,503,504,506,507,509],{},"Apply ",[18,505,458],{}," (Webpack) or ",[18,508,466],{}," (Vite).",[72,511,512,513,515],{},"Verify the ",[18,514,462],{}," directory is excluded from the final output.",[72,517,518],{},"Test date formatting across all supported locales to prevent runtime breaks.",[254,520,522],{"className":256,"code":521,"language":258,"meta":259,"style":259},"\u002F\u002F webpack.config.js\nconst webpack = require('webpack');\n\nmodule.exports = {\n \u002F\u002F ...\n plugins: [\n new webpack.ContextReplacementPlugin(\n \u002Fmoment[\\\\\u002F]locale$\u002F,\n \u002F^\\.\\\u002Fen$\u002F\n )\n ]\n};\n",[18,523,524,529,549,553,568,573,578,591,616,635,641,647],{"__ignoreMap":259},[263,525,526],{"class":265,"line":266},[263,527,528],{"class":269},"\u002F\u002F webpack.config.js\n",[263,530,531,533,536,538,541,544,547],{"class":265,"line":273},[263,532,296],{"class":276},[263,534,535],{"class":299}," webpack",[263,537,303],{"class":276},[263,539,540],{"class":309}," require",[263,542,543],{"class":279},"(",[263,545,546],{"class":286},"'webpack'",[263,548,319],{"class":279},[263,550,551],{"class":265,"line":293},[263,552,326],{"emptyLinePlaceholder":325},[263,554,555,558,560,563,565],{"class":265,"line":322},[263,556,557],{"class":299},"module",[263,559,53],{"class":279},[263,561,562],{"class":299},"exports",[263,564,303],{"class":276},[263,566,567],{"class":279}," {\n",[263,569,570],{"class":265,"line":329},[263,571,572],{"class":269}," \u002F\u002F ...\n",[263,574,575],{"class":265,"line":335},[263,576,577],{"class":279}," plugins: [\n",[263,579,580,583,586,588],{"class":265,"line":350},[263,581,582],{"class":276}," new",[263,584,585],{"class":279}," webpack.",[263,587,458],{"class":309},[263,589,590],{"class":279},"(\n",[263,592,593,596,599,603,606,609,612,614],{"class":265,"line":442},[263,594,595],{"class":286}," \u002Fmoment",[263,597,598],{"class":299},"[",[263,600,602],{"class":601},"s1o6E","\\\\",[263,604,605],{"class":299},"\u002F]",[263,607,608],{"class":286},"locale",[263,610,611],{"class":276},"$",[263,613,153],{"class":286},[263,615,392],{"class":279},[263,617,619,622,625,628,630,632],{"class":265,"line":618},9,[263,620,621],{"class":286}," \u002F",[263,623,624],{"class":276},"^",[263,626,627],{"class":601},"\\.\\\u002F",[263,629,487],{"class":286},[263,631,611],{"class":276},[263,633,634],{"class":286},"\u002F\n",[263,636,638],{"class":265,"line":637},10,[263,639,640],{"class":279}," )\n",[263,642,644],{"class":265,"line":643},11,[263,645,646],{"class":279}," ]\n",[263,648,650],{"class":265,"line":649},12,[263,651,652],{"class":279},"};\n",[254,654,656],{"className":256,"code":655,"language":258,"meta":259,"style":259},"\u002F\u002F vite.config.js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n resolve: {\n alias: {\n lodash: 'lodash-es'\n }\n },\n optimizeDeps: {\n include: ['lodash-es']\n }\n});\n",[18,657,658,663,677,681,695,700,705,713,717,724,729,740,744],{"__ignoreMap":259},[263,659,660],{"class":265,"line":266},[263,661,662],{"class":269},"\u002F\u002F vite.config.js\n",[263,664,665,667,670,672,675],{"class":265,"line":273},[263,666,39],{"class":276},[263,668,669],{"class":279}," { defineConfig } ",[263,671,283],{"class":276},[263,673,674],{"class":286}," 'vite'",[263,676,290],{"class":279},[263,678,679],{"class":265,"line":293},[263,680,326],{"emptyLinePlaceholder":325},[263,682,683,685,688,691],{"class":265,"line":322},[263,684,42],{"class":276},[263,686,687],{"class":276}," default",[263,689,690],{"class":309}," defineConfig",[263,692,694],{"class":693},"spFnL","({\n",[263,696,697],{"class":265,"line":329},[263,698,699],{"class":279}," resolve: {\n",[263,701,702],{"class":265,"line":335},[263,703,704],{"class":279}," alias: {\n",[263,706,707,710],{"class":265,"line":350},[263,708,709],{"class":279}," lodash: ",[263,711,712],{"class":286},"'lodash-es'\n",[263,714,715],{"class":265,"line":442},[263,716,439],{"class":279},[263,718,719,722],{"class":265,"line":618},[263,720,721],{"class":279}," }",[263,723,392],{"class":693},[263,725,726],{"class":265,"line":637},[263,727,728],{"class":279}," optimizeDeps: {\n",[263,730,731,734,737],{"class":265,"line":643},[263,732,733],{"class":279}," include: [",[263,735,736],{"class":286},"'lodash-es'",[263,738,739],{"class":279},"]\n",[263,741,742],{"class":265,"line":649},[263,743,439],{"class":279},[263,745,747,750],{"class":265,"line":746},13,[263,748,749],{"class":693},"})",[263,751,290],{"class":279},[30,753,755],{"id":754},"validation-performance-thresholds","Validation & Performance Thresholds",[14,757,758],{},"Execute post-fix bundle comparison using Lighthouse CI or WebPageTest. Validate against strict performance thresholds to confirm successful optimization.",[14,760,761],{},"Document delta metrics directly in pull request descriptions. Ensure zero regression in runtime functionality by running integration tests against date manipulation and utility logic.",[14,763,764],{},[65,765,67],{},[69,767,768,771,774],{},[72,769,770],{},"Lighthouse Performance score: >90",[72,772,773],{},"Initial route JS transfer size: \u003C150KB",[72,775,776],{},"Unused lodash\u002Fmoment bytes: 0 in coverage report",[14,778,779],{},[65,780,87],{},[69,782,783,789,792,795],{},[72,784,232,785,788],{},[18,786,787],{},"lighthouse --view --output=html"," against staging URLs.",[72,790,791],{},"Compare pre\u002Fpost bundle sizes via CI pipeline artifacts.",[72,793,794],{},"Execute functional test suite for date and utility logic.",[72,796,797,798,801],{},"Verify no dynamic ",[18,799,800],{},"require"," fallbacks remain in compiled output.",[30,803,805],{"id":804},"cicd-integration-regression-prevention","CI\u002FCD Integration & Regression Prevention",[14,807,808,809,812,813,816],{},"Implement automated bundle size budgets using ",[18,810,811],{},"bundlesize"," or equivalent tools in CI pipelines. Configure ESLint ",[18,814,815],{},"import\u002Fno-unresolved"," and custom rules to block full namespace imports.",[14,818,819,820,822],{},"Add pre-commit hooks to validate ",[18,821,117],{}," declarations. Establish a quarterly maintenance protocol for auditing third-party utility dependencies.",[14,824,825],{},[65,826,67],{},[69,828,829,838],{},[72,830,831,832,834,835,837],{},"CI failure threshold: ",[18,833,20],{}," >8KB or ",[18,836,48],{}," >20KB gzipped",[72,839,840,841,844],{},"Tolerance for ",[18,842,843],{},"import _ from 'lodash'",": 0% in PRs",[14,846,847],{},[65,848,87],{},[69,850,851,854,864,867],{},[72,852,853],{},"Add size budget configuration to your CI workflow file.",[72,855,856,857,96,860,21,862,53],{},"Configure ESLint ",[18,858,859],{},"no-restricted-imports",[18,861,20],{},[18,863,48],{},[72,865,866],{},"Set up automated PR size diff reporting.",[72,868,869],{},"Document a dependency upgrade checklist for team review.",[871,872,874],"h3",{"id":873},"common-mistakes","Common Mistakes",[876,877,878,895],"table",{},[879,880,881],"thead",{},[882,883,884,889,892],"tr",{},[885,886,888],"th",{"align":887},"left","Mistake",[885,890,891],{"align":887},"Impact",[885,893,894],{"align":887},"Fix",[896,897,898,918,937,952],"tbody",{},[882,899,900,907,910],{},[901,902,903,904,906],"td",{"align":887},"Using full namespace imports (",[18,905,843],{},")",[901,908,909],{"align":887},"Bundler includes entire 72KB+ library regardless of usage.",[901,911,912,913,915,916,53],{"align":887},"Switch to named imports from ",[18,914,199],{}," or configure ",[18,917,203],{},[882,919,920,929,932],{},[901,921,922,923,926,927],{"align":887},"Omitting ",[18,924,925],{},"sideEffects: false"," in ",[18,928,95],{},[901,930,931],{"align":887},"Bundler assumes imports have global side effects and skips elimination.",[901,933,244,934,936],{"align":887},[18,935,210],{}," to project manifest or verify dependency exports.",[882,938,939,942,945],{},[901,940,941],{"align":887},"Ignoring moment.js locale directory bloat",[901,943,944],{"align":887},"All 100+ locale files bundle, adding ~160KB to payload.",[901,946,503,947,129,949,951],{"align":887},[18,948,458],{},[18,950,466],{}," to restrict active locales.",[882,953,954,957,960],{},[901,955,956],{"align":887},"Mixing CJS and ESM in the same dependency graph",[901,958,959],{"align":887},"Bundler duplicates modules or fails to optimize, causing hydration errors.",[901,961,962,963,966],{"align":887},"Standardize on ESM entry points, use ",[18,964,965],{},"mainFields: ['module', 'main']",", and audit exports.",[871,968,970],{"id":969},"faq","FAQ",[14,972,973,976,977,979,980,982],{},[65,974,975],{},"Why doesn't tree shaking work on the standard lodash package?","\nThe default ",[18,978,20],{}," package exports via CommonJS (",[18,981,52],{},"), which lacks static import\u002Fexport syntax. Bundlers cannot safely analyze dynamic property access patterns, so they include the entire library to prevent runtime errors.",[14,984,985,988,989,991,992,129,995,53],{},[65,986,987],{},"Can I tree shake moment.js without replacing it?","\nYes, but only partially. You can strip unused locales using bundler plugins like ",[18,990,458],{},". However, moment's core architecture relies on dynamic locale loading and global state, making full tree shaking impossible without migrating to a modern alternative like ",[18,993,994],{},"date-fns",[18,996,997],{},"dayjs",[14,999,1000,1003,1004,1006,1007,1009],{},[65,1001,1002],{},"What is the exact bundle size threshold for lodash after optimization?","\nAfter switching to ",[18,1005,199],{}," and using named imports, each utility typically contributes 1-3KB minified. A realistic threshold for a standard feature set is \u003C8KB gzipped total. Anything above 15KB indicates residual monolithic imports or missing ",[18,1008,117],{}," declarations.",[14,1011,1012,1015,1016,129,1018,1020,1021,129,1023,1025],{},[65,1013,1014],{},"How do I verify tree shaking actually worked in production?","\nGenerate a production build with ",[18,1017,128],{},[18,1019,132],{},". Inspect the treemap for ",[18,1022,199],{},[18,1024,48],{}," nodes and verify they only contain imported functions. Cross-validate with Chrome DevTools Coverage tab, which should show \u003C5% unused code for these modules.",[1027,1028,1029],"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 .s3sCt, html code.shiki .s3sCt{--shiki-default:#F0F3F6;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sJdzJ, html code.shiki .sJdzJ{--shiki-default:#ADDCFF;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .s5hCx, html code.shiki .s5hCx{--shiki-default:#91CBFF;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sGhOu, html code.shiki .sGhOu{--shiki-default:#DBB7FF;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sj_b3, html code.shiki .sj_b3{--shiki-default:#72F088;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .s1o6E, html code.shiki .s1o6E{--shiki-default:#72F088;--shiki-default-font-weight:bold;--shiki-dark:#72F088;--shiki-dark-font-weight:bold;--shiki-light:#024C1A;--shiki-light-font-weight:bold}html pre.shiki code .spFnL, html code.shiki .spFnL{--shiki-default:#FFB757;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":259,"searchDepth":273,"depth":273,"links":1031},[1032,1033,1034,1035,1036,1037],{"id":32,"depth":273,"text":33},{"id":121,"depth":273,"text":122},{"id":192,"depth":273,"text":193},{"id":448,"depth":273,"text":449},{"id":754,"depth":273,"text":755},{"id":804,"depth":273,"text":805,"children":1038},[1039,1040],{"id":873,"depth":293,"text":874},{"id":969,"depth":293,"text":970},"This guide delivers a rapid diagnostic and resolution workflow for frontend engineers facing unexplained bundle bloat from lodash and moment.js. Modern bundlers fail to statically analyze these legacy CommonJS packages without explicit configuration.","md",{},"\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment",{"title":5,"description":1041},"javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Ffixing-tree-shaking-issues-with-lodash-and-moment\u002Findex","AXoYEpM5xFgzoKTapYbifUec5vBqMvzdWvzU5SetRyg",[1049,1053],{"title":1050,"path":1051,"stem":1052,"children":-1},"Tree Shaking and Dead Code Elimination: Advanced Implementation & Diagnostics","\u002Fjavascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination","javascript-bundle-optimization-code-splitting\u002Ftree-shaking-and-dead-code-elimination\u002Findex",{"title":1054,"path":1055,"stem":1056,"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",1777925997722]