使用 Angular CLI 和 Webpack 分析包尺寸

对于 Web app 来说，高性能总是最高优先级，对于 Angular 也不例外。但是随着应用复杂度的不断增长，我们如何才能知道哪些内容打包到了应用中呢？如何跟踪包的尺寸？我们不希望一次发送太多的 JavaScript ，以至于拖慢应用的速度。

过大尺寸的 JavaScript 包是丧失用户欢心的良药。不仅是拖慢了下载效率，而且要花费更多的时间在浏览器中分析然后执行。为了保持应用的速度，我们需要确保包尺寸足够小（250k 或更小），并在适当的时间加载。

在这篇文章中，我们将使用 Angular CLI 和一些简单的命令来获得我们发布产品的 Angular 应用包的详细报告。

Angular CLI

1. 首先，我们需要有一个应用作为分析对象。使用 Angular CLI 的 new 命令可以很简单地创建一个 Angular 应用。

ng new [应用名称] 

应用将被创建在应用名称的文件夹中。

查看 new 的详细信息

2. 然后，我们可以产品模式编译应用，我们使用 CLI 的命令进行编译。

这里涉及到两个主要参数 prod 和 stats-json

2.1 prod

产品模式编译使用参数 prod，下面是 dev 和 prod 的区别

使用 --dev/--target=development 和 --prod/--target=production 两者都影响元标志，如果没有指定，默认为 --dev .

--prod 还设置了下列的设置:

• 如果在 .angular-cli.json 中进行了配置，添加 service worker.

• 在模块中，使用 production 替换 process.env.NODE_ENV 的值。

• 对代码执行 UglifyJS .

2.2  --stats-json

该参数用于生成可以使用  webpack-bundle-analyzer 或者 https://webpack.github.io/analyse  分析包结构的 stats.json 文件。

2.3 实际执行的命令 

ng build --prod --stats-json

查看 build 的详细信息

Webpack bundle analyzer

States.json 是 Webpack 的一个特殊文件，webpack 是 Angular CLI 内部所使用的打包工具。使用 Webpack 帮我们生成的这个文件，我们可以使用各种不同的工具来理解我们的应用。

我们这里使用的工具是  Webpack bundle analyzer 。webpack 包分析器是一个 npm 包，可以在 webpack 的配置中或者命令行使用。对于我们来说，我们使用命令行工具。

为了使用这个工具，我们需要如下步骤：

1. 通过 npm 安装这个工具 

   npm install --save-dev webpack-bundle-analyzer

2. 为方便使用，安装之后，在 package.json 中的 scripts 部分，添加下面的行来创建自定义的 npm 命令 

   "bundle-report": "webpack-bundle-analyzer dist/stats.json"

3. 执行命令 

   npm run bundle-report

    

如果命令成功执行的话，你会看到打开了一个浏览器窗口，并看到类似如下的页面。

途中的每种颜色代表一个独立的包。在这个图中，可以看到我们有三个包，vendor 中包含所有的库代码，polyfill 包和 main 应用代码包。我们可以近一半查看未压缩和压缩之后的尺寸。这使得我们快速检查最大的包，并帮助我们决定何时使用 Lazy Loading 进一步拆分应用。

对于这个示例来说，可以看到应用的主要部分是 framework 部分，因为应用太简单了，在 main 中只有很少的组件。使用这个工具，我们可以看到虽然 Http 模块没有被使用，但是也被打包到应用中了。在移除这个未用到的模块之后，应用比以前变得更小更快了。

随着应用的成长，我们可以通过运行 npm run bundle-report 来仔细分析和检查依赖关系，以保持应用的尺寸和速度。

See also

• Analyzing bundle size with the Angular CLI and Webpack

• Webpack bundle analyzer

• https://webpack.github.io/analyse

• Angular CLI build

原文出处