Question

我有一个带有4个子应用程序的angular2应用程序结构，需要一些常见的配置。这些子应用程序是相互独立的。我正在使用webpack进行动态加载和代码分割。一旦从.ts文件转换它们，每个子应用程序将拥有自己的js文件。我想将js文件分别捆绑到浏览器客户端加载子应用程序。

E.g。
App-1 ===＆gt; app1.js

App-2 ===＆gt; app2.js

App-3 ===＆gt; app3.js

App-4 ===＆gt; app4.js

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

有没有办法使用webpack实现相同的目标？

提前致谢。

Answer 1

只有模块可以通过角度延迟加载（按需）。因此，您必须捆绑更多应在模块中按需加载（延迟加载）的组件。

请参见此示例模块：

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时。在运行你的项目（构建）时，你可以看到＆＃34; chunks＆＃34;然后由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

希望这就是你的意思

使用webpack和angular2动态加载模块

2 个答案: