Сборка Angular-приложений

Angular CLI-приложение или библиотеку можно собрать командой ng build. Она скомпилирует TypeScript-код в JavaScript, а также оптимизирует, объединит в бандл и минифицирует вывод по необходимости.

ng build выполняет только builder для цели build в проекте по умолчанию, как указано в angular.json. Angular CLI включает четыре builders, обычно используемые как цели build:

Приложения, сгенерированные ng new, по умолчанию используют @angular/build:application. Библиотеки, сгенерированные ng generate library, по умолчанию используют @angular/build:ng-packagr.

Какой builder используется для конкретного проекта, можно определить, посмотрев цель build для этого проекта.

{
  "projects": {
    "my-app": {
      "architect": {
        // `ng build` invokes the Architect target named `build`.
        "build": {
          "builder": "@angular/build:application",
          …
        },
        "serve": { … }
        "test": { … }
        …
      }
    }
  }
}

На этой странице обсуждаются использование и опции @angular/build:application.

Выходной каталог

Результат этого процесса сборки выводится в каталог (dist/${PROJECT_NAME} по умолчанию).

Настройка size budgets

По мере роста функциональности приложений растёт и их размер. CLI позволяет задать пороговые значения размера в конфигурации, чтобы части приложения оставались в определённых вами границах размера.

Определите границы размера в файле конфигурации CLI angular.json в секции budgets для каждого настроенного окружения.

{
  …
  "configurations": {
    "production": {
      …
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "250kb",
          "maximumError": "500kb"
        },
      ]
    }
  }
}

Можно указать size budgets для всего приложения и для отдельных частей. Каждая запись budget настраивает budget данного типа. Например, budget initial измеряет JavaScript и CSS, используемые для bootstrap приложения, что соответствует значению Initial Total в сводке вывода сборки. Значения размера указываются в следующих форматах:

При настройке budget builder предупреждает или сообщает об ошибке, когда данная часть приложения достигает или превышает заданную вами граничную величину.

Каждая запись budget — это JSON-объект со следующими свойствами:

Чтобы настроить budget для лениво загружаемого бандла, используйте type: "bundle" и задайте name равным имени этого бандла.

{
  "budgets": [
    {
      "type": "bundle",
      "name": "admin",
      "maximumWarning": "250kb",
      "maximumError": "300kb"
    }
  ]
}

Поле name соответствует имени бандла, а не выданному имени файла, поэтому оно не использует шаблоны wildcard или регулярные выражения вроде admin.*.js.

Следующий пример показывает budget, использующий baseline:

{
  "type": "bundle",
  "name": "main",
  "baseline": "200kb",
  "maximumWarning": "10%",
  "maximumError": "20%"
}

В этом примере builder предупреждает, когда бандл вырастает сверх 220kb, и выдаёт ошибку, когда он вырастает сверх 240kb.

Настройка зависимостей CommonJS

Всегда предпочитайте нативные ECMAScript modules (ESM) во всём приложении и его зависимостях. ESM — полностью специфицированный веб-стандарт и возможность языка JavaScript с сильной поддержкой статического анализа. Это делает оптимизации бандла мощнее, чем у других форматов модулей.

Angular CLI также поддерживает импорт зависимостей CommonJS в проект и автоматически включает эти зависимости в бандл. Однако модули CommonJS могут мешать bundlers и minifiers эффективно оптимизировать эти модули, что приводит к большему размеру бандла. Дополнительную информацию см. в How CommonJS is making your bundles larger.

Angular CLI выводит предупреждения, если обнаруживает, что браузерное приложение зависит от модулей CommonJS. При встрече с зависимостью CommonJS рассмотрите возможность попросить мейнтейнера поддержать ECMAScript modules, внести эту поддержку самостоятельно или использовать альтернативную зависимость, соответствующую вашим нуждам. Если лучший вариант — использовать зависимость CommonJS, эти предупреждения можно отключить, добавив имя модуля CommonJS в опцию allowedCommonJsDependencies в опциях build в angular.json.

"build": {
  "builder": "@angular/build:application",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     …
   }
   …
},

Настройка совместимости с браузерами

Angular CLI использует Browserslist, чтобы обеспечить совместимость с разными версиями браузеров. В зависимости от поддерживаемых браузеров Angular автоматически трансформирует определённые возможности JavaScript и CSS, чтобы собранное приложение не использовало возможность, не реализованную поддерживаемым браузером. Однако Angular CLI не добавляет автоматически polyfills для отсутствующих Web API. Используйте опцию polyfills в angular.json для добавления polyfills.

По умолчанию Angular CLI использует конфигурацию browserslist, которая соответствует браузерам, поддерживаемым Angular для текущей major-версии.

Чтобы переопределить внутреннюю конфигурацию, выполните ng generate config browserslist, что генерирует файл конфигурации .browserslistrc в каталоге проекта, соответствующий поддерживаемым Angular браузерам.

См. репозиторий browserslist для дополнительных примеров нацеливания на конкретные браузеры и версии. Избегайте расширения этого списка на большее число браузеров. Даже если код приложения совместим шире, сам Angular может таковым не быть. Следует только сокращать набор браузеров или версий в этом списке.

Настройка Tailwind

Angular поддерживает Tailwind CSS, utility-first CSS-фреймворк.

Чтобы интегрировать Tailwind CSS с Angular CLI, см. Использование Tailwind CSS с Angular

Встраивание critical CSS

Angular может встраивать определения critical CSS приложения для улучшения First Contentful Paint (FCP). Эта опция включена по умолчанию. Встраивание можно отключить в опциях кастомизации styles.

Эта оптимизация извлекает CSS, необходимый для отрисовки начального viewport, и встраивает его напрямую в сгенерированный HTML, позволяя браузеру быстрее отображать контент без ожидания загрузки полных таблиц стилей. Остальной CSS затем загружается асинхронно в фоне. Angular CLI использует Beasties для анализа HTML и стилей приложения.