perf(routing): lazy-load AdminLayoutComponent shell
Some checks failed
Architecture Governance / architecture (push) Has been cancelled

Phase 3 (Performance). Bundle-stats analysis (esbuild metafile) found
AdminLayoutComponent statically imported and used as component: in
app.routes.ts, the only route in the file not using loadComponent -
pulled the whole backoffice shell into the initial bundle even for
storefront-only visitors, even though every child route under it was
already lazy.

Fixed: component: AdminLayoutComponent -> loadComponent(). Verified
live at /backoffice/dashboard - admin-layout-component now its own
21.86kB lazy chunk, no console errors, dashboard renders correctly.
Initial bundle over-budget shrank from 438.68kB to 417.53kB.

Investigated and deliberately left as-is (not bugs, documented/
legitimate):
- src/app/i18n/ru.ts (272kB) eagerly bundled - explicit, commented
  tradeoff in translate.service.ts (ru is platform default language,
  avoids extra round-trip for majority of users; en/hy already
  code-split). Changing this trades bundle size for default-language
  UX regression - a product call, not a cleanup item.
- @lucide/angular (182kB) - verified tree-shaking works correctly
  (1750 icons in the package, ~85 actually imported by name in
  icon-registry.ts, sideEffects:false). Cost is genuine icon usage,
  not dead weight. A further win exists (splitting the icon registry
  into storefront-critical vs admin-only sets so backoffice-only
  icons don't ride the eager header/footer import chain) but touches
  every icon consumer across the app - flagging as a scoped follow-up
  rather than attempting blind in this pass.

Remaining bundle-budget warning after this fix: 1.12MB vs 700kB
budget. Given ~350kB is unavoidable Angular framework/router/zone.js
floor, +272kB deliberate ru.ts, +182kB legitimate icon usage, the
700kB budget itself looks stale/unrealistic for this app's actual
floor - flagging for a business decision on raising it rather than
chasing further cuts.

tsc --noEmit clean, ng build clean (warning only, no errors), live
browser-verified.
This commit is contained in:
sdarbinyan
2026-07-26 15:45:51 +04:00
parent 6cd61fc873
commit 38e58bf402

View File

@@ -5,7 +5,6 @@ import { adminAuthGuard } from './core/admin-auth/admin-auth.guard';
import { authRoutes } from './core/auth/auth.routes';
import { adminCategoryDirtyGuard } from './features/admin/categories/guards/admin-category-dirty.guard';
import { adminProductDirtyGuard } from './features/admin/products/guards/admin-product-dirty.guard';
import { AdminLayoutComponent } from './features/admin/shell/admin-layout.component';
import { environment } from '../environments/environment';
// Core routes (same across all brands)
@@ -59,7 +58,7 @@ const coreRoutes: Routes = [
{
path: 'backoffice',
canActivate: [adminAuthGuard],
component: AdminLayoutComponent,
loadComponent: () => import('./features/admin/shell/admin-layout.component').then(m => m.AdminLayoutComponent),
children: [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{