Как минимизировать vendor.js на ng serve

Question

Я сейчас собираюсь приступить к редизайну. Это требует много scss изменений и перезагрузки сайта. Я хотел бы воспользоваться командой ng nerve, которая использует живую перезагрузку.

Кто-нибудь знает, как я могу запустить ng serve и минимизировать файл vendor.js? Когда я использую ng serve --prod, он минимизирует vendor.js ... но на его сборку уходит 10-15 секунд.

В настоящее время мой vendor.js файл не является 8.9mb незавершенным и занимает 2-3 секунды до перезагрузки в разработке.

У кого-нибудь есть идеи?

ng serve --prod, в то время как для минификации требуется 2-3 минуты каждый раз.

Примечание: в настоящее время используется Angular 6.X

Answer 1

Я наблюдал перекомпиляцию угловых проектов с использованием ng serve с кодом Visual Studio.Vendor.js не перекомпилируется при внесении изменений в проект.Он компилируется только во время первого выполнения ng serve.

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

Это случилось со мной в одном из моих первых проектов Angular (школьное задание).Короче говоря, я читал о ленивой загрузке, реализовал ее в модуле панели администратора, но мой друг отказался внедрить ее в модуль пользователя, потому что ему пришлось бы перекладывать много кода и реструктурировать проект.Когда проект стал больше ... стало очевидно, насколько важна ленивая загрузка ...

Первая компиляция: (немного поясню) модули manage- * - это функциональные модули, принадлежащие модулю администратора.Каждый компонент в пользовательском модуле: боковая панель, панель навигации, фильтр, поиск и т. Д., Все принадлежит пользовательскому модулю, следовательно, он значительно больше, 3,46 МБ по сравнению с администратором и его функциональными модулями.

Например, комментирование 3 строк html в одном из компонентов в пользовательском модуле перекомпилирует весь пользовательский модуль и занимает 5523 мс.Если я запускаю Photoshop или другие программы, интенсивно использующие память, это заняло бы гораздо больше времени!

Например, комментирование 3 строк HTML и перекомпиляцияфункциональный модуль в модуле панели администратора занимает <1 с: </p>

Я все еще новичок в Angular, но извлеченный урок: делать ленивую загрузку, это спасает пользователяпропускная способность и ваше время разработки =]

Answer 2

Решение вашей проблемы не совсем то, о чем вы думаете, это общая проблема для всех интерфейсных сред и сборок веб-пакетов.

Webpack предлагает элегантное решение для этого.Это называется горячая замена модуля .Т.е. веб-пакет будет менять ваш код и стили на лету без необходимости перезагрузки страницы.Angular нуждается в некоторой настройке, чтобы настроить его, который описан здесь шаг за шагом.

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/configure-hmr.md

Answer 3

Вы можете использовать ленивую загрузку в своем приложении, чтобы уменьшить размер пакета. Это также увеличивает скорость приложения.

Answer 4

Во-первых, зачем тебе это так сильно?Да, vendor.js не будет минимизирован, но он также не будет перекомпилирован при изменениях SCSS / уровне представления, верно?Итак, в конце упражнения вы получите преимущество только при первой загрузке файла размером ~ 2 МБ против файла 8,9 МБ, что будет незначительным, поскольку вы можете включить BFcache в браузере (НЕ проверяя«Отключить кэш» в DevTools> Network)

Если вы должны это сделать, я думаю, что подход будет заключаться в использовании Горячая замена модуля для модуля компонента, над которым вы будете работать.

РЕДАКТИРОВАТЬ:

Лично я нахожу слишком много перезагрузок для небольших визуальных HTML / CSS изменений излишним.Иногда я «проверяю» элементы, изменяю HTML / CSS с помощью devTools и копирую HTML / CSS во временное место.Затем я делаю эти 5-6 изменений в Компонентах, сохраняю и перезагружаю их для проверки.

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

Answer 5

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

Я понимаю, что вы переделываете угловое приложение и используете ng serve, чтобы видеть свою работу в реальном времени в браузере, но вы страдаете из-за медленной сборкивремя, как vendor.js перестраивается при каждом изменении.

Проблема не в том, что vendor.js большой (всегда есть), а в том, что он построен на каждом изменении.Как уже упоминалось в других ответах, изменения в коде приложения не должны (обычно) вызывать перестройку vendor.js.Это указывает на еще одну проблему: возможно, вы что-то путаете с импортом scss .

Кроме того, использование ng serve --prod, вероятно, вообще не решит вашу проблему.Время сборки выше, чем у неоптимизированных сборок, и я не думаю, что ваша проблема была решена путем минимизации кода (опять же, ваша проблема связана со временем сборки).

В любом случае, если вы хотите продолжить работу со своимИсходный вопрос и запустите ng serve и уменьшите файл vendor.js , вам нужно будет создать пользовательскую конфигурацию веб-пакета, посмотрите на эти сайты:

• https://dev.to/meltedspark/customizing-angular-cli-6-buildan-alternative-to-ng-eject-1oc4
• https://angular -guru.com / blog / angular-webpack

На этом последнем сайте вы можете найти конфигурацию веб-пакета, которая соответствует поставщику.js

Надеюсь, это поможет, мне нужно больше подробностей, чтобы дать лучший ответ.