[{"data":1,"prerenderedAt":983},["ShallowReactive",2],{"content:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer":3,"surroundings:\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer":974},{"id":4,"title":5,"body":6,"description":954,"extension":955,"meta":956,"navigation":968,"path":969,"seo":970,"stem":972,"__hash__":973},"content\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer\u002Findex.md","Finding Bundle Bloat with source-map-explorer",{"type":7,"value":8,"toc":938},"minimark",[9,14,39,42,193,198,247,251,257,263,269,275,367,371,376,478,485,489,544,547,551,566,612,615,619,622,741,745,748,752,771,775,807,811,817,823,829,835,839,851,860,869,878,887,896,900,923,928,931,934],[10,11,13],"h1",{"id":12},"how-to-find-bundle-bloat-with-source-map-explorer","How to Find Bundle Bloat with source-map-explorer",[15,16,17,18,23,24,28,29,33,34,38],"p",{},"This guide adds a bundler-agnostic tool to ",[19,20,22],"a",{"href":21},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F","Webpack Bundle Analysis Techniques",", part of ",[19,25,27],{"href":26},"\u002Fjavascript-bundle-optimization-code-splitting\u002F","JavaScript Bundle Optimization & Code Splitting",". Bundler plugins such as webpack-bundle-analyzer and rollup-plugin-visualizer report what the bundler ",[30,31,32],"em",{},"thinks"," each module contributes, often before minification. ",[35,36,37],"code",{},"source-map-explorer"," takes a different approach: it reads the final minified file and its source map, and attributes every byte of output to the original source file that produced it.",[15,40,41],{},"That has two advantages. It measures exactly what ships — after minification, dead-code elimination and any post-processing — and it works with any toolchain that emits source maps: webpack, Rollup, Vite, esbuild, Parcel, Turbopack, or a CDN-hosted third-party bundle whose map you can download. When numbers from a bundler plugin and the actual file size disagree, source-map-explorer is the tie-breaker.",[15,43,44],{},[45,46,52,53,52,60,52,64,52,67,52,85,52,93,52,99,52,107,52,114,52,119,52,122,52,126,52,129,52,133,52,139,52,143,52,146,52,149,52,152,52,156,52,159,52,162,52,165,52,169,52,172,52,181,52,185,52,189,52],"svg",{"viewBox":47,"width":48,"role":49,"ariaLabel":50,"style":51},"0 0 760 149","100%","img","Steps from a minified bundle and its source map to a per-file breakdown of output bytes.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[54,55],"rect",{"className":56,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],"svg-canvas","0","#ffffff",[61,62,63],"title",{},"How source-map-explorer attributes bytes",[65,66,50],"desc",{},[68,69,70],"defs",{},[71,72,79],"marker",{"id":73,"viewBox":74,"refX":75,"refY":76,"markerWidth":77,"markerHeight":77,"orient":78},"fab6b1c276","0 0 10 10","9","5","7","auto-start-reverse",[80,81],"path",{"d":82,"fill":83,"style":84},"M0 0 L10 5 L0 10 z","currentColor","fill-opacity:0.7",[54,86],{"x":87,"y":87,"width":88,"height":89,"rx":90,"fill":91,"stroke":83,"style":92},"1","758","147","10","none","stroke-opacity:0.18",[94,95,63],"text",{"x":96,"y":97,"fill":83,"style":98},"28.0","34.0","font-size:16px;font-weight:700",[54,100],{"x":96,"y":101,"width":102,"height":103,"rx":104,"fill":105,"stroke":105,"style":106},"56.0","108.8","71.0","6","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[94,108,113],{"x":109,"y":110,"fill":83,"style":111,"textAnchor":112},"82.4","78.0","font-size:13px;font-weight:700","middle","Minified JS",[94,115,118],{"x":109,"y":116,"fill":83,"style":117,"textAnchor":112},"96.0","font-size:12px","final shipped file",[54,120],{"x":121,"y":101,"width":102,"height":103,"rx":104,"fill":105,"stroke":105,"style":106},"176.8",[94,123,125],{"x":124,"y":110,"fill":83,"style":111,"textAnchor":112},"231.2","Source map",[94,127,128],{"x":124,"y":116,"fill":83,"style":117,"textAnchor":112},"output → source",[94,130,132],{"x":124,"y":131,"fill":83,"style":117,"textAnchor":112},"112.0","mappings",[54,134],{"x":135,"y":101,"width":102,"height":103,"rx":104,"fill":136,"stroke":137,"style":138},"325.6","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[94,140,142],{"x":141,"y":110,"fill":83,"style":111,"textAnchor":112},"380.0","Attribute bytes",[94,144,145],{"x":141,"y":116,"fill":83,"style":117,"textAnchor":112},"each column to a",[94,147,148],{"x":141,"y":131,"fill":83,"style":117,"textAnchor":112},"file",[54,150],{"x":151,"y":101,"width":102,"height":103,"rx":104,"fill":105,"stroke":105,"style":106},"474.4",[94,153,155],{"x":154,"y":110,"fill":83,"style":111,"textAnchor":112},"528.8","Aggregate",[94,157,158],{"x":154,"y":116,"fill":83,"style":117,"textAnchor":112},"by file and",[94,160,161],{"x":154,"y":131,"fill":83,"style":117,"textAnchor":112},"package",[54,163],{"x":164,"y":101,"width":102,"height":103,"rx":104,"fill":105,"stroke":105,"style":106},"623.2",[94,166,168],{"x":167,"y":110,"fill":83,"style":111,"textAnchor":112},"677.6","Treemap",[94,170,171],{"x":167,"y":116,"fill":83,"style":117,"textAnchor":112},"HTML or JSON",[173,174],"line",{"x1":175,"y1":176,"x2":177,"y2":176,"stroke":83,"strokeWidth":178,"style":179,"markerEnd":180},"136.8","91.5","174.8","1.5","stroke-opacity:0.6","url(#fab6b1c276)",[173,182],{"x1":183,"y1":176,"x2":184,"y2":176,"stroke":83,"strokeWidth":178,"style":179,"markerEnd":180},"285.6","323.6",[173,186],{"x1":187,"y1":176,"x2":188,"y2":176,"stroke":83,"strokeWidth":178,"style":179,"markerEnd":180},"434.4","472.4",[173,190],{"x1":191,"y1":176,"x2":192,"y2":176,"stroke":83,"strokeWidth":178,"style":179,"markerEnd":180},"583.2","621.2",[194,195,197],"h2",{"id":196},"rapid-diagnosis","Rapid Diagnosis",[199,200,201,217,223,233],"ul",{},[202,203,204,208,209,212,213,216],"li",{},[205,206,207],"strong",{},"Ensure source maps are generated for production builds",", even if not deployed publicly (",[35,210,211],{},"hidden-source-map"," in webpack, ",[35,214,215],{},"sourcemap: 'hidden'"," in Vite).",[202,218,219,222],{},[205,220,221],{},"Run the tool on the largest initial chunk first."," That is where bytes hurt most.",[202,224,225,232],{},[205,226,227,228,231],{},"Look for ",[35,229,230],{},"[unmapped]"," bytes."," Large unmapped areas mean injected code (runtime, helpers) or broken source maps.",[202,234,235,238,239,242,243,246],{},[205,236,237],{},"Look for the same package under multiple paths"," — ",[35,240,241],{},"node_modules\u002Fa\u002Fnode_modules\u002Flodash"," and ",[35,244,245],{},"node_modules\u002Flodash"," — indicating duplication.",[194,248,250],{"id":249},"root-cause-analysis-what-it-commonly-finds","Root Cause Analysis: What It Commonly Finds",[15,252,253,256],{},[205,254,255],{},"1. Packages that survived tree shaking."," A library expected to be partially removed appears in full because of side effects or CommonJS format.",[15,258,259,262],{},[205,260,261],{},"2. Duplicated dependencies."," Different versions of the same package installed for different dependents, both bundled.",[15,264,265,268],{},[205,266,267],{},"3. Generated code."," Large chunks attributed to generated files — GraphQL documents, i18n catalogues, route manifests — that grew silently.",[15,270,271,274],{},[205,272,273],{},"4. Bundler runtime and helpers."," Unmapped or runtime-attributed bytes that grow with chunk count or with module-interop overhead.",[15,276,277,353,52,357],{},[45,278,52,281,52,284,52,287,52,289,52,292,52,294,52,301,52,308,52,313,52,317,52,322,52,326,52,330,52,334,52,338,52,342,52,346,52,350],{"viewBox":279,"width":48,"role":49,"ariaLabel":280,"style":51},"0 0 760 225","Bar chart of the largest source contributors to a minified main chunk as attributed by source-map-explorer.",[54,282],{"className":283,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],[61,285,286],{},"Top contributors in a 410KB main chunk (minified)",[65,288,280],{},[54,290],{"x":87,"y":87,"width":88,"height":291,"rx":90,"fill":91,"stroke":83,"style":92},"223",[94,293,286],{"x":96,"y":97,"fill":83,"style":98},[94,295,300],{"x":296,"y":297,"fill":83,"style":298,"textAnchor":299},"148.1","70.0","font-size:13px","end","react-dom",[54,302],{"x":303,"y":101,"width":304,"height":305,"rx":306,"fill":83,"stroke":83,"style":307},"160.1","507.9","19","3","fill-opacity:0.7;stroke-opacity:0.4",[94,309,312],{"x":310,"y":297,"fill":83,"style":311},"674.0","font-size:12px;font-weight:600","128KB",[94,314,316],{"x":296,"y":315,"fill":83,"style":298,"textAnchor":299},"101.0","lodash (two copies)",[54,318],{"x":303,"y":319,"width":320,"height":305,"rx":306,"fill":136,"stroke":137,"style":321},"87.0","281.7","fill-opacity:0.7;stroke-opacity:0.9",[94,323,325],{"x":324,"y":315,"fill":83,"style":311},"447.8","71KB",[94,327,329],{"x":296,"y":328,"fill":83,"style":298,"textAnchor":299},"132.0","generated\u002Fgraphql.ts",[54,331],{"x":303,"y":332,"width":333,"height":305,"rx":306,"fill":136,"stroke":137,"style":321},"118.0","214.3",[94,335,337],{"x":336,"y":328,"fill":83,"style":311},"380.4","54KB",[94,339,341],{"x":296,"y":340,"fill":83,"style":298,"textAnchor":299},"163.0","app src\u002F",[54,343],{"x":303,"y":344,"width":345,"height":305,"rx":306,"fill":83,"stroke":83,"style":307},"149.0","380.9",[94,347,349],{"x":348,"y":340,"fill":83,"style":311},"547.0","96KB",[94,351],{"x":296,"y":352,"fill":83,"style":298,"textAnchor":299},"194.0",[354,355,356],"span",{},"unmapped",[54,358,52,363,52],{"x":303,"y":359,"width":360,"height":361,"rx":306,"fill":105,"stroke":105,"style":362},"180.0",71.4,19,"fill-opacity:0.55;stroke-opacity:0.9",[94,364,366],{"x":365,"y":352,"fill":83,"style":311},"237.5","18KB",[194,368,370],{"id":369},"step-by-step-workflow","Step-by-Step Workflow",[372,373,375],"h3",{"id":374},"_1-generate-production-source-maps","1. Generate production source maps",[377,378,383],"pre",{"className":379,"code":380,"language":381,"meta":382,"style":382},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F webpack.config.js\nmodule.exports = { mode: 'production', devtool: 'hidden-source-map' };\n\u002F\u002F vite.config.js\nexport default { build: { sourcemap: 'hidden' } };\n\u002F\u002F trade-off: source maps add build time and disk space. Generate them in CI and\n\u002F\u002F upload to your error tracker; do not deploy them publicly unless you intend\n\u002F\u002F your source to be readable.\n","javascript","",[35,384,385,392,426,432,460,466,472],{"__ignoreMap":382},[354,386,388],{"class":173,"line":387},1,[354,389,391],{"class":390},"sjfSM","\u002F\u002F webpack.config.js\n",[354,393,395,399,403,406,410,413,417,420,423],{"class":173,"line":394},2,[354,396,398],{"class":397},"sPXB4","module",[354,400,402],{"class":401},"saISM",".",[354,404,405],{"class":397},"exports",[354,407,409],{"class":408},"sPARh"," =",[354,411,412],{"class":401}," { mode: ",[354,414,416],{"class":415},"sZ8jY","'production'",[354,418,419],{"class":401},", devtool: ",[354,421,422],{"class":415},"'hidden-source-map'",[354,424,425],{"class":401}," };\n",[354,427,429],{"class":173,"line":428},3,[354,430,431],{"class":390},"\u002F\u002F vite.config.js\n",[354,433,435,438,441,445,448,451,454,457],{"class":173,"line":434},4,[354,436,437],{"class":408},"export",[354,439,440],{"class":408}," default",[354,442,444],{"class":443},"sQw3B"," { ",[354,446,447],{"class":401},"build: { sourcemap: ",[354,449,450],{"class":415},"'hidden'",[354,452,453],{"class":401}," } ",[354,455,456],{"class":443},"}",[354,458,459],{"class":401},";\n",[354,461,463],{"class":173,"line":462},5,[354,464,465],{"class":390},"\u002F\u002F trade-off: source maps add build time and disk space. Generate them in CI and\n",[354,467,469],{"class":173,"line":468},6,[354,470,471],{"class":390},"\u002F\u002F upload to your error tracker; do not deploy them publicly unless you intend\n",[354,473,475],{"class":173,"line":474},7,[354,476,477],{"class":390},"\u002F\u002F your source to be readable.\n",[15,479,480,481,484],{},"Expected outcome: a ",[35,482,483],{},".map"," file next to every emitted chunk.",[372,486,488],{"id":487},"_2-run-the-analysis","2. Run the analysis",[377,490,494],{"className":491,"code":492,"language":493,"meta":382,"style":382},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","npx source-map-explorer 'dist\u002Fassets\u002Findex-*.js' --html report.html\nnpx source-map-explorer 'dist\u002Fassets\u002F*.js' --json > sme.json     # all chunks, machine-readable\n# trade-off: analysing all chunks together merges lazy and initial code into\n# one picture. Analyse the initial chunks separately for critical-path decisions.\n","bash",[35,495,496,513,534,539],{"__ignoreMap":382},[354,497,498,501,504,507,510],{"class":173,"line":387},[354,499,500],{"class":443},"npx",[354,502,503],{"class":415}," source-map-explorer",[354,505,506],{"class":415}," 'dist\u002Fassets\u002Findex-*.js'",[354,508,509],{"class":397}," --html",[354,511,512],{"class":415}," report.html\n",[354,514,515,517,519,522,525,528,531],{"class":173,"line":394},[354,516,500],{"class":443},[354,518,503],{"class":415},[354,520,521],{"class":415}," 'dist\u002Fassets\u002F*.js'",[354,523,524],{"class":397}," --json",[354,526,527],{"class":408}," >",[354,529,530],{"class":415}," sme.json",[354,532,533],{"class":390},"     # all chunks, machine-readable\n",[354,535,536],{"class":173,"line":428},[354,537,538],{"class":390},"# trade-off: analysing all chunks together merges lazy and initial code into\n",[354,540,541],{"class":173,"line":434},[354,542,543],{"class":390},"# one picture. Analyse the initial chunks separately for critical-path decisions.\n",[15,545,546],{},"Expected outcome: an interactive treemap and a JSON breakdown per file.",[372,548,550],{"id":549},"_3-investigate-the-top-items","3. Investigate the top items",[15,552,553,554,557,558,561,562,565],{},"For each large contributor, decide: is it needed on this route? Is it larger than it should be (tree shaking failed)? Is it duplicated? Trace the import chain with your bundler's analysis tool or a ",[35,555,556],{},"why","-style command (",[35,559,560],{},"npm ls lodash",", ",[35,563,564],{},"pnpm why lodash",").",[377,567,569],{"className":491,"code":568,"language":493,"meta":382,"style":382},"npm ls lodash\n# my-app@1.0.0\n# ├── lodash@4.17.21\n# └─┬ legacy-widget@2.3.0\n#   └── lodash@3.10.1\n# trade-off: deduplicating across major versions is not always possible; if\n# the old version is required, consider replacing or forking the dependent.\n",[35,570,571,582,587,592,597,602,607],{"__ignoreMap":382},[354,572,573,576,579],{"class":173,"line":387},[354,574,575],{"class":443},"npm",[354,577,578],{"class":415}," ls",[354,580,581],{"class":415}," lodash\n",[354,583,584],{"class":173,"line":394},[354,585,586],{"class":390},"# my-app@1.0.0\n",[354,588,589],{"class":173,"line":428},[354,590,591],{"class":390},"# ├── lodash@4.17.21\n",[354,593,594],{"class":173,"line":434},[354,595,596],{"class":390},"# └─┬ legacy-widget@2.3.0\n",[354,598,599],{"class":173,"line":462},[354,600,601],{"class":390},"#   └── lodash@3.10.1\n",[354,603,604],{"class":173,"line":468},[354,605,606],{"class":390},"# trade-off: deduplicating across major versions is not always possible; if\n",[354,608,609],{"class":173,"line":474},[354,610,611],{"class":390},"# the old version is required, consider replacing or forking the dependent.\n",[15,613,614],{},"Expected outcome: a short list of concrete fixes, each with an expected byte saving.",[372,616,618],{"id":617},"_4-compare-before-and-after","4. Compare before and after",[15,620,621],{},"Save the JSON output for the base build and compare per-file totals after changes, or across releases, to confirm savings and catch regressions.",[15,623,624],{},[45,625,52,628,52,631,52,634,52,636,52,639,52,641,52,646,52,653,52,657,52,660,52,663,52,667,52,671,52,675,52,677,52,680,52,682,52,685,52,688,52,692,52,694,52,697,52,699,52,702,52,706,52,710,52,714,52,716,52,720,52,722,52,725,52,728,52,732,52,734,52,737,52,739,52],{"viewBox":626,"width":48,"role":49,"ariaLabel":627,"style":51},"0 0 760 244","Comparison of source-map-explorer with bundler-integrated analysers by what they measure and when to use each.",[54,629],{"className":630,"x":58,"y":58,"width":48,"height":48,"fill":59},[57],[61,632,633],{},"source-map-explorer vs bundler plugins",[65,635,627],{},[54,637],{"x":87,"y":87,"width":88,"height":638,"rx":90,"fill":91,"stroke":83,"style":92},"242",[94,640,633],{"x":96,"y":97,"fill":83,"style":98},[54,642],{"x":96,"y":101,"width":643,"height":644,"rx":58,"fill":83,"stroke":83,"style":645},"210.0","30.0","fill-opacity:0.06;stroke-opacity:0.4",[94,647,652],{"x":648,"y":649,"fill":83,"style":650,"textAnchor":651},"38.0","75.5","font-size:12.5px;font-weight:700","start","Aspect",[54,654],{"x":655,"y":101,"width":656,"height":644,"rx":58,"fill":83,"stroke":83,"style":645},"238.0","247.0",[94,658,37],{"x":659,"y":649,"fill":83,"style":650,"textAnchor":112},"361.5",[54,661],{"x":662,"y":101,"width":656,"height":644,"rx":58,"fill":83,"stroke":83,"style":645},"485.0",[94,664,666],{"x":665,"y":649,"fill":83,"style":650,"textAnchor":112},"608.5","Bundler plugin",[54,668],{"x":96,"y":669,"width":643,"height":644,"rx":58,"fill":91,"stroke":83,"style":670},"86.0","stroke-opacity:0.35",[94,672,674],{"x":648,"y":673,"fill":83,"style":650,"textAnchor":651},"105.5","Measures",[54,676],{"x":655,"y":669,"width":656,"height":644,"rx":58,"fill":105,"stroke":105,"style":106},[94,678,679],{"x":659,"y":673,"fill":83,"style":117,"textAnchor":112},"final minified bytes",[54,681],{"x":662,"y":669,"width":656,"height":644,"rx":58,"fill":83,"stroke":83,"style":645},[94,683,684],{"x":665,"y":673,"fill":83,"style":117,"textAnchor":112},"bundler's module sizes",[54,686],{"x":96,"y":687,"width":643,"height":644,"rx":58,"fill":91,"stroke":83,"style":670},"116.0",[94,689,691],{"x":648,"y":690,"fill":83,"style":650,"textAnchor":651},"135.5","Works with any bundler",[54,693],{"x":655,"y":687,"width":656,"height":644,"rx":58,"fill":105,"stroke":105,"style":106},[94,695,696],{"x":659,"y":690,"fill":83,"style":117,"textAnchor":112},"yes, needs maps",[54,698],{"x":662,"y":687,"width":656,"height":644,"rx":58,"fill":136,"stroke":137,"style":138},[94,700,701],{"x":665,"y":690,"fill":83,"style":117,"textAnchor":112},"bundler-specific",[54,703],{"x":96,"y":704,"width":643,"height":705,"rx":58,"fill":91,"stroke":83,"style":670},"146.0","46.0",[94,707,709],{"x":648,"y":708,"fill":83,"style":650,"textAnchor":651},"165.5","Explains why a module is",[94,711,713],{"x":648,"y":712,"fill":83,"style":650,"textAnchor":651},"181.5","included",[54,715],{"x":655,"y":704,"width":656,"height":705,"rx":58,"fill":136,"stroke":137,"style":138},[94,717,719],{"x":659,"y":718,"fill":83,"style":117,"textAnchor":112},"173.5","no",[54,721],{"x":662,"y":704,"width":656,"height":705,"rx":58,"fill":105,"stroke":105,"style":106},[94,723,724],{"x":665,"y":718,"fill":83,"style":117,"textAnchor":112},"yes, import graph",[54,726],{"x":96,"y":727,"width":643,"height":644,"rx":58,"fill":91,"stroke":83,"style":670},"192.0",[94,729,731],{"x":648,"y":730,"fill":83,"style":650,"textAnchor":651},"211.5","Third-party prebuilt bundles",[54,733],{"x":655,"y":727,"width":656,"height":644,"rx":58,"fill":105,"stroke":105,"style":106},[94,735,736],{"x":659,"y":730,"fill":83,"style":117,"textAnchor":112},"if map available",[54,738],{"x":662,"y":727,"width":656,"height":644,"rx":58,"fill":136,"stroke":137,"style":138},[94,740,719],{"x":665,"y":730,"fill":83,"style":117,"textAnchor":112},[194,742,744],{"id":743},"verification","Verification",[15,746,747],{},"Check that the tool's total for a chunk matches the file's size (minus a small unmapped remainder); a large mismatch means the source map is incomplete. After fixing an issue, re-run and confirm the item shrank or disappeared, and that the chunk's total file size fell by a corresponding amount.",[194,749,751],{"id":750},"worked-example-two-copies-of-lodash","Worked Example: Two Copies of lodash",[15,753,754,755,758,759,762,763,766,767,770],{},"A React app's main chunk was 410KB minified. The bundler plugin showed lodash at 24KB, which seemed fine. source-map-explorer showed lodash under two paths totalling 71KB: the app's own ",[35,756,757],{},"lodash"," (full build, imported via ",[35,760,761],{},"import _ from 'lodash'",") and ",[35,764,765],{},"lodash@3"," nested under an old widget dependency. The team switched the app's imports to ",[35,768,769],{},"lodash-es"," per-function imports, replaced the old widget, and the main chunk dropped by 64KB. The plugin had under-reported because it measured pre-minification module sizes and grouped the nested copy separately.",[194,772,774],{"id":773},"common-mistakes","Common Mistakes",[199,776,777,783,791,797],{},[202,778,779,782],{},[205,780,781],{},"Analysing development builds."," Unminified, un-shaken code produces a misleading picture.",[202,784,785,790],{},[205,786,787,788,402],{},"Ignoring ",[35,789,230],{}," A large unmapped share means the analysis is incomplete; fix source map generation first.",[202,792,793,796],{},[205,794,795],{},"Deploying public source maps by accident."," Use hidden maps and keep them out of the public deploy.",[202,798,799,802,803,806],{},[205,800,801],{},"Comparing gzip to raw."," Be consistent about whether you discuss minified or compressed sizes; the tool reports minified bytes by default (",[35,804,805],{},"--gzip"," changes that).",[194,808,810],{"id":809},"edge-cases-that-distort-the-picture","Edge Cases That Distort the Picture",[15,812,813,816],{},[205,814,815],{},"Concatenated modules."," Scope hoisting (webpack's ModuleConcatenationPlugin, Rollup's default) merges modules into one function scope; source maps still attribute bytes correctly, but small helper modules may appear to vanish into their importers.",[15,818,819,822],{},[205,820,821],{},"Inlined constants and minifier transforms."," Minifiers inline constants and collapse code, so bytes attributed to a file can be smaller than its source suggests — or attributed to the call site rather than the definition. Interpret per-file numbers as approximate for very small files.",[15,824,825,828],{},[205,826,827],{},"Multiple maps per chunk."," Some pipelines run a second transform (a post-build minifier or obfuscator) that produces a new map; if the maps are not chained, attribution points at the intermediate file rather than the original source. Generate maps from the last step or chain them.",[15,830,831,834],{},[205,832,833],{},"Inline data URLs."," Fonts or images inlined into JavaScript appear as one large attribution to the importing module, often a CSS-in-JS file. Large inline assets are almost always better served as separate files.",[194,836,838],{"id":837},"faq","FAQ",[840,841,844,848],"details",{"className":842},[843],"faq-item",[845,846,847],"summary",{},"Why are source-map-explorer and webpack-bundle-analyzer numbers different?",[15,849,850],{},"webpack-bundle-analyzer's \"parsed\" size approximates minified size per module, but its attribution happens at the module level inside webpack, while source-map-explorer attributes the final bytes column by column. Concatenation, inlining and minifier transforms make the two diverge slightly; for \"what ships\", trust source-map-explorer.",[840,852,854,857],{"className":853},[843],[845,855,856],{},"Can I analyse a third-party script?",[15,858,859],{},"If the vendor publishes a source map, download both files and run the tool locally. That can reveal, for example, that a 90KB widget bundles its own copy of a framework — useful evidence when negotiating with a vendor or choosing an alternative.",[840,861,863,866],{"className":862},[843],[845,864,865],{},"Does it work with CSS?",[15,867,868],{},"It is designed for JavaScript. For CSS, use your bundler's CSS output with source maps and coverage data from DevTools' Coverage panel to find unused rules.",[840,870,872,875],{"className":871},[843],[845,873,874],{},"How often should I run this analysis?",[15,876,877],{},"On every significant dependency change and before major releases, plus whenever a size budget fails without an obvious cause. Automating a JSON run in CI and storing results lets you compare any two builds later without regenerating them.",[840,879,881,884],{"className":880},[843],[845,882,883],{},"Can source-map-explorer show gzip sizes?",[15,885,886],{},"Yes, with the --gzip flag it estimates compressed contributions per file. Use minified sizes for parse-cost questions and gzip or brotli estimates for transfer questions, and say which one you are quoting.",[840,888,890,893],{"className":889},[843],[845,891,892],{},"What should I do with the findings first?",[15,894,895],{},"Rank items by bytes on the critical path, not by total bytes. A 40KB library in the landing route's initial chunk matters more than a 120KB library in a lazy admin chunk. Fix duplicates first (pure savings, no behaviour change), then failed tree shaking, then heavy dependencies that can move behind dynamic imports, and finally candidates for replacement with lighter alternatives.",[194,897,899],{"id":898},"related","Related",[199,901,902,909,916],{},[202,903,904,908],{},[19,905,907],{"href":906},"\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"," — the import-graph view.",[202,910,911,915],{},[19,912,914],{"href":913},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-duplicate-dependencies-in-a-monorepo-bundle\u002F","Finding duplicate dependencies in a monorepo bundle"," — fixing the duplication this tool reveals.",[202,917,918,922],{},[19,919,921],{"href":920},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fcomparing-two-builds-with-statoscope\u002F","Comparing two builds with Statoscope"," — build-to-build diffs for webpack.",[924,925,927],"script",{"type":926},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Find Bundle Bloat with source-map-explorer\",\n  \"description\": \"How to use source maps to see exactly which source files and packages make up a production bundle, regardless of the bundler that produced it.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Generate production source maps\",\n      \"text\": \"Expected outcome: a .map file next to every emitted chunk.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Run the analysis\",\n      \"text\": \"Expected outcome: an interactive treemap and a JSON breakdown per file.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Investigate the top items\",\n      \"text\": \"For each large contributor, decide: is it needed on this route?\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Compare before and after\",\n      \"text\": \"Save the JSON output for the base build and compare per-file totals after changes, or across releases, to confirm savings and catch regressions.\"\n    }\n  ]\n}\n",[924,929,930],{"type":926},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Find Bundle Bloat with source-map-explorer\",\n  \"description\": \"How to use source maps to see exactly which source files and packages make up a production bundle, regardless of the bundler that produced it.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer\u002F\"\n  }\n}\n",[924,932,933],{"type":926},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"JavaScript Bundle Optimization & Code Splitting\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Webpack Bundle Analysis Techniques\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Finding Bundle Bloat with source-map-explorer\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer\u002F\"\n    }\n  ]\n}\n",[935,936,937],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--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);}",{"title":382,"searchDepth":394,"depth":394,"links":939},[940,941,942,948,949,950,951,952,953],{"id":196,"depth":394,"text":197},{"id":249,"depth":394,"text":250},{"id":369,"depth":394,"text":370,"children":943},[944,945,946,947],{"id":374,"depth":428,"text":375},{"id":487,"depth":428,"text":488},{"id":549,"depth":428,"text":550},{"id":617,"depth":428,"text":618},{"id":743,"depth":394,"text":744},{"id":750,"depth":394,"text":751},{"id":773,"depth":394,"text":774},{"id":809,"depth":394,"text":810},{"id":837,"depth":394,"text":838},{"id":898,"depth":394,"text":899},"How to use source maps to see exactly which source files and packages make up a production bundle, regardless of the bundler that produced it.","md",{"slug":957,"type":958,"breadcrumb":959,"datePublished":967,"dateModified":967},"finding-bundle-bloat-with-source-map-explorer","article",[960,963,964,965],{"name":961,"url":962},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":966},"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer\u002F","2026-10-06",true,"\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer",{"title":5,"description":971},"Use source-map-explorer to attribute every byte of a minified bundle to its original source file, find duplicates and bloat, and compare builds from any bundler.","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-bundle-bloat-with-source-map-explorer\u002Findex","rEXn2xsjTbVH8HXTEf5NMsTBQnXuUxnlh6jW-ax1mJw",[975,979],{"title":976,"path":977,"stem":978,"children":-1},"Comparing Two Builds with Statoscope","\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fcomparing-two-builds-with-statoscope","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Fcomparing-two-builds-with-statoscope\u002Findex",{"title":980,"path":981,"stem":982,"children":-1},"Finding Duplicate Dependencies in a Monorepo Bundle","\u002Fjavascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-duplicate-dependencies-in-a-monorepo-bundle","javascript-bundle-optimization-code-splitting\u002Fwebpack-bundle-analysis-techniques\u002Ffinding-duplicate-dependencies-in-a-monorepo-bundle\u002Findex",1791308076131]