Angular Lazyload路由会生成带有前缀default〜pages的额外块文件

Question

我正在尝试为当前正在处理的项目实现延迟加载路线。一切正常，没有任何错误，当我转到新页面时，我还可以看到新的块文件加载。

但是，除了我期望的块文件之外，cli还创建了一些带有前缀“ default〜pages”的额外文件，例如

default~pages-managers--managers-module~pages-hosts-hosts-module~pa~0e1f5bc0

，这些带有default~前缀的文件都会加载，无论我进入哪个页面。 例如，如果我在主页上，则同时看到这两者：

pages-home-home-module

和

default~pages-managers--managers-module~pages-hosts-hosts-module~pa~0e1f5bc0

有人知道这些默认文件是什么以及如何清除它们吗？

Answer 1

我无法比这个文章更好地解释：angular-code-splitting-or-how-to-share-components-between-lazy-modules

Answer 2

此评论是 w.r.t.角度版本 11.2.1...

这是一个默认功能（设置为 true），可以在 angular.json 文件中配置（Andre Elrico 已经回答了），但我看到保持这个默认值（即捆绑在网络上加载的大小和构建时间）。下面是一个演示：-

有一个共同的块：-

没有共同的块：-

结尾：我可以说 - 使用第二种方法，公共模块将与每个单独的延迟加载模块合并。如果这就是您要找的东西；然后调整 angular.json 文件中的设置。

请注意：构建时间取决于操作系统、硬件配置等。

Answer 3

希望这会有所帮助：

我遇到了与生成default~ ....的commonChunks相同的问题。

在您的angular.json（有"aot": true ...的地方等等）中使用：

"commonChunk": false

Answer 4

我不认为这是您应该担心的事情。当您在构建过程中的angular.json中有"optimization": false时，此行为是正常的。如果您要优化构建。通过以下嵌套"optimization": true在angular.json中添加projects->{your project name}-architect->build->configurations->production。在生产对象中，应添加"optimization": true，然后在运行ng build --configuration=production后将按预期运行。

我假设您只运行ng build或ng build --watch，默认情况下未启用优化程序，因此在这种情况下，如果要启用优化程序并摆脱默认块，则应添加到projects->{your project name}-architect->build。在构建对象中，添加"optimization": true。

注意：将其添加到手表的构建过程中而不是生产构建会大大降低构建速度，因此我建议您仅在产品构建中保持启用状态。