导入的模块是否捆绑到 Angular 中的模块块文件中

Question

从理论上讲，想象一下在您的 Angular 应用程序中有 X、Y、Z 延迟加载模块。

在某些时候，您决定所有这些模块都需要使用大小约为 1MB 的 3rd 方模块。自然地，您将添加imports: [ ... OurHeavyModule]到所有 3 个模块中。

问题是 - 这会使 X、Y、Z 的块文件每个大整整 1MB 吗？或者也许打包器足够聪明，可以实际制作将被导入的额外块 - 但只有一次。

Answer 1

我做了一个快速测试，结果如下。

+-------------------------+----------------+
|       Source File       |  Bundle File   |
+-------------------------+----------------+
| App component (Eager)   | main.{hash}.js |
| Customers Module (Lazy) | 5.{hash}.js    |
| Products Module (Lazy)  | 6.{hash}.js    |
| Shared Module           | 1.{hash}.js    |
+-------------------------+----------------+

共享模块有一项包含xlsx 包( 1.3MB ) 的服务，将其导入客户和产品中仅生成一个附加块1.{hash}.js。

此外，在浏览器中，1.{hash}.js块仅加载一次，无论模块（客户或产品）首次加载，都只会触发该块一次。