Как оптимизировать бандлы (bundle optimization)?angular-68

Оптимизация бандлов — ключевой этап подготовки Angular-приложения к продакшену. Вот комплексный подход, который я использую в проектах:

1. Анализ бандлов

Используйте инструменты для понимания текущего состояния:

npx source-map-explorer dist/app-name/main.*.js

или

npm install -g webpack-bundle-analyzer
webpack-bundle-analyzer dist/stats.json

Что ищем:

  • Крупные библиотеки (Moment.js, Lodash)
  • Дублирующиеся зависимости
  • Неиспользуемый код

2. Lazy Loading модулей

Самая значительная оптимизация — разделение кода:

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule)
  }
];

Эффект:

  • Загружаются только необходимые модули
  • Уменьшается initial bundle

3. Tree Shaking

Убедитесь, что в tsconfig.json:

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2015"
  }
}

Важно: Используйте ES-модули в сторонних библиотеках.

4. Оптимизация сторонних библиотек

a) Выборочный импорт

import cloneDeep from 'lodash/cloneDeep';
// Вместо: import { cloneDeep } from 'lodash';

b) Альтернативы тяжелым библиотекам

  • Moment.js → date-fns
  • Lodash → нативные методы или lodash-es

c) Оптимизация библиотек Angular

import { MatButtonModule } from '@angular/material/button';
// Вместо: import { MaterialModule } from '@angular/material';

5. Настройка production-билда

В angular.json:

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "namedChunks": false,
    "aot": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "500kb",
        "maximumError": "1mb"
      }
    ]
  }
}

6. Compression

Добавьте сжатие при билде:

npm install compression-webpack-plugin --save-dev

И настройте в angular.json:

"customWebpackConfig": {
  "path": "./extra-webpack.config.js"
}

7. Differential Loading

Angular CLI автоматически генерирует:

  • Современные бандлы (ES2015+) для новых браузеров
  • Легаси-бандлы (ES5) для старых

Проверьте в browserslist:

> 0.5%
last 2 versions
not dead
not IE 9-11

8. Preload Strategy

Комбинируйте lazy loading с предзагрузкой:

import { PreloadAllModules } from '@angular/router';

RouterModule.forRoot(routes, {
  preloadingStrategy: PreloadAllModules
})

Или кастомная стратегия:

@Injectable()
export class CustomPreloading implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.preload ? load() : of(null);
  }
}

9. Service Worker

Кеширование бандлов:

ng add @angular/pwa

Настройка в ngsw-config.json:

{
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": ["/*.bundle.css", "/*.bundle.js"]
      }
    }
  ]
}

10. Дополнительные техники

a) Ivy и локальные компиляции

В tsconfig.app.json:

{
  "angularCompilerOptions": {
    "enableIvy": true,
    "compilationMode": "partial"
  }
}

b) Web Workers для тяжелых вычислений

const worker = new Worker('./app.worker', { type: 'module' });
worker.postMessage(data);

c) Server-Side Rendering

ng add @nguniversal/express-engine

Резюмируем

  1. Анализируйте — понимайте что оптимизировать
  2. Дробите — lazy loading модулей
  3. Чистите — tree shaking, side-effect-free библиотеки
  4. Настраивайте — production-флаги в angular.json
  5. Сжимайте — Gzip/Brotli compression
  6. Кешируйте — Service Workers
  7. Мониторьте — budgets в angular.json

Оптимизация — итерационный процесс. Начинайте с самых эффективных методов (Lazy Loading, анализ бандлов), затем переходите к более тонким настройкам. Для enterprise-приложений комбинируйте все подходы.

Вопросы

Собеседования