A tool for analyzing and comparing JavaScript bundles
npm install source-map-comparesource-map-compare is a command-tool tool which displays a tabular, file-by-file accounting of the size of a JavaScript bundle using the sourcemaps. It also supports a comparison view, so you can see how the size of a bundle changes version to version. To see a full list of options, run yarn start --help.
This tool is built off of and heavily inspired by source-map-explorer, which performs the analysis and provides a graphical Treemap view, only for single bundles.
To install globally:
``sh`
npm i -g source-map-compare
source-map-compare can also be run via npx.
To compare two bundles, you can provide either exact paths or user glob patterns to select the baseline and comparison bundles. If multiple bundles match a glob, they will be aggregated into a aggregate single view.
If your sourcemaps are not in the same directory as the bundle, you can provide the exact paths to them. Note that this only works for single file comparisons. Glob patterns only support automatic detection of sourcemaps via sourceMapUrl or side-by-side sourcemaps in the same directory.
`shsource-map-compare compare
To analyze a single bundle:
sh
source-map-compare analyze [sourcemap]
analyze multiple chunks in a bundle (aggregated):
source-map-compare analyze dist/*/.js
analyze a single file bundle:
source-map-compare analyze dist/app.js
analyze string file bundle with manual sourcemaps path:
source-map-compare analyze dist/app.js dist/app.js.map
`Sourcemap resolution
If a JS file has a
comment at the end of the file, it will attempt to be used relative to the directory containing the JS file:`js
//# sourceMappingURL=TestComponent.da60eb2d9009485e9733.js.map
`If a
is not present or the file does not exist, it will attempt to find a sourcemap in the same directory with the same name as the JS file with a .js.map extension.Definitions of metrics
The base unit for all sizes is bytes.
- "% Size" (Single bundle only) - The size of a file or directory divided by the size of the whole bundle
- "% Size in Parent" (Single bundle only) - The size of a file or directory divided by the size of the immediate parent directory
- "% Size Change" (Comparison only) - (right size - left size) / left size
- "% Total Change" (Comparison only) - (right size - left size) / (total right size - total left size)
- Note that since a particular file may increase in size while the overall bundle decreases, this can be negative.
Formal definitions can be found in [./src/view/Columns.tsx]
Contributing
This project welcomes contributions and suggestions. Most contributions require you to agree to a
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
the rights to use your contribution. For details, visit .
When you submit a pull request, a CLA bot will automatically determine whether you need to provide
a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct.
For more information see the Code of Conduct FAQ or
contact opencode@microsoft.com with any additional questions or comments.
$3
After cloning the repo, you can install and build with:
`sh
yarn
yarn build
`You may need to first install yarn with
.This repo uses Beachball for tracking package versions. Before you can complete a pull request, you must generate change files for your change by running:
`sh
yarn change
``This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
trademarks or logos is subject to and must follow
Microsoft's Trademark & Brand Guidelines.
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
Any use of third-party trademarks or logos are subject to those third-party's policies.