1

I have an angular2 app structure with 4 sub-apps that require some common configurations.These sub-apps are independent of each other. I am using webpack for dynamic loading and code splitting. Each sub-apps will have their own js files once they will be converted from .ts files. I want to bundle js files respective to the loading of sub-apps by the browser client.

E.g.
App-1 ===> app1.js

App-2 ===> app2.js

App-3 ===> app3.js

App-4 ===> app4.js

Now If browser client wants to load App-1 then only app1.js will bundled and sent to the client. This will improve app performance by not loading the unneccessary js modules.

Is there any way to acheive the same using webpack?

Thanks in advance.

4

2 回答 2

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 时是这样。当运行你的项目（构建）时，你可以看到 webpack 为每个延迟加载的模块生成的“块”。

于 2017-01-01T10:53:49.510 回答
0

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

以下是创建新条目的方法： 如何在 Angular 2 应用程序上使用 webpack 进行代码拆分？

以下是动态加载模块的方法： https ://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

希望这就是你的意思

于 2017-01-01T10:43:32.707 回答