Есть несколько вещей, которые можно сделать, чтобы уменьшить время сборки.
Увеличение лимита памяти процесса сборки
Команда сборки выполняется узлом, где один процесс имеетмаксимальный лимит памяти 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 )