使用webpack将Angular模块拆分为更小的块

Question

我试图将一个巨大的角与许多组件分成块，我知道这个巨大的模块不应该存在，但在项目的这一点上，我不能触摸代码很多。

有谁知道如何让webpack拆分构建成更小的文件?

谢谢你。

Answer 1

将代码分割成异步加载的块是一回事，另一回事是加载并使用它们。您需要更改现有的代码(您可以从更小/更简单的组件开始)

目前在Angular中有两种实现方式:

1. 延迟加载功能模块

见:https://angular.io/guide/lazy-loading-ngmodules lazy-loading-feature-modules

2. 使用dynamic import加载组件

看到的例子:

@ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef
async ngOnInit() {
const { SomeComponent } = await import('./some.component')
this.footerRef.createComponent(SomeComponent)
}

模板:

<ng-container #container></ng-container>