javascript - 使用 webpack 和 angular2 动态加载模块

Question

我有一个 angular2 应用程序结构，其中有 4 个子应用程序，需要一些通用配置。这些子应用程序彼此独立。我正在使用 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

只有模块可以通过 Angular 进行延迟加载(按需)。因此，您必须捆绑更多组件，这些组件应按需加载(延迟加载)到模块中。

请参阅此处的示例模块:

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 为每个延迟加载的模块生成的“ block ”。