For example, it may be a component inside of a dropdown the user never interacted with, or components that are only needed if the user opens a modal.
#Source filmmaker how to load a map code
Red boxes correspond to code that would only be executed if the user took some action, or if some condition was met. This allows you to find the code that is not strictly needed for the initial page load and helps to identify the ideal ways to code split. source-map-explorer accepts path to via -coverage argument (or coverage API option) and attempts to color code the heat map. In Google Chrome, you can collect code coverage stats. Also it's impossible to calculate unmapped bytes because the sum of spans' gzip sizes isn't equal to gzip size of the source file. It means that removing a 1k gzipped file in a bundle may reduce the bundle size by less than 1k. Due to the nature of compression a gzip file size is inaccurate. When gzip option (or -gzip parameter) is specified result size calculated as gzip size. Source-map-explorer script.js -json result.json Explore and save result as JSON to the fileĮxplore bundle and view result as an interactive map Source-map-explorer script.js -tsv Explore and output result as TSV to stdout Source-map-explorer dist/js/*.* Explore all bundles inside dist/js folder Source-map-explorer script.js Explore bundle with inline source map Source-map-explorer script.js script.js.map Explore bundle coverage If the path to a valid a chrome code coverage JSON export is supplied, the tree map will be colorized according to which percentage of the modules code was executed no-border-checks Disable invalid mapping column/line checks. If you wish to disable this behavior, set -no-root. no-root To simplify the visualization, source-map-explorer will remove any prefix shared by all sources. exclude-source-map Exclude source map comment size from output This will result in total counts less than the file size only-mapped, -m Exclude "unmapped" bytes from the output. This can be used to fix some oddities with paths that appear in the source map generation process. replace Apply a simple find/replace on source file names. html If filename specified save output as HTML to specified file otherwise output to stdout rather than opening a browser.
tsv If filename specified save output as TSV to specified file otherwise output to stdout. json If filename specified save output as JSON to specified file otherwise output to stdout. Source-map-explorer script.js | -html | -tsv ] It also sets onlyMapped flagĪnalyze and debug space usage through source maps. coverage: If the path to a valid a chrome code coverage JSON export is supplied, the tree map will be colorized according to which percentage of the modules code was executed By default, when a source map references column/line with bigger index than available in the source source-map-explorers throws an error indicating that specified source map might be wrong for the source. no-border-checks: Disable invalid mapping column/line checks. But if you want to disable this behavior, set the -no-root flag. no-root: By default, source-map-explorer finds common prefixes between all source files and eliminates them, since they add complexity to the visualization with no real benefit. Be aware that the find/replace is done after eliminating shared prefixes between paths.
You can specify these flags multiple times.
Source-map-explorer -replace 'dist/' -with ''
0 kommentar(er)
