Angular 2延迟加载技术

问题描述：

我已经为Angular 1编写了一个大应用程序，并且需要使用AMD来支持延迟加载和结构化。该应用程序不使用路线，但应用程序的一部分，如HTML，CSS和Javascript（角度模块）被延迟加载。Angular 2延迟加载技术

现在我想更改为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>

动态它将动态加载的组件。这不是最佳做法。

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

有了它，你可以使用：

@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链接），可以在其中选择提供供应商配置喷油器为此组件实例调配。

希望这会有所帮助。

答

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

让我们假设我们已经在我们的应用程序，“家”和“约”两页。有些人可能永远无法访问关于页面的信息，因此只将关于页面的负载用于实际需要的人是有意义的。这是我们将使用延迟加载的地方。

答

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

在我使用的WebPack捆绑此上述例子（角2路由器装载机）+ Anguar 2路由延迟加载模块。

Angular 2延迟加载技术

相关推荐