Angular2 WebPack Bundling для отладки занимает навсегда

Question

Я использовал Angular2 CLI для создания моего проекта. Он использует Webpack. Когда я делаю разработку, каждый раз, когда я делаю изменения и сохраняю их, Webpack должен воссоздать пакеты, прежде чем я смогу перезагрузить свою страницу и увидеть изменение. На самом деле это всего 10-12 секунд, но для отладки это эон. Иногда требуется 4 раза времени для связывания и перезагрузки страницы, чем это сделано для внесения изменений. Это безумие. Я что-то не так? Я не изменил ни одну из настроек Angular CLI или webpack, поскольку я даже не знал, с чего начать. Мой проект пока еще не очень большой - до 5-6 довольно простых компонентов.

Любые идеи?

Спасибо,

Dave

Answer 1

Это может помочь немного вашей сборки, добавьте это в вашей WebPack конфигурации;

cache: true, 
    devtool: 'cheap-module-source-map', 

также проверить это: https://webpack.github.io/docs/build-performance.html

Answer 2

Два варианта для ускорения Webpack в процессе разработки.

1. Вы можете создавать библиотеки, используя библиотеки Webpack DLL. Это в основном принимает файл javscript (например, vendor.ts) со списком модулей, которые вы хотите предварительно создать, и создает JS-файл, который будет автоматически использоваться при следующем запуске webpack вместо создания каждого из этих модулей снова и снова.

2. Вы можете использовать HMR (перезагрузка горячего модуля). Это означает, что вы можете запустить webpack один раз, и он будет ждать, когда вы вносите любые будущие изменения в любой из исходных файлов (javascript/html/CSS/LESS/etc). Когда вы нажмете «Сохранить», webpack-dev-сервер обнаружит, что вы изменили файл, и просто СОЗДАЙТЕ ТОГО, ЧТО ОДИН ФАЙЛ, и автоматически переведет его в браузер с помощью сокетов, и браузер обновит только один модуль и любые зависимые модули , Вы даже можете сохранить одно и то же состояние приложения, чтобы не обновлять браузер, и состояние браузера будет продолжаться там, где вы остановились перед сохранением.