Angular ng build 输出中 Initial chunk files 名称的来源

在 ng build 的输出表格中，Initial chunk files 这一列显示的内容主要是 JavaScript 文件的名称，而这些名称是 Angular 经过构建、打包和优化之后生成的结果。这些文件的来源可以追溯到 Angular 如何组织项目、如何通过 Webpack 来进行打包、如何对代码进行拆分等多个步骤。

一些例子：

上面看到的 JavaScript 文件名称，很多都来自 feature-libs 文件夹里的模块：

Angular 构建流程概述

为了理解这些文件的名称从哪里来，首先需要了解 Angular 的构建过程。Angular 使用 Webpack 作为底层的打包工具，而 ng build 命令实际上是调用 Angular CLI，它的底层利用 Webpack 来将应用程序代码转换为可以在浏览器中运行的 JavaScript 文件。

构建过程的大体流程可以总结为以下几个步骤：

1. 模块化组织代码：Angular 应用程序是由多个模块（Module）组成的，每个模块又包含了一系列的组件（Component）、服务（Service）、管道（Pipe）等。每个模块代表了应用的一部分功能。Angular 根据这些模块划分出不同的逻辑层次。

2. Webpack 代码打包：Webpack 在构建过程中会扫描应用程序的所有模块、组件等，并将它们按照依赖关系打包到多个 JavaScript 文件中。这些 JavaScript 文件也就是最终 Initial chunk files 列中显示的那些文件。Webpack 在这个过程中会根据应用程序的代码结构来生成不同的 chunk，即代码块，并根据其角色为它们命名。

3. 代码拆分与优化：Webpack 在生成代码块时，会将代码分为不同的部分。例如，包含应用程序逻辑的代码块，包含第三方库的代码块，包含一些运行时依赖的代码块等等。这种拆分方式不仅提高了代码的复用性和模块化程度，还能利用浏览器的缓存机制提高页面加载速度。

Initial Chunk files 的来源解析

Initial chunk files 是由 Webpack 在打包过程中根据代码的依赖关系生成的。它包含了应用程序运行所需要加载的那些 JavaScript 文件，每个文件对应一个代码块。为了帮助理解，这里详细说明几个常见的 chunk 文件的生成过程和其背后的逻辑。

1. main.js 文件的来源

main.js 文件是一个非常重要的代码块，通常包含应用程序的核心逻辑。这些逻辑代码包括：组件的声明、服务的实例化、模块的组织等等。main.js 是整个应用的入口文件，也是用户在访问页面时首先要加载的部分。

例如，假设你有一个简单的 Angular 项目，包含一个 AppModule，里面有一个主组件 AppComponent。当你运行 ng build 命令时，Webpack 会将 AppComponent 的代码以及与其相关的其他逻辑打包到 main.js 文件中。这个文件的体积通常较大，因为它包含了应用程序的主要功能逻辑。为了直观理解，可以想象 main.js 就好像一本书的主体内容，它承载了你想向用户展示的所有故事情节。

在现实世界中，比如你在开发一个简单的 To-Do 应用程序，这个应用程序有几个组件：任务列表、任务添加、任务删除等。当运行 ng build 后，这些功能相关的代码都会被打包到 main.js 中。因此，main.js 的体积和内容会随着你的应用逻辑变得越来越复杂而增加。

2. polyfills.js 文件的来源

polyfills.js 文件包含了一些跨浏览器的兼容性代码。由于不同的浏览器对于 JavaScript 特性的支持情况不同，Angular 使用了一些垫片（polyfills）代码，以确保你的应用程序能够在各种主流浏览器上正常运行。

例如，在某些旧版浏览器中，Promise 或 fetch 这样的新特性可能不被支持。为了让这些特性在所有浏览器上都能正常工作，polyfills.js 文件会包含对应的代码实现，以确保应用的兼容性。可以把 polyfills.js 想象成在做跨文化交流时的翻译者：当某些浏览器不理解你的应用“说”的新 JavaScript 语言时，polyfills.js 会充当翻译的角色，帮助浏览器理解并正确执行这些代码。

现实中的案例可以是一些企业内部需要兼容旧版的 Internet Explorer 浏览器的管理系统。为了确保这些系统能在不支持现代 JavaScript 特性的浏览器上正常工作，polyfills.js 会成为非常关键的部分。

3. runtime.js 文件的来源

runtime.js 是由 Webpack 生成的一个小型代码块，主要包含 Webpack 的运行时代码。这个文件的作用是帮助加载其他的代码块并管理模块的依赖关系。它负责在应用运行时找到并加载正确的模块，是确保应用程序正常启动的基础。

可以把 runtime.js 想象为应用程序的调度员。这个调度员的任务是确保所有的“演员”（其他代码块）在对的时间、以对的顺序出现在舞台上，从而确保整个表演（应用程序）顺利进行。

在复杂的应用程序中，比如一个电商平台，runtime.js 会起到管理代码块的作用，确保页面在加载的时候只加载需要的部分，其他部分在用户交互后再按需加载。

4. vendor.js 文件的来源

vendor.js 文件通常包含所有第三方库的代码，这些库可能包括 Angular 核心模块、RxJS、Zone.js 等。将这些代码从主应用程序中分离出来的好处是，它们相对比较稳定，不会频繁更改，这样浏览器就可以对它们进行缓存，以提高应用的加载速度。

例如，你在开发一个 Angular 应用，并在项目中使用了大量的第三方库来实现不同的功能，比如图表库、动画库等。这些库的代码会被 Webpack 收集到 vendor.js 中，因为它们相对独立且不常更新。可以把 vendor.js 想象成一个工具箱，里面包含了你的应用运行所需要的各种工具。由于这些工具（代码）本身不会经常变化，所以可以很好地利用浏览器的缓存，从而减少重复加载的时间。

这些文件名称的生成规则

这些 JavaScript 文件的名称是从 Angular 项目结构、Webpack 的配置以及项目中的模块划分等因素中推断出来的。在构建过程中，Webpack 根据以下几个方面生成代码块和相应的文件名称：

• 模块的逻辑划分：Angular 项目是基于模块化设计的，每个模块代表应用中的一个功能部分，例如 AppModule 是主模块，而其他子模块如 SharedModule、AuthModule 等则负责不同的功能。

• 代码块的角色：Webpack 会根据代码块在应用中的角色，为它们分配相应的名称，例如 main 代表主应用逻辑，vendor 代表第三方依赖等。

• 输出配置：Webpack 通过其配置文件中的 output 部分来定义打包后的文件名格式，通常会使用一些占位符来动态生成文件名。例如 [name].js 这样的配置可以让文件名自动根据代码块的名称命名。

真实案例：电商应用中的文件划分

为了让这一切更加具体和直观，我们来看看一个实际的案例。假设你正在开发一个电商应用，这个应用有如下功能模块：

• 商品展示模块：负责展示商品信息。
• 购物车模块：允许用户将商品添加到购物车。
• 用户认证模块：负责用户的注册和登录功能。
• 支付模块：完成订单的支付流程。

在开发过程中，你将每个功能模块都划分为不同的 Angular 模块，例如 ProductModule、CartModule、AuthModule、PaymentModule 等。在这些模块中，每个模块都有自己的组件和服务。例如，ProductModule 可能有一个组件 ProductListComponent，用于展示商品列表，而 CartModule 中有一个 CartComponent，用于展示购物车内容。

当你运行 ng build 来构建这个项目时，Webpack 会扫描所有模块的依赖关系，并将它们打包为多个 JavaScript 文件。最终的 Initial chunk files 可能会包括以下内容：

1. main.js：这个文件中包含了应用程序的主要逻辑代码，比如 AppModule 和其他核心模块的代码。在电商应用中，它可能包含了加载应用时最先显示的商品列表和页面布局等。

2. vendor.js：vendor.js 中包含了所有的第三方库，例如 Angular 本身、RxJS、用于动画效果的库等等。因为这些库的代码相对稳定，所以它们被分离到一个独立的文件中，以便可以利用缓存来加快加载速度。

3. polyfills.js：为了确保应用程序可以在不同的浏览器上正常工作，polyfills.js 中包含了一些跨浏览器兼容的代码。比如在某些浏览器中无法原生支持的 JavaScript 特性会通过垫片代码实现兼容。

4. runtime.js：runtime.js 负责加载和管理这些不同的代码块，以确保整个应用程序在加载时能够正确地按照依赖顺序运行。在电商应用中，runtime.js 就像是一个调度员，确保当用户点击某个商品时，商品详情模块能够及时加载。

5. 其他按需加载的模块：如果你为支付模块配置了懒加载，那么 PaymentModule 及其相关的代码会被单独打包成一个文件，例如 payment-module.js。当用户进入支付页面时，这个文件才会被加载，从而减少初始加载的体积，提升首页加载速度。

通过将这些模块按需加载并分离为不同的代码块，Angular 既能确保代码的模块化管理，又能显著提升应用的性能和用户体验。

小结

Initial chunk files 这一列中显示的 JavaScript 文件名称是从 Angular 项目的模块组织和 Webpack 的打包过程生成的。Webpack 在构建过程中将应用程序的不同部分拆分为多个代码块，以便于模块化管理和按需加载。这些文件的名称通常反映了它们在应用中的角色，例如 main.js 代表主逻辑代码，vendor.js 代表第三方库，polyfills.js 代表跨浏览器兼容代码，runtime.js 负责模块的加载和调度。