Tree shaking и оптимизация бандлов

Tree shaking — механизм удаления неиспользуемого кода из финального бандла. В Angular он тесно связан с модулем сборки Angular CLI и инструментом Webpack.

Основы Tree shaking

  • ES Modules (import/export) являются критически важными для Tree shaking. Код, использующий CommonJS (require/module.exports), не будет корректно очищаться.
  • Динамический импорт (import()) позволяет ленивую загрузку модулей, что уменьшает размер начального бандла и ускоряет загрузку приложения.

Настройка оптимизации в Angular

  1. Production mode

    ng build --prod

    Включает:

    • Minification и uglification
    • Dead code elimination
    • Ahead-of-Time (AOT) компиляцию

  2. Lazy loading модулей Разделение приложения на лениво загружаемые модули снижает нагрузку на основной бандл:

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

  3. Использование providedIn: 'root' в сервисах уменьшает дублирование кода в нескольких модулях.

  4. Оптимизация зависимостей

    • Подключение только нужных операторов RxJS (import { map } from 'rxjs/operators')
    • Избегание глобальных библиотек, если достаточно частичных импортов

  5. Анализ бандла Команда source-map-explorer dist/main.js или webpack-bundle-analyzer позволяет определить, какие модули увеличивают размер бандла.

Дополнительные методы оптимизации

  • Preloading стратегий: ускоряет последующую загрузку модулей без увеличения первоначального времени загрузки.
  • Service Worker и PWA: кеширование статических ресурсов для уменьшения сетевой нагрузки.
  • Angular Compiler Options: fullTemplateTypeCheck и strictInjectionParameters помогают выявлять неиспользуемые переменные и сервисы на этапе компиляции.

Использование Tree shaking и правильной архитектуры ленивой загрузки существенно снижает размер бандлов и повышает производительность Angular-приложений.

Оглавление