关于 Angular ng build 的输出

当你使用 Angular 的命令行工具（Angular CLI）执行 ng build 命令时，输出结果中会展示一个表格，三列分别为 Initial chunk files、Raw size 和 Names。每个列都有其独特的含义。

1. Initial chunk files

Initial chunk files 这一列用于显示打包后生成的 JavaScript 文件或者其他静态资源文件的名称和文件类型。打包时，Angular 会对项目的代码进行模块化处理，并将其打包为多个不同的文件，这些文件就叫做 chunk，即代码块。

Angular 使用 Webpack 作为构建工具，Webpack 的一个主要功能就是把你的应用程序打包为多个小的 chunk，然后这些 chunk 可以通过懒加载或者其他方式加载到浏览器中。Angular 在构建过程中会生成这些代码块，以加快应用的加载速度，提升应用性能。

在 Initial chunk files 这一列中，最常见的是以下几种类型的文件：

• .js 文件：这些是 JavaScript 文件，它们包含了应用程序的主要逻辑代码。
• .css 文件：包含应用程序的样式代码。
• .json 文件：如果项目中存在配置文件或者静态资源，也可能会看到一些 .json 文件。

常见的行项目包括：

• main.js：包含应用程序的主要逻辑。这是核心的代码部分。
• polyfills.js：包含用于跨浏览器兼容性的代码，使应用在不同浏览器上表现一致。
• runtime.js：包含 Webpack 的运行时代码，用于加载其他代码块并确保模块的依赖性得以管理。
• vendor.js：通常是所有第三方依赖的代码，比如 Angular、RxJS 等库的代码。

例如，main.js 作为一个 Initial chunk file，表示打包生成的主要 JavaScript 文件，这个文件包含了项目的大部分业务逻辑代码。

2. Raw size

Raw size 这一列展示的是每个生成文件的原始大小。在构建过程中，Angular 会对项目中的代码进行打包、压缩和优化，以减小体积提升加载速度。Raw size 就是未经过压缩和优化的原始代码的大小。

对于开发人员来说，Raw size 是一个非常重要的指标，它可以帮助你了解项目的文件体积和代码量。当文件体积太大时，可能意味着应用在客户端的加载速度会变慢，因此这列数据可以帮助开发者识别那些可能需要进行进一步优化的部分。

例如，表格中的一项显示：

• main.js 文件，Raw size 为 7.44MB。

这里的 7.44MB 表示 main.js 的原始体积大小为 7.44 兆字节。在实际生产环境中，文件体积越小，应用的启动速度就会越快，因此开发者通常会使用一些技术来减小体积，例如代码拆分、延迟加载、去除无用代码等等。

3. Names

Names 这一列表示每个生成文件的名称，这个名称通常是为了帮助开发者识别每个文件的角色和用途。

在项目的构建过程中，Angular 会对代码进行拆分，生成多个代码块，Names 这一列就标识了每个代码块的类型或者作用。例如：

• main：表示这个代码块是应用的主要入口代码。
• vendor：表示这个代码块包含了第三方库的代码。
• polyfills：表示这个代码块包含了用来弥补不同浏览器之间特性差异的代码。
• runtime：表示包含 Webpack 运行时的代码，用于加载和执行其他模块。

如果我们继续分析刚才的例子，看到表格中的内容为：

• main.js，7.44MB，main。

这个项目条目的意思是，main.js 是应用程序的主文件，包含应用的主要逻辑代码，原始体积大小为 7.44MB。

深入剖析示例：Angular 打包过程中的代码拆分

Angular 在构建应用时会使用 Webpack 作为打包工具，而 Webpack 的一大特点是代码拆分。代码拆分可以让应用程序的 JavaScript 文件按需加载，从而提高页面的首屏渲染速度。让我们来看一看典型的构建输出中的几个文件：

• main.js：这个文件包含应用程序的核心逻辑，包括业务逻辑、组件代码、服务等。这个文件是用户打开应用程序时首先需要加载的。
• polyfills.js：这个文件包含了一些用于浏览器兼容的代码。不同的浏览器对于一些新特性的支持程度不同，Angular 会在构建时自动引入这些垫片（polyfills）来确保代码在所有浏览器上都能正常运行。
• runtime.js：这是一个非常小的文件，它包含了 Webpack 的运行时逻辑，用于加载和执行其他的代码块。runtime.js 的大小一般都比较小，通常只有几 KB，但它是应用正常运行所必不可少的。
• vendor.js：vendor.js 里面包含的是第三方库的代码，像 Angular、RxJS、Zone.js 等。这些库的代码相对比较稳定，不会经常变动，因此把它们独立出来可以更好地利用浏览器的缓存机制，从而提高用户体验。

关于文件体积：如何优化 Raw size

在看到 Raw size 这一列中的数据后，开发者的目标通常是尽可能减少这些文件的大小，尤其是在生产环境中。为了实现这个目标，可以采用以下几种策略：

• 懒加载（Lazy Loading）：将不需要立即加载的模块推迟到用户实际访问到相关功能时再加载。这可以显著减少初始加载的体积。

• AOT 编译（Ahead-Of-Time Compilation）：Angular 支持两种编译模式，JIT（Just-In-Time）和 AOT（Ahead-Of-Time）。使用 AOT 编译可以将模板编译的工作提前到构建阶段，从而减少最终生成的 JavaScript 文件的体积，并加快应用启动的速度。

• Tree Shaking：Tree Shaking 是一种移除项目中未使用代码的技术。在构建时，Webpack 会分析代码的引用情况，并剔除掉没有被使用的代码，以此来减小打包后的文件体积。

• 压缩（Minification）：压缩是指删除代码中所有不必要的字符，例如空格、换行、注释等，以减少代码体积。Webpack 会在生产模式下默认对代码进行压缩。

例如，假设在构建输出中，vendor.js 文件的 Raw size 为 4MB，但经过 Tree Shaking 和 Minification 后，最终生成的 vendor.js 文件可能会缩小到 1MB 以下，这就意味着用户在加载这个文件时可以节省大量的时间和流量。

进一步解读文件的角色和依赖关系

在 Angular 的构建输出中，每个生成的文件都有特定的角色和作用。通过 Initial chunk files、Raw size 和 Names 三列，我们可以逐渐了解到这些文件之间的依赖关系和相互作用。

例如：

• main.js 文件中可能包含对 vendor.js 的引用。这是因为应用程序的代码通常依赖于第三方库，这些库的代码会被打包到 vendor.js 中。通过将第三方库的代码分离出来，可以更好地进行缓存。如果 main.js 发生变化，但 vendor.js 没有变化，浏览器只需要重新加载更新后的 main.js，而可以直接使用缓存中的 vendor.js。

• runtime.js 是应用程序运行时所需的最基础的依赖。在应用启动时，runtime.js 负责加载其他的代码块，并处理模块的依赖关系。它的大小通常比较小，因为它只包含了 Webpack 的一些运行时逻辑。

通过对这些代码块的分析，开发者可以根据不同文件的角色来进行针对性的优化，以减少加载时间并提升用户体验。

总结：如何利用构建输出表格改进项目

通过分析 ng build 输出的这张表格，开发者可以了解到项目中的每个生成文件的大小、类型以及其具体作用，这对于优化项目的性能非常重要。以下是一些具体的优化思路：

• 如果 main.js 的体积过大，可能意味着你的业务逻辑代码有很多没有拆分出来的模块。这时候，可以通过使用懒加载或者优化模块划分，减少 main.js 的体积。

• 如果 vendor.js 的体积过大，说明项目中引用了很多第三方库，可能需要对这些库进行分析，看看是否有不必要的依赖，或者是否可以使用体积更小的替代库。

• Raw size 提供了一个未经过压缩的原始体积，如果原始体积很大，但经过压缩和优化后可以显著减小，那么这些压缩优化的手段就是有效的。如果 Raw size 经过压缩后仍然很大，则需要考虑其他进一步的优化手段，例如代码分片和按需加载。

在 Angular 项目中，性能优化是一项非常重要的任务，而 ng build 输出的表格提供了关于文件大小和构建信息的非常有用的提示。通过细致的分析这些数据，开发者可以做出更为有效的性能优化决策，以确保最终应用能够在各种网络和设备条件下为用户提供良好的体验。