javascript - 基于组件拆分 Angular 应用程序的主 JS 包

Question

我开发了一个 Angular 4 Web 应用程序，它有 3 个组件并且都是独立的组件。

LoginPage
FormPage
Dashboard

LoginPage 和 FormPage 是小组件，但 Dashboard 是一个非常大的模块。

我的问题是我不想在登录页面上下载整个主包（1.5mb）（页面加载需要更多时间来下载整个内容）。我想在仪表板组件加载时下载仪表板组件相关的 JS 文件块。

我正在使用 ng-build --prod 进行生产构建

是否可以根据组件拆分主包js？我也可以在供应商 JS 中进行同样的拆分吗？

Answer 1

您可以使用 Angular 路由器 loadChildren 来延迟加载模块。根据用户访问 URL，按需加载其对应的模块。

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

const app_routes: Routes = [
  {
    path: 'login',
    loadChildren: 'app/login/login.module#LoginModule'
  },
  {
    path: 'dashboard',
    loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
  },
  { path: '', pathMatch: 'full', redirectTo: '/login' },
  { path: '**', pathMatch: 'full', redirectTo: '/login' }
];

@NgModule({
  imports: [RouterModule.forRoot(app_routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}