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

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 package 的服务( 1.3MB )，并将其导入到客户和产品中只会生成一个额外的块 1.{hash}.js .
同样在浏览器中 1.{hash}.js 块只加载一次，无论是哪个模块(客户或产品)第一次加载都会触发这个块一次。