使用 source-map-explorer 分析前端打包结果进行包体积优化

3,248次阅读
没有评论

共计 2817 个字符,预计需要花费 8 分钟才能阅读完成。

提醒:本文最后更新于2025-07-07 14:42,文中所关联的信息可能已发生改变,请知悉!

对于前端打包构建生产环境的产出内容,特别是在采用了 Vue.js、React 或 Angular 等主流框架的时候,其体积达数 M 是很常见的现象。

当希望对包体积进行优化分析时,或许你知道可以选择使用 webpack-bundle-analyzer, 其实 source-map-explorer 也是个不错的选择。当打包输出结果生成了 sourceMap,source-map-explorer 就可以据此分析出每个模块所占用的体积。而且它不仅限于 JavaScript,对于 Css 预处理器 LESS 和 Sass 来说同样适用。

1 使用 source-map-explorer

1.1 构建输出项目

首先对前端项目构建输出用于生产环境的内容,注意开启 sourceMap 的输出。

1.2 使用 source-map-explorer 分析示例

source-map-explorer 的用法相当简单。首先全局安装 source-map-explorer

npm i -g source-map-explorer

然后进入打包输出内容目录,执行如下命令(示例中的 为具体产出结果的 hash 值占位符):

source-map-explorer main.<hash>.js main.<hash>.js.map

你也可以不全局安装它,直接使用 npx 执行:

npx source-map-explorer main.<hash>.js main.<hash>.js.map

如一切正常,该命令会在临时目录生成 html 文件分析结果,并自动打开浏览器进行显示。示例:

使用 source-map-explorer 分析前端打包结果进行包体积优化

以上为单文件分析的简单示例。也可以使用通配符方式,如:

npx source-map-explorer dist/prod/*.js

我们可以将该命令配置到 package.jsonscripts 脚本中:

{
"scripts": {
"analyze": "npx source-map-explorer dist/prod/*.js",
}
}

在完打包完成之后,执行 npm run analyze 即可得到分析结果。

2 source-map-explorer 功能参数

Analyze and debug space usage through source maps.
Usage:
source-map-explorer script.js [script.js.map] [--json [result.json] | --html [result.html] | --tsv [result.csv]] [-m | --only-mapped] [--exclude-source-map] [--no-bor der-checks] [--gzip] [--sort] [--replace=BEFORE_1 BEFORE_2 --with=AFTER_1 AFTER_2] [--no-root] [--coverage coverage.json] [--version] [--help | -h]
Output:
--json If filename specified save output as JSON to specified file otherwise output to stdout. [string]
--tsv If filename specified save output as TSV to specified file otherwise output to stdout. [string]
--html If filename specified save output as HTML to specified file otherwise output to stdout rather than opening a browser. [string]
Replace:
--replace Apply a simple find/replace on source file names. This can be used to fix some oddities with paths that appear in the source map generation process. Acce pts regular expressions. [array]
--with See --replace. [array]
Options:
--version Show version number [boolean]
--only-mapped, -m Exclude "unmapped" bytes from the output. This will result in total counts less than the file size [boolean]
--exclude-source-map Exclude source map comment size from output [boolean]
--no-root To simplify the visualization, source-map-explorer will remove any prefix shared by all sources. If you wish to disable this behavior, set --n o-root. [boolean]
--no-border-checks Disable invalid mapping column/line checks. [boolean]
--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 mod ules code was executed [string]
--gzip Calculate gzip size. It also sets onlyMapped flag [boolean]
--sort Sort filenames [boolean]
-h, --help Show help [boolean]
Examples:
source-map-explorer script.js script.js.map Explore bundle
source-map-explorer script.js Explore bundle with inline source map
source-map-explorer dist/js/*.* Explore all bundles inside dist/js folder
source-map-explorer script.js --tsv Explore and output result as TSV to stdout
source-map-explorer script.js --json result.json Explore and save result as JSON to the file

3 更多参考

  • https://www.npmjs.com/package/source-map-explorer
  • https://www.npmjs.com/package/webpack-bundle-analyzer

正文完
 0
任侠
版权声明:本站原创文章,由 任侠 于2020-04-29发表,共计2817字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码