perf(app): lazy-load i18n translation packs, drop dead items-carousel component

RC PERF-01 bundle audit follow-up on 61a5714.

- i18n: ru/en/hy translation packs (346 KB raw combined) were all
  statically imported in TranslateService and shipped in the initial
  bundle regardless of the visitor's language. Now only 'ru' (platform
  default) is bundled eagerly; 'en'/'hy' are dynamic import()s. The
  language route guard (languageGuard) awaits preloadLanguage() before
  activating the route, so translations are always fully loaded before
  any component renders - no flash of untranslated/fallback content.
- widget-host.service.ts: import UnknownWidgetComponent directly instead
  of via the widgets/ui barrel (index.ts re-exports 6 widgets).
- Deleted src/app/components/items-carousel/* - confirmed dead (zero
  references anywhere, verified via knip and grep), the only consumer
  of primeng/primeicons in the app. Removed the now-unused
  `@import 'primeicons/primeicons.css'` from styles.scss (no primeicons
  CSS classes used elsewhere). primeng/primeicons remain listed in
  package.json/package-lock.json - npm CLI in this environment is
  blocked by an unrelated, pre-existing broken `barry-cache` devDependency
  (ETARGET on `npm install`/`npm uninstall`), so the lockfile could not be
  safely regenerated. Flagged, not fixed.

Routes audit (app.routes.ts): all storefront/builder/backoffice feature
routes already use loadComponent/loadChildren; nothing eagerly imported.
No route changes needed.

Lucide icons (icon-registry.ts): already named/tree-shakeable imports
from @lucide/angular, not a full-library import. No change needed.

Before/after (npm run build, production):
- Initial bundle raw: 1.47 MB -> 1.12 MB (-350 KB / -24%)
- Initial bundle transfer (est.): 263.59 kB -> 221.51 kB (-42 kB / -16%)
- Budget overage: 769.22 kB over -> 416.84 kB over (still exceeds the
  700 KB budget; project-editor-page-component (320 kB),
  catalog-container-component (126 kB), product-details-container
  (88 kB), cart-component (61 kB) lazy chunks unchanged - no safe
  mechanical split identified within scope, see PERF-01 report for
  detail).

Verified: npx tsc --noEmit clean, npm run build green (warning only,
no errors).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-24 08:19:13 +04:00
parent 61a57142b0
commit 4bf0666fd1
7 changed files with 37 additions and 563 deletions

View File

@@ -1,22 +1,47 @@
import { Injectable, computed, inject } from '@angular/core';
import { Injectable, computed, inject, signal } from '@angular/core';
import { LanguageService } from '../services/language.service';
import { Translations } from './translations';
import { ru } from './ru';
import { en } from './en';
import { hy } from './hy';
const translationMap: Record<string, Translations> = { ru, en, hy };
// 'ru' is the platform default language, so it's the only translation pack
// bundled eagerly. 'en'/'hy' are code-split and fetched on demand via
// preloadLanguage() (invoked from languageGuard, which awaits it before
// route activation - components never observe a partially-loaded pack).
const translationLoaders: Record<string, () => Promise<Translations>> = {
en: () => import('./en').then(m => m.en),
hy: () => import('./hy').then(m => m.hy),
};
@Injectable({
providedIn: 'root',
})
export class TranslateService {
private langService = inject(LanguageService);
private readonly translationCache = signal<Record<string, Translations>>({ ru });
readonly translations = computed<Translations>(
() => translationMap[this.langService.currentLanguage()] ?? ru,
() => this.translationCache()[this.langService.currentLanguage()] ?? ru,
);
/**
* Ensures the given language's translation pack is loaded before it is
* activated. Resolves immediately for already-loaded packs (including
* the eagerly-bundled 'ru'); dynamically imports otherwise.
*/
async preloadLanguage(lang: string): Promise<void> {
if (this.translationCache()[lang]) {
return;
}
const loader = translationLoaders[lang];
if (!loader) {
return;
}
const pack = await loader();
this.translationCache.update(cache => ({ ...cache, [lang]: pack }));
}
/**
* Translate a dot-separated key with optional interpolation params.
* Usage: t('cart.phoneMoreDigits', { count: 3 }) → "Введите ещё 3 цифр"