Спершу хочу зазначити, що заміна гарячого модуля (HMR) все ще є експериментальною особливістю.
HMR - це спосіб обміну модулями в запущеному додатку (і додавання / видалення модулів). Ви в основному можете оновити змінені модулі без повного перезавантаження сторінки.
Документація
Попередні вимоги:
Це не стільки для HMR, але ось посилання:
Я додам ці відповіді до документації.
Як це працює?
З подання програми
Код програми запитує час виконання HMR для перевірки оновлень. Час виконання HMR завантажує оновлення (асинхронізацію) та повідомляє код програми, що оновлення доступне. Код додатка просить HMR час виконання застосувати оновлення. Час виконання HMR застосовує оновлення (синхронізацію). Код додатка може або не потребуватиме взаємодії з користувачем у цьому процесі (ви вирішите).
З перегляду компілятора (веб-пакета)
На додаток до звичайних активів, компілятору необхідно випустити "Оновлення", щоб дозволити оновлення з попередньої версії до цієї версії. "Оновлення" містить дві частини:
- маніфест оновлення (json)
- один або кілька фрагментів оновлення (js)
Маніфест містить новий хеш компіляції та список усіх фрагментів оновлення (2).
Части оновлення містять код для всіх оновлених модулів у цьому фрагменті (або прапор, якщо модуль був видалений).
Крім того, компілятор гарантує, що ідентифікатори модулів та фрагментів узгоджуються між цими збірками. Він використовує json-файл "records", щоб зберігати їх між збірками (або зберігає їх у пам'яті).
З виду модуля
HMR є функцією, що підключається, тому вона впливає лише на модулі, що містять код HMR. Документація описує API, який доступний в модулях. Взагалі розробник модуля записує обробники, які викликаються при оновленні залежності цього модуля. Вони також можуть написати обробник, який викликається при оновленні цього модуля.
У більшості випадків не обов'язково писати HMR-код у кожен модуль. Якщо в модулі немає HMR-обробників, оновлення спливає. Це означає, що один обробник може обробляти оновлення для повного дерева модулів. Якщо один модуль у цьому дереві оновлюється, повне дерево модулів перезавантажується (лише перезавантажується, не передається).
З точки зору виконання HMR (технічний)
Додатковий код випромінюється під час виконання модульної системи для відстеження модуля parentsта children.
З боку управління час виконання підтримує два методи: checkі apply.
A checkзапит HTTP на маніфест оновлення. Якщо цей запит не вдається, оновлення не доступне. Інакше список оновлених фрагментів порівнюється зі списком завантажених на даний момент фрагментів. Для кожного завантаженого фрагмента завантажується відповідний фрагмент оновлення. Усі оновлення модулів зберігаються під час виконання у вигляді оновлень. Час виконання переходить у readyстан, тобто оновлення було завантажено та готове до застосування.
Для кожного нового запиту в готовому стані також завантажується фрагмент оновлення.
В applyпрапори метод все оновлені модулі недійсними. Для кожного недійсного модуля повинен бути обробник оновлення в модулі або обробник оновлень у кожному з батьків. Інші недійсні бульбашки вгору і позначають усіх батьків також недійсними. Цей процес триває до тих пір, поки більше не з'явиться «міхур». Якщо він пухиряє до точки входу, процес виходить з ладу.
Тепер усі недійсні модулі утилізуються (розпоряджаються обробкою) та вивантажуються. Потім поточний хеш оновлюється, і всі обробники "приймати" викликаються. Час виконання перемикається на idleстан і все триває як нормально.
Що я можу з цим зробити?
Ви можете використовувати його в розробці як заміну LiveReload. Насправді webpack-dev-сервер підтримує гарячий режим, який намагається оновити з HMR, перш ніж спробувати перезавантажити всю сторінку. Вам потрібно лише додати webpack/hot/dev-serverточку входу та зателефонувати на сервер dev-сервера --hot.
Ви також можете використовувати його у виробництві як механізми оновлення. Тут потрібно написати власний код управління, який інтегрує HMR з вашим додатком.
Деякі навантажувачі вже генерують модулі, які можна швидко оновити. наприклад, style-loaderможе обмінюватися таблицями стилів. Вам не потрібно робити нічого особливого.
Припустимо, я хочу оновити свої CSS (одну таблицю стилів) та JS модулі, коли я зберігаю їх на диску, не перезавантажуючи сторінку та не використовуючи додатки, такі як LiveReload. Чи може щось із цього замінити гарячий модуль?
Так
Яку роботу мені потрібно робити, і що вже дає HMR?
Ось невеликий приклад: https://webpack.js.org/guides/hot-module-replacement/
Модуль може бути оновлений, лише якщо ви "приймаєте" його. Тож вам потрібен module.hot.acceptмодуль у батьків чи батьків батьків ... наприклад, Маршрутизатор - це гарне місце чи підзагляд.
Якщо ви хочете використовувати його лише з webpack-dev-сервером, просто додайте webpack/hot/dev-serverв якості точки входу. Ще вам потрібен код управління HMR, який дзвонить checkі apply.
Думка: Що робить його таким крутим?
- Це LiveReload, але для кожного типу модулів.
- Ви можете використовувати його у виробництві.
- Оновлення стосуються вашого розщеплення коду та завантажують оновлення лише для використаних частин програми.
- Ви можете використовувати його для частини вашої програми, і це не впливає на інші модулі
- Якщо HMR вимкнено, компілятор видаляє весь HMR-код (заверніть його
if(module.hot)).
Коваджі
- Це експериментально і не перевірено так добре.
- Чекайте деяких помилок.
- Теоретично придатний для виробництва, але використовувати його для чогось серйозного може бути занадто рано.
- Ідентифікатори модуля потрібно відстежувати між компіляціями, тому їх потрібно зберігати (
records).
- Оптимізатор вже не може оптимізувати ідентифікатори модуля після першої компіляції. Трохи впливає на розмір пакета.
- Код виконання HMR збільшує розмір пакету.
- Для використання у виробництві необхідне додаткове тестування для тестування обробників HMR. Це може бути досить складно.
