因此对于 webpack,HMR 仅在您的模块或模块的父模块中有此代码时才会工作:
if (module.hot) {
module.hot.accept()
}
这让我想知道为什么您一开始会拒绝 HMR。使用它是否会产生性能成本或其他负面影响?
docs对这个问题不是很清楚。
最佳答案
如果你的代码你只能使用 HMR
- 是无状态的(如 CSS)或
- 提供清理旧状态的准备
由于大多数代码都不是无状态的,因此需要做一些额外的工作。实现此目的的常见方法是用代理替换导出的函数(react-hot-loader 以类似的方式工作)。因此,可以在不更新其他依赖项的情况下替换代理背后的实际实现。
例如,想象一下这个(有问题的)模块:
function add(a, b) {
return a - b;
}
export add;
注意到这个错误后,您不能立即换出 add
函数,因为其他模块持有对它的引用。这就是为什么您需要一个包装导出函数的代理:
function _add(a, b) {
return a - b;
}
export function add(a, b) {
return _add(a, b);
};
现在您可以轻松更换 _add
而无需更新其他模块。这对函数非常有效,但对其他类型(如导出的对象、数字、字符串)却失败了。用ES2015 proxies ,但是,可以导出像所有类型的代理一样工作的占位符。
因此,HMR 的挑战在于您需要用新代码替换旧代码,而不会留下任何奇怪的状态。这仍然很难以通用方式做到。
关于javascript - 什么时候不应该接受 webpack 热模块重载?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35255941/