webpack和angular2动态加载模块

Question

我有一个angular2应用程序结构，有4个子应用程序，需要一些普通的configurations.These子应用程序相互独立。我使用webpack进行动态加载和代码拆分。一旦从.ts文件中转换出来，每个子应用程序都会有自己的js文件。我想将js文件分别绑定到浏览器客户端加载子应用程序。

例如。

App-1 ===> app1.js

App-2 ===> app2.js

App-3 ===> app3.js

App-4 ===> app4.js

现在，如果浏览器客户端想要加载App-1，那么只有app1.js会捆绑并发送到客户端。，这将通过不加载不必要的js模块来提高应用程序的性能。

有没有办法用webpack来达到同样的目的呢？

提前谢谢。

Answer 1

只有模块才能以角度来延迟加载(按需)。因此，您必须在ore上捆绑更多的组件，这些组件应该按需加载(延迟加载)在模块中。

参见这里的示例模块：

import { NgModule, Component} from '@angular/core';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';

import { POIListeComponent }      from   './poiliste';


const routes: Routes = [
    { path: '', component: POIListeComponent }
]


@NgModule({
    imports: [CommonModule, Ng2BootstrapModule, RouterModule.forChild(routes)],
    declarations: [POIListeComponent]
})

export class myPOIListeModule { } 

要使它自动加载，您必须提供如下路由定义：

export const AppRoutes: Routes = [
      {
        path:       'poiliste',
        loadChildren: () => System.import('./modules/poiliste/poiliste.module').then(m => m.POIListeModule)
    }
];

仅此而已，至少在使用webpack的时候。在运行项目(构建)时，您可以看到webpack为每个延迟加载的模块生成的“块”。

Answer 2

您需要通过为每个AppModule在webpack配置中创建一个条目，将代码分成不同的包。然后，当使用loadChildren路由到它们时，您可以动态加载它们。

下面是如何创建一个新条目：How do I do code splitting with webpack on angular 2 app?

下面是如何动态加载模块：https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

希望这就是你的意思