Angular 2 延迟加载技术答案

【问题标题】：Angular 2 lazy loading techniquesAngular 2 延迟加载技术
【发布时间】：2016-05-23 13:18:42
【问题描述】：

我已经使用 Angular 1 编写了一个大型应用程序，并使用 AMD 编写了 requireJS，用于延迟加载和结构化。该应用程序不使用路由，但应用程序的某些部分，如 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？ angular 2 是否有类似 OLazyload 的东西？或者即使没有任何框架，它也能以某种方式与 Angular 2 一起工作？

我是“保持简单”的朋友，我真的希望它尽可能小而简单。

谢谢！

【问题讨论】：

标签： javascript html css angularjs lazy-loading

【解决方案1】：

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

在上面的示例中，我使用 webpack Bundling(angular 2 router loader) + Anguar 2 Routing 来延迟加载模块。

【讨论】：

【解决方案2】：

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

假设我们的应用程序中有两个页面，“home”和“about”。有些人可能永远无法到达 about 页面，因此仅将 about 页面的负载提供给真正需要它的人是有意义的。这是我们将使用延迟加载的地方。

【讨论】：

【解决方案3】：

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>，它将动态加载组件。这不是最佳做法。

角度 2 有一个 dynamic component loader，但这并不像使用路由或指令那么简单。它将创建一个组件的实例并将其附加到位于另一个组件实例的组件视图内的视图容器。

你可以使用它：

@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 链接），您可以选择提供提供程序来配置为此组件实例配置的注入器。

希望这会有所帮助。

【讨论】：