我正在使用版本17构建Angular应用程序,Bundle 后,尺寸超出了预算.使用源 map 资源管理器,插图显示有多个Angular Metal模块没有闲置加载,例如form-field、CDK和list.从独立实现guidance开始,我已经配置了懒惰路由和懒惰组件,但这些Material模块仍然在初始Bundle 包中.

由于我使用NX,因此构建脚本为:

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

以下是生成源 map 的脚本:

"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
          ),
      },
    ],
  },
];

是否不可避免地会有更大的初始Bundle 包大小,或者我误解了构建中的某些内容?如果您需要进一步调查,这是我的repo.

source map explorer

推荐答案

我猜依赖关系来自工具栏.但在应用程序组件中没有填写Inputs,所以我不确定是否应该在应用程序组件中使用业务逻辑丰富工具栏.

如果是,那么我会考虑使用@deferwhen条件来推迟加载工具栏中存在的条件数据.

@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"
        >

即使在app-component中也可以考虑使用@defer:

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

这将在应用程序首次渲染时加载工具栏.我建议添加工具栏高度的透明/彩色分区作为加载占位符,以防止内容"跳转".

Angular相关问答推荐

如何制作angular.dev动画?

Firebase Firestore阻止angular应用程序变得稳定,从而阻止ssr中的水合作用

Angular :仅当 Select 第一个日期时才显示第二个日期字段

角material 17 -如何从Style.scss中的主题中获取原色

Rxjs重置执行后的可观察延迟并重新调度Angular

将输入传递到组合Angular指令

笔刷Angular 为17

将sass与@Use语句一起使用时出现Angular 新的VITE构建器编译错误

筛选器不会从文本输入触发更改事件

如何在Primeng中实现自定义排序

在Angular 17的本地服务应用程序时禁用SSR

使用 TAB 键时如何聚焦mat-select组件?

为什么 HttpParams 在 Angular 4.3 中的多行中不起作用

在组件级别加载 JS 脚本(不在启动时)

Error: Module not found: Error: Can't resolve '@angular/cdk/scrolling'

如何测试 Angular2 的 router.navigate?

如何以Angular 获取嵌套表单组的控件

为什么Angular 12 'ng serve' 构建应用程序的速度很慢?

如何使用 Angular 6 工作的 ngModel 创建自定义输入组件?

如何在 angular2 中的 div 的 contenteditable 上使用 [(ngModel)]?