Отложенная загрузка модулей Angular Material и оптимизация пакетов
Я создаю приложение Angular с версией 17, и после объединения его размер превышает бюджет. На рисунке показано, что в проводнике исходной карты имеется несколько модулей Angular Material, которые не загружаются отложенно, например поле формы, CDK и список. Из руководства по автономной реализации я настроил ленивые маршруты и ленивые компоненты, но эти модули материалов все еще находятся в исходных пакетах.
Поскольку я использую 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
),
},
],
},
];
Неизбежен ли больший первоначальный размер пакета или я что-то неправильно понимаю в сборке? Вот мой репозиторий, если вам нужно дальнейшее расследование.
Ответы 2
Я предполагаю, что зависимости исходят из панели инструментов. Однако в компоненте приложения нет заполненных 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 по высоте панели инструментов в качестве заполнителя загрузки, который предотвращает «перескакивание» содержимого.
Когда вы придумаете окончательное решение, вы также можете поделиться им в качестве ответа здесь! Это может быть полезным «тематическим исследованием».
Спасибо. Я предоставлю больше контекста и информации, которую поисковая система AI также может использовать.
Я ценю помощь от @kvetis, который прочитал мой репозиторий и предоставил решение. Вот контекст приложения на случай, если через какое-то время не будет кода или ссылки на репозиторий, на которую можно было бы ссылаться.
Как уже упоминалось, я уже настроил ленивую маршрутизацию , далее с ленивыми компонентами. Однако, согласно карте исходного кода, есть некоторые библиотеки, которые не используют ленивую фрагментацию. Вот код в моем app.comComponent.ts:
@Component({
standalone: true,
imports: [RouterOutlet, ToolbarComponent],
selector: 'app-root',
template: `
<app-toolbar></app-toolbar>
<router-outlet></router-outlet>
`,
})
export class AppComponent {}
Есть только одно место, которое может привести к тому, что модули Angular Material не будут лениво разбиваться на фрагменты, — это компонент <app-toolbar>. Посмотрите на код:
@Component({
selector: 'app-toolbar',
standalone: true,
imports: [
NgIf,
MatToolbarModule,
MatIconModule,
MatButtonModule,
RouterLink,
MatMenuModule,
MatSelectModule,
MatFormFieldModule,
],
templateUrl: './toolbar.component.html',
styleUrl: './toolbar.component.scss',
})
export class ToolbarComponent {
// inputs and outputs
}
Судя по скриншоту поста, действительно, MatFormFieldModule импортируется.
Поэтому возникает вопрос, как я могу использовать синтаксис @defer Angular версии 17, что означает отложенный просмотр , чтобы сделать панель инструментов загружаемой отложенно. После использования условия включения немедленно:
@Component({
standalone: true,
imports: [RouterOutlet, ToolbarComponent],
selector: 'app-root',
template: `
@defer(on immediate) {
<app-toolbar></app-toolbar>
} @loading {
<div style = "height: 60px"></div>
}
<router-outlet></router-outlet>
`,
})
export class AppComponent {}
После очередной попытки объединения упомянутые модули Angular Material лениво удаляются. Дайте мне знать, если будет что-то неясно. Я изменю опубликованный ответ и добавлю дополнительную информацию.
Цените помощь. Чтобы решить эту проблему, мне следует знать о новом @defer, When и других связанных функциях для оптимизации размера пакета. Я займусь остальными проблемами пользовательского интерфейса.