Объединение и минимизация проекта быстрого запуска с угловым 2

Question

Как выполнить объединение и минимизацию проекта быстрого запуска с угловым 2, чтобы уменьшить HTTP-запросы при начальной загрузке?

При загрузке первой страницы проекта быстрого запуска создается около 300 запросов HTTP, что занимает много времени.

Я прочитал в блоге, что объединение и минимизация могут быть полезны для уменьшения этих вызовов.

У угловых 2 есть много способов сделать это. Web пакет SystemJs угловой CLI

, но я не могу найти, как использовать любой из них с быстрым проектом запуска.

Answer 1

Вы можете использовать Angular Compiler для этого. Существует несколько способов сделать это возможным.

Вариант 1: Docker Если вы уже используете докер и/или докер-COMPOSE, это очень хороший вариант, и очень легко. Я создал контейнер, который может смотреть ваш источник приложения и строить его каждый раз, когда вы сохраняете файл. Вы можете использовать этот контейнер, как так (остерегайтесь, изображение о 600MB - извините, угловой компилятор на самом деле огромен!):

docker run --rm -v $(pwd)/src treyjones/ng build -w 

В этом случае я предполагаю, что ваше приложение в src.

Вы также можете использовать эту команду, чтобы увидеть полную справочную документацию для ng:

docker run --rm treyjones/ng -h 

На самом деле найти полную документацию в Интернете оказалось трудным для меня.

Если вы не хотите использовать докер для этого, вы также можете просто делать то, что делает контейнер, быть предупрежденным, он по-прежнему является огромной установкой только через узел вместо докера. Два варианта для этого:

npm i angular-cli@1.0.0-beta.24 -g 

Вариант 2 - добавить его в качестве зависимости вашего проекта в package.json:

"devDependencies": { 
    "angular-cli": "1.0.0-beta.24" 
} 

beta.24 является последней версией перечисленной НПМ. Я использовал бета-версию. Тем не менее, я могу подтвердить, что процесс сборки очень плавный и очень хорошо работал для меня.

You can read a little bit more about how this is intended to work on github.

Answer 2

Чтобы избежать загрузки сотен небольших файлов, вы обычно создаете так называемые пакеты, используя набор, такой как webpack. Webpack - это инструмент для разрешения зависимостей внутри вашего проекта и обеспечивает хорошую настройку импорта модулей, индекса JScript, ES2015 и т. Д.

Чтобы понять, как это работает, посмотрите на проект angular2-webpack-starter.

Также Angular CLI использует webpack под капотом.

Если вы заинтересованы в использовании webpack, позвольте мне сказать, что кривая обучения довольно крутая.Не начинайте с попытки понять проект с полным взрывом, например, упомянутый выше проект angular2-webpack-starter. Вместо этого начните с чего-то более легкого, например, в разделе учебника webpack getting started.

Answer 3

Самый простой способ, который я нашел для этого, с тоннами комнаты для роста, использует этот «шаблон» для угловых 2 проектов. Это также дает вам большую визуализацию при строительстве для производства. AoT, Minification, Webpack, etc... template