使用 Angular CLI 和 Webpack 分析包尺寸

使用 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 .

Flag	--dev	--prod
--aot	false	true
--environment	dev	prod
--output-hashing	media	all
--sourcemaps	true	false
--extract-css	false	true
--named-chunks	true	false
--build-optimizer	false	true with AOT and Angular 5

--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