使用 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

您需要通过在 webpack 配置中为每个 AppModule 创建一个条目，将您的代码拆分到不同的包中。然后你可以在使用 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

希望这就是你的意思

Answer 2

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

使用 webpack 和 angular2 动态加载模块

Dynamically Load Modules with webpack and angular2

javascript

angular

webpack

dynamic-loading

code-splitting