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

Posted 2023-03-13

【中文标题】基于组件拆分 Angular 应用程序的主 JS 包

【英文标题】：Split main JS bundle of an angular app based on component

【发布时间】：2019-04-29 07:48:48

【问题描述】：

我开发了一个angular 4 web应用程序，它有3个组件，都是独立的组件。

LoginPage
FormPage
Dashboard

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

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

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

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

【参考方案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