角度 2 延迟加载技术

Angular 2 lazy loading techniques

本文关键字：技术 延迟加载 角度      更新时间：2023-09-26

我已经用 Angular 1 编写了一个大应用程序，并且需要 AMD 的 JS 来延迟加载和结构化。应用程序不使用路由，但应用程序的某些部分，如HTML，css和Javascript(角度模块(是延迟加载的。

现在我想更改为 Angular 2，我正在寻找适用于 HTML、css 和 JS(角度(内容的最佳延迟加载技术，它不依赖于路由，也不依赖于数千种不同的 JavaScript 框架。

因此，延迟加载路由组件似乎非常简单：http://blog.mgechev.com/2015/09/30/lazy-loading-components-routes-services-router-angular-2

但是，如果没有路由，您将如何实现这种情况？你会推荐像 webpack 这样的东西，还是我应该保留 requireJS？有没有像角度 2 的 OClazyload 这样的东西？或者即使没有任何框架，它也能以某种方式与 Angular 2 一起工作？

我是"保持简单"的朋友，我真的很想让它尽可能小而简单。

谢谢！

Angular 2 基于 Web 组件。最简单的方法(如您所说"保持简单"(是使用路由和组件。您也可以简单地使用 html 中的指令来加载组件。例如：

@Component({
  selector: 'my-component', // directive name
  templateUrl: './app/my.component.html',
  directives: []
})
export class MyComponent {}

@Component({
  selector: 'root-component', // directive name
  directives: [MyComponent],
  template: '<my-component></my-component>',
})
export class myComponent {}

如果修改模板以动态包含<my-component>，它将动态加载组件。这不是最佳做法。

Angular 2 有一个动态组件加载器，但这并不像使用路由或指令那么简单。 它将创建一个组件的实例，并将其附加到位于另一个组件实例的组件视图中的视图容器。

有了它，您可以使用：

@Component({
  selector: 'child-component',
  template: 'Child'
})
class ChildComponent {
}
@Component({
  selector: 'my-app',
  template: 'Parent (<child id="child"></child>)'
})
class MyApp {
  constructor(dcl: DynamicComponentLoader, injector: Injector) {
    dcl.loadAsRoot(ChildComponent, '#child', injector);
  }
}
bootstrap(MyApp);

生成的 DOM：

<my-app>
  Parent (
    <child id="child">Child</child>
  )
</my-app>

还有另一个选项(查看上面的 angular2 链接(，您可以在其中选择提供提供程序来配置为此组件实例预配的注入器。

希望这有帮助。

对于 angular 2 最新版本，我们可以使用 loadchild 属性来执行延迟加载。例如： { 路径："客户"， loadChildren： './customer.module#Customer2Module？chunkName=Customer' },

在上面的示例中，我正在使用 webpack 捆绑(角度 2 路由器加载器(+ Anguar 2 路由来延迟加载模块。

> https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.582uw0wac

假设我们的应用程序中有两个页面，"主页"和"关于"。有些人可能永远无法访问关于页面，因此仅将关于页面的负载提供给实际需要它的人是有意义的。这就是我们将使用延迟加载的地方。

相关文章：