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

Question

从理论上讲，假设在您的角度应用程序中有X，Y，Z懒加载模块。

在某个时候，您决定所有这些模块都需要使用大小约为1MB的第三方模块。自然，您将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 块只加载一次，任何模块（客户或产品）第一次加载只触发一次该块。