Đầu tiên tôi muốn lưu ý rằng Thay thế mô-đun nóng (HMR) vẫn là một tính năng thử nghiệm.
HMR là cách trao đổi các mô-đun trong một ứng dụng đang chạy (và thêm / xóa các mô-đun). Về cơ bản, bạn có thể cập nhật các mô-đun đã thay đổi mà không cần tải lại toàn bộ trang.
Tài liệu
Điều kiện tiên quyết:
Nó không quá nhiều cho HMR, nhưng đây là các liên kết:
Tôi sẽ thêm những câu trả lời này vào tài liệu.
Làm thế nào nó hoạt động?
Từ chế độ xem ứng dụng
Mã ứng dụng yêu cầu thời gian chạy HMR để kiểm tra các bản cập nhật. Thời gian chạy HMR tải xuống các bản cập nhật (async) và thông báo mã ứng dụng rằng có bản cập nhật. Mã ứng dụng yêu cầu thời gian chạy HMR để áp dụng các bản cập nhật. Thời gian chạy HMR áp dụng các bản cập nhật (đồng bộ hóa). Mã ứng dụng có thể hoặc không yêu cầu tương tác người dùng trong quá trình này (bạn quyết định).
Từ chế độ xem trình biên dịch (webpack)
Ngoài các tài sản thông thường, trình biên dịch cần phát ra "Cập nhật" để cho phép cập nhật từ phiên bản trước lên phiên bản này. "Cập nhật" chứa hai phần:
- bảng kê khai cập nhật (json)
- một hoặc nhiều khối cập nhật (js)
Tệp kê khai chứa hàm băm biên dịch mới và danh sách tất cả các khối cập nhật (2).
Các đoạn cập nhật chứa mã cho tất cả các mô-đun được cập nhật trong đoạn này (hoặc cờ nếu mô-đun bị xóa).
Trình biên dịch cũng đảm bảo rằng các mô-đun và id chunk phù hợp giữa các bản dựng này. Nó sử dụng tệp json "records" để lưu trữ chúng giữa các bản dựng (hoặc nó lưu chúng trong bộ nhớ).
Từ chế độ xem mô-đun
HMR là một tính năng chọn tham gia, vì vậy nó chỉ ảnh hưởng đến các mô-đun có chứa mã HMR. Tài liệu mô tả API có sẵn trong các mô-đun. Nói chung, nhà phát triển mô-đun viết các trình xử lý được gọi khi phụ thuộc của mô-đun này được cập nhật. Họ cũng có thể viết một trình xử lý được gọi khi mô-đun này được cập nhật.
Trong hầu hết các trường hợp, không bắt buộc phải viết mã HMR trong mọi mô-đun. Nếu một mô-đun không có trình xử lý HMR, cập nhật sẽ nổi lên. Điều này có nghĩa là một trình xử lý duy nhất có thể xử lý các bản cập nhật cho một cây mô-đun hoàn chỉnh. Nếu một mô-đun duy nhất trong cây này được cập nhật, cây mô-đun hoàn chỉnh sẽ được tải lại (chỉ tải lại, không được chuyển).
Từ khung nhìn thời gian chạy HMR (kỹ thuật)
Mã bổ sung được phát ra cho thời gian chạy hệ thống mô-đun để theo dõi mô-đun parentsvà children.
Về mặt quản lý, bộ thực thi hỗ trợ hai phương thức: checkvà apply.
A checkthực hiện một yêu cầu HTTP đến bảng kê khai cập nhật. Khi yêu cầu này không thành công, không có bản cập nhật có sẵn. Mặt khác, danh sách các khối được cập nhật được so sánh với danh sách các khối hiện đang được tải. Đối với mỗi đoạn được tải, đoạn cập nhật tương ứng được tải xuống. Tất cả các cập nhật mô-đun được lưu trữ trong thời gian chạy dưới dạng cập nhật. Thời gian chạy chuyển sang readytrạng thái, có nghĩa là một bản cập nhật đã được tải xuống và sẵn sàng để được áp dụng.
Đối với mỗi yêu cầu chunk mới ở trạng thái sẵn sàng, chunk cập nhật cũng được tải xuống.
Các applycờ phương pháp tất cả cập nhật mô-đun như không hợp lệ. Đối với mỗi mô-đun không hợp lệ, cần phải có trình xử lý cập nhật trong mô-đun hoặc trình xử lý cập nhật ở mỗi phụ huynh. Khác, bong bóng không hợp lệ lên và đánh dấu tất cả các bậc cha mẹ là không hợp lệ quá. Quá trình này tiếp tục cho đến khi không còn "bong bóng" xảy ra. Nếu nó bong bóng đến một điểm vào, quá trình thất bại.
Bây giờ tất cả các mô-đun không hợp lệ được xử lý (xử lý xử lý) và không tải. Sau đó, hàm băm hiện tại được cập nhật và tất cả các trình xử lý "chấp nhận" được gọi. Thời gian chạy chuyển về idletrạng thái và mọi thứ vẫn tiếp tục như bình thường.
Tôi có thể làm gì với nó?
Bạn có thể sử dụng nó trong phát triển như một sự thay thế LiveReload. Trên thực tế, webpack-dev-server hỗ trợ chế độ nóng cố gắng cập nhật với HMR trước khi thử tải lại toàn bộ trang. Bạn chỉ cần thêm webpack/hot/dev-serverđiểm vào và gọi cho dev-server với --hot.
Bạn cũng có thể sử dụng nó trong sản xuất như các cơ chế cập nhật. Tại đây bạn cần viết mã quản lý của riêng bạn tích hợp HMR với ứng dụng của bạn.
Một số bộ tải đã tạo ra các mô-đun có thể cập nhật nóng. ví dụ: Có style-loaderthể trao đổi biểu định kiểu. Bạn không cần phải làm gì đặc biệt.
Giả sử tôi muốn cập nhật CSS (một biểu định kiểu) và các mô-đun JS khi tôi lưu chúng vào đĩa, mà không cần tải lại trang và không sử dụng các plugin như LiveReload. Đây có phải là một cái gì đó thay thế mô-đun nóng có thể giúp tôi với?
Đúng
Tôi cần phải làm những loại công việc nào, và HMR đã cung cấp những gì?
Dưới đây là một ví dụ nhỏ: https://webpack.js.org/guides/hot-module-replocation/
Một mô-đun chỉ có thể được cập nhật nếu bạn "chấp nhận" nó. Vì vậy, bạn cần module.hot.acceptmô-đun trong cha mẹ hoặc cha mẹ của cha mẹ ... ví dụ: Bộ định tuyến là một nơi tốt, hoặc một cuộc phỏng vấn.
Nếu bạn chỉ muốn sử dụng nó với webpack-dev-server, chỉ cần thêm webpack/hot/dev-serverlàm điểm vào. Khác bạn cần một số mã quản lý HMR gọi checkvà apply.
Ý kiến: Điều gì làm cho nó rất mát mẻ?
- Đó là LiveReload nhưng dành cho mọi loại mô-đun.
- Bạn có thể sử dụng nó trong sản xuất.
- Các bản cập nhật tôn trọng Chia tách mã của bạn và chỉ tải xuống các bản cập nhật cho các phần được sử dụng trong ứng dụng của bạn.
- Bạn có thể sử dụng nó cho một phần của ứng dụng của bạn và nó không ảnh hưởng đến các mô-đun khác
- Nếu HMR bị vô hiệu hóa, tất cả mã HMR sẽ bị trình biên dịch loại bỏ (gói nó vào
if(module.hot)).
Hãy cẩn thận
- Đó là thử nghiệm và không được thử nghiệm tốt.
- Mong đợi một số lỗi.
- Về mặt lý thuyết có thể sử dụng trong sản xuất, nhưng có thể còn quá sớm để sử dụng nó cho một việc nghiêm trọng.
- ID mô-đun cần được theo dõi giữa các phần tổng hợp để bạn cần lưu trữ chúng (
records).
- Trình tối ưu hóa không thể tối ưu hóa ID mô-đun nữa sau lần biên dịch đầu tiên. Một chút ảnh hưởng đến kích thước bó.
- Mã thời gian chạy HMR tăng kích thước gói.
- Để sử dụng sản xuất, cần phải thử nghiệm bổ sung để kiểm tra trình xử lý HMR. Điều này có thể khá khó khăn.
