webpack -- 性能分析工具-输出文件性能分析

2019-10-08  本文已影响0人  janezhang
1.最直接的分析方法就是去阅读 Webpack 输出的代码。
2.可视化的分析工具,以下教你如何使用。
1)输出stats.json

在启动 Webpack 时,支持两个参数,分别是:

在启动 Webpack 时带上以上两个参数,启动命令如下 webpack --profile --json > stats.json,你会发现项目中多出了一个 stats.json 文件。 这个 stats.json 文件是给可视化分析工具使用的。

webpack --profile --json 会输出字符串形式的 JSON,> stats.json 是 UNIX/Linux 系统中的管道命令、含义是把 webpack --profile --json 输出的内容通过管道输出到 stats.json 文件中。

2)分析工具1 Webpack Analyse (官方分析网站)

以下详细解释各个参数含义:
它分为了六大板块,分别是:

Modules:展示所有的模块,每个模块对应一个文件。并且还包含所有模块之间的依赖关系图、模块路径、模块ID、模块所属 Chunk、模块大小;
Chunks:展示所有的代码块,一个代码块中包含多个模块。并且还包含代码块的ID、名称、大小、每个代码块包含的模块数量,以及代码块之间的依赖关系图;
Assets:展示所有输出的文件资源,包括 .js、.css、图片等。并且还包括文件名称、大小、该文件来自哪个代码块;
Warnings:展示构建过程中出现的所有警告信息;
Errors:展示构建过程中出现的所有错误信息;
Hints:展示处理每个模块的过程中的耗时。

3)分析工具2 webpack-bundle-analyzer

webpack-bundle-analyzer 是另一个可视化分析工具, 它虽然没有官方那样有那么多功能,但比官方的要更加直观。
它能方便的让你知道:

接入 webpack-bundle-analyzer 的方法很简单,步骤如下:

  1. 安装 webpack-bundle-analyzer 到全局,执行命令 npm i -g webpack-bundle-analyzer;
  2. 按照上面提到的方法生成 stats.json 文件;
  3. 在项目根目录中执行 webpack-bundle-analyzer ./stats.json 后,浏览器会打开对应网页看到以上效果。

上图一个效果图如下:

image.png
上一篇 下一篇

猜你喜欢

热点阅读