前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular 工具篇之分析包的大小

Angular 工具篇之分析包的大小

作者头像
阿宝哥
发布2019-11-05 15:49:23
2.4K0
发布2019-11-05 15:49:23
举报
文章被收录于专栏:全栈修仙之路

本文将介绍如何使用 webpack-bundle-analyzersource-map-explorer 这两款工具来分析 Angular Bundle 的大小。下面我们将使用 Github 上的 angular6-example-app 这个项目来演示上述两个工具的使用案例,首先我们先来初始化 angular6-example-app 这个项目。

初始化 angular6-example-app

  1. 克隆 angular6-example-app
代码语言:javascript
复制
$ git clone https://github.com/Ismaestro/angular6-example-app.git
  1. 安装 angular6-example-app 依赖
代码语言:javascript
复制
$ npm install
  1. 启动开发服务器
代码语言:javascript
复制
$ npm start

完成 angular6-example-app 项目初始化之后,我们先来介绍 webpack-bundle-analyzer 这个工具。

webpack-bundle-analyzer

Webpack Bundle Analyzer 这个工具为我们提供了交互性的 treemap 来可视化显示 webpack 打包输出文件的大小。

因为 angular6-example-app 项目已经默认安装了 webpack-bundle-analyzer 这个库,所以我们不需要再次安装该库,对于其它的项目来说的话,你可以在项目目录下执行下面的命令来执行安装操作:

代码语言:javascript
复制
$ npm i webpack-bundle-analyzer --save-dev

接下来我们使用 Angular CLI 来构建项目,在构建的时候,需要添加相关参数,具体如下:

代码语言:javascript
复制
$ ng build --prod --stats-json

当项目构建完成后,在根目录下的 dist 文件夹下会生成一个 stats.json 文件,然后我们可以通过以下的命令来查看 webpack 打包文件大小信息:

代码语言:javascript
复制
$ ./node_modules/.bin/webpack-bundle-analyzer dist/stats.json

以上命令成功运行后,控制台会输出以下信息:

代码语言:javascript
复制
Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it

当访问 http://127.0.0.1:8888 这个地址时,你会看到以下内容:

webpack-bundle-analyzer
webpack-bundle-analyzer

建议感兴趣的同学,都自己动手实践一下。在 angular6-example-app 项目中,也为我们提供了相应的 npm script,具体如下:

代码语言:javascript
复制
"bundle-report": "ng build --prod --stats-json && webpack-bundle-analyzer dist/stats.json"

要运行该命令,只需在项目根目录下执行:

代码语言:javascript
复制
$ npm run bundle-report

source-map-explorer

source-map-explorer 是一个工具,它使用 bundle 生成的 source map 文件来分析 bundle 的组成及各部分的大小。与 webpack bundle analyzer 类似,它也提供了可视化的方案来查看分析的结果。

首先我们先来在当前项目中安装 source-map-explorer:

代码语言:javascript
复制
$ npm i source-map-explorer --save-dev

然后在重新进行项目构建:

代码语言:javascript
复制
$ ng build --prod --source-map

构建完成后,在根目录下的 dist 文件夹下会生成 main bundle 文件,这时我们可以在命令行执行下列命令来查看结果:

代码语言:javascript
复制
$ node_modules/.bin/source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js

成功执行上述命令后,在浏览器中你将会看到以下内容:

source-map-explorer
source-map-explorer

为了方便操作,我们也可以定义一个 npm script 任务来处理上述的工作:

代码语言:javascript
复制
"map-explorer": "ng build --prod --source-map && source-map-explorer 
   dist/main.d72e9d91fd17f9fe7b8c.js"

其实除了本文介绍的两个插件之外,还有其它的第三方工具,也提供了分析 bundle 包大小的功能,比如 webpack-visualizerWebpack Analyzer,有兴趣的同学也可以了解一下。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018/08/28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 初始化 angular6-example-app
  • webpack-bundle-analyzer
  • source-map-explorer
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档