延迟加载 Angular Material 模块和捆绑优化

Question

我正在使用版本 17 构建 Angular 应用程序，捆绑后，大小超出了预算。在源地图浏览器中，插图显示有多个 Angular Material 模块未延迟加载，例如表单字段、CDK 和列表。从独立实现guidance，我已经配置了惰性路由和惰性组件，但这些 Material 模块仍然在初始包中。

由于我使用的是 Nx，因此构建脚本是：

"build-ng-frontend": "nx build ng-frontend --configuration production --optimization --base-href ./",

这是源地图生成的脚本：

"bundle-ng-frontend-report": "nx build ng-frontend --configuration production --source-map && source-map-explorer dist/apps/ng-frontend/browser/*.js",

这是一个例子，

// app routes
export const APP_ROUTES: Route[] = [
  {
    path: 'topics',
    loadChildren: () =>
      import('./modules/help-center/routes').then((m) => m.HELP_CENTER_ROUTES),
  },
  {
    path: 'projects/:projectSlug',
    loadChildren: () =>
      import('./modules/project/routes').then((m) => m.PROJECT_ROUTES),
  },
  {
    path: '',
    loadChildren: () =>
      import('./modules/entry/routes').then((m) => m.ENTRY_ROUTES),
  },
];

// help center routes
export const HELP_CENTER_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./views/help-center-view.component').then(
        (m) => m.HelpCenterViewComponent
      ),
    children: [
      {
        path: ':name',
        loadComponent: () =>
          import('./components/main-content/main-content.component').then(
            (m) => m.MainContentComponent
          ),
      },
    ],
  },
];

初始包大小是否不可避免，或者我误解了构建中的某些内容？如果您需要进一步调查，这是我的repo。

Answer 1

我猜依赖项来自工具栏。在应用程序组件中，没有填写

Inputs

，所以我不确定应用程序组件中是否应该使用业务逻辑丰富的工具栏。

如果是，那么我会考虑使用

@defer

和

when

条件来推迟加载工具栏中存在的条件数据。

@defer (when this.snav && this.settings && this.projects)
 // the if condition needs to be present only if
 // the `when` condition could became falsy again.
 @if (this.snav && this.settings && this.projects) {
        <mat-form-field
          appearance="outline"
          style="margin-left: 1rem; margin-top: 20px"
        >

即使在

@defer

中也可以考虑使用

app-component

：

@defer(on immediate) {
  <app-toolbar></app-toolbar>
} @loading {
  <div style="height: 60px (match toolbar hegiht)"></div>
}

这将在应用程序首次呈现时加载工具栏。我建议添加一个工具栏高度的透明/彩色 div 作为加载占位符，以防止内容“跳转”。