Сокращение времени сборки производства для приложения Angular 7 - PullRequest
0 голосов
/ 08 декабря 2018

Моему приложению требуется очень много времени для сборки для производства с использованием ng build --prod

Иногда даже происходит сбой при

ФАТАЛЬНАЯ ОШИБКА: Неэффективные сжатые маркеры близки к пределу кучи Выделение не удалось- Кучи JavaScript не хватает памяти

Могу ли я что-то сделать, чтобы сократить время сборки?

1 Ответ

0 голосов
/ 08 декабря 2018

Есть несколько вещей, которые можно сделать, чтобы уменьшить время сборки.

Увеличение лимита памяти процесса сборки

Команда сборки выполняется узлом, где один процесс имеетмаксимальный лимит памяти 1,76 ГБ на 64-битных машинах.Его можно увеличить, добавив аргумент --max-old-space-size к команде построения

Поскольку этот аргумент должен быть передан самому процессу узла, команда должна быть запущена непосредственно с узлом.Пример выделения 4096 МБ (4 ГБ) оперативной памяти для процесса будет следующим:

node --max-old-space-size=4096 ./node_modules/@angular/cli/bin/ng build

Увеличение предела памяти также предотвратит ошибку «куча нехватки памяти».

Там действительно появляетсябыть пределом того, сколько памяти использует процесс.У моего проекта время сборки значительно сократилось за счет увеличения памяти до 12 ГБ, но увеличение его до 32 ГБ не дало никаких улучшений.

Исправление ссылок на модули node_modules в файлах .scss

Ссылки на внешние таблицы стилейИспользование node_modules с использованием относительных путей отрицательно влияет на производительность процесса сборки и его следует избегать.

В процессе сборки используется sass-loader Webpack, который поддерживает синтаксис, в котором местоположение узла_modules ссылается на тильду ~.

Использование тильды вместо относительного пути значительно сокращает время сборки.Поэтому вместо импорта внешних таблиц стилей CSS с

import "../../../../../node_modules/x/whatever.css"

используйте

import "~node_modules/x/whatever.css"

Оптимизация производства

По умолчанию в производственной сборке используется конфигурация из файла angular.json.Значения по умолчанию:

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
}

Не отвлекайте от значений по умолчанию для производственной сборки, если у вас нет веских причин.

Это большая часть поддержания низкого времени сборки (особенно отключение sourceMapи включение buildOptimizer).

Обновите версию Angular CLI

Команда Angular CLI непрерывно повышает скорость процесса сборки.

Заметно обновление производительности сборки с версии 6значение 7 является существенным, поэтому всегда полезно поддерживать библиотеку @angular/cli в актуальном состоянии.

Внешние библиотеки

Чтобы иметь быстродействующее приложение, вам нужно быть очень осторожным с какими библиотекамивы импортируете.

Многие популярные библиотеки, такие как jQuery, lodash и moment, очень велики по размеру и не оптимизированы должным образом для процесса сборки Webpack.

Найдите библиотеки, которые поддерживают Tree Webpack.-Shaking , чтобы позволить процессу сборки связывать только те части библиотеки, которые фактически используютсяв вашем приложении.

Кроме того, не попадайтесь в ловушку добавления целой служебной библиотеки (например, lodash), если вам нужно использовать только одну функцию из нее (например, _get()).

Сжатие ресурсов

Сжатие ресурсов (часто изображений) в значительной степени тривиальная задача (просто Google "сжать изображения онлайн"), и это может повысить производительность процесса сборки и самого приложения.

Оптимизация оборудования

Поскольку Javascript является однопоточным, преимущества наличия нескольких ядер ЦП не ускорят процесс сборки.

На самом деле, если вы отслеживаете ЦП во времясборка, в которой вы увидите, что одно ядро ​​находится под нагрузкой 100% почти в течение всего процесса.

Если вы регулярно создаете свое приложение с производственным флагом как часть вашей настройки непрерывной интеграции, вы можете рассмотреть возможность использования машины, оборудованнойс высокой однопоточной производительностью (тесты см. cpubenchmark.net )

...