webpack-模块热替换剖析

webpack-模块热替换剖析 目录

---

前言

• 主要讲解热更新的原理

推荐阅读

• 《webpack实战 入门、进阶与调优》

前提

• 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码
• 第一次提升效率：工具检测到代码改动，自动重新构建，然后触发网页刷新，称为：live reload
• 第二次提升：webpack不刷新的前提下得到改动，甚至不需要重新发起请求就能看到更新后的效果，成为：模块热替换功能(Hot Module Replacement)，简称HMR

HMR

• 保留页面当前状态的前提下呈现出最新的改动，节省时间成本

应用

• 复杂系统每改动一次，要经历资源重构建、网络请求、浏览器渲染等过程，需要几十秒
• 调式页面很深的层级，有时候需要人配合验证

开启HMR

• 基于webpack-dev-server或者webpack-dev-middle，webpack本身不支持HMR

开启webpack-dev-server的HMR

• npm i webpack-dev-server -D

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        hot: true,
    },
};

• 注意： webpack-cli的版本需要为3.3.10，才能和web-pack-server一起使用

调用HMR API有两种方式：

• 手动地添加代码
• 利用现成的工具：react-hot-loader, vue-loader

手动添加代码

// index.js
import { add } from 'util.js';
add(2, 3);

if(module.hot) {
    module.hot.accept();
}

• 当发现有模块发生变动时，HMR会再当前浏览器环境下重新执行一遍index.js，但是页面本身不会刷新

HMR原理

• 在开启HMR的状态下进行开发，会出现资源的体积比原本的大，因为webpack会注入很多相关的代码
• 在本地开发环境下，浏览器是客户端，webpack-dev-seerver(WDS)相当于服务端
• HMR的核心：客户端从服务端拉取更新后的资源(不是拉取整个资源文件，而是chunk diff，即chunk需要更新的部分)

步骤

1. 浏览器拉取更新的时间。

• WDS对本地源文件进行监听，与浏览器之间构建了一个websocket
• 当本地资源发生变化时，WDS会向浏览器推送更新事件，并带上本次构建的hash，让客户端与上一次资源进行比对
• 通过hash比对可以防止冗余更新的出现
• live reload也是依赖websocket实现的

2. 拉取资源内容。

• 客户端如果知道了新的构建结果和当前的有了差别，就会向WDS发起一个请求来获取更改文件的列表，即哪些模块有了改动
• 通常这个请求的名字为：[hash].hot-update.json
• 客户端返回：main.[hash].hot-update.js