什么是WebPack中的热模块替换?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

关于WebPack中的热模块替换,

它是否应该只用于开发,而不是用于生产?

它像LiveReload,但是你必须自己管理它吗?

WebPackDevServer是否以某种方式与其集成?

假设我想在将CSS(一个样式表)和JS模块保存到磁盘时更新它们,而不需要重新加载页面,也不需要使用诸如LiveReload之类的插件。这是什么热模块更换可以帮助我吗?我需要做什么样的工作,HMR已经提供了什么?

提问于
用户回答回答于

首先,我想指出,热模块替换(HMR)仍然是一个实验性的特点。

HMR是一种在运行中的应用程序中交换模块的方法(以及添加/删除模块)。基本上可以更新已更改的模块,而不需要重新加载整个页面。

文献资料

预录:

  • 使用插件代码分裂
  • webpack-dev-server

这不太适合HMR,但以下是链接:

  • 例子
  • API

它是如何工作的?

从应用程序视图

应用程序代码要求HMR运行时检查更新。HMR运行时下载更新(异步)并告诉应用程序代码更新是可用的。应用程序代码要求HMR运行时应用更新。HMR运行时应用更新(同步)。应用程序代码可能需要也可能不需要用户在此过程中的交互。

来自编译器(Webpack)视图

除了正常的资产外,编译器还需要发出“更新”,以允许从以前的版本更新到此版本。“最新情况”包括两部分:

  1. 更新清单(Json)
  2. 一个或多个更新块(Js)

清单包含新的编译散列和所有更新块(2.)的列表。

更新块包含此块中所有更新模块的代码(如果删除了模块,则为标志)。

编译器额外地确保模块和块ID在这些构建之间保持一致。它使用一个“记录”json文件在构建之间存储它们(在上面将它们存储在内存中)。

从模块视图

HMR是一个可选择的功能,因此它只影响包含HMR代码的模块。文档描述了模块中可用的API。通常,模块开发人员编写在更新该模块的依赖项时调用的处理程序。他还可以编写在更新该模块时调用的处理程序。

在大多数情况下,在每个模块中编写HMR代码并不是强制性的。如果模块没有HMR处理程序,则更新会弹出。这意味着一个处理程序可以处理完整模块树的更新。如果更新此树中的单个模块,则重新加载完整的模块树(仅重新加载,而不是传输)。

从HMR运行时视图

对于模块,系统运行时是发送到跟踪模块的附加代码。parentschildren.

在管理端,运行时支持两种方法:checkapply.

check对更新清单执行HTTP请求。当此请求失败时,将没有可用的更新。否则,更新块的列表将与当前加载的块列表进行比较。对于每个加载的块,将下载相应的更新块。所有模块更新存储在运行时作为更新。运行时切换到ready状态,意味着已下载并准备应用更新。

对于处于就绪状态的每个新块请求,还将下载更新块。

apply方法将所有更新的模块标记为无效。对于每个无效模块,需要在模块中设置一个更新处理程序,或者在每个父模块中都有一个更新处理程序。否则,那些无效的佛像也会把所有的父母都标记为无效的。这一过程一直持续到不再出现“泡沫”。如果它从一个入口点冒出来,进程就会失败。

现在,所有无效模块都被释放(Dispose处理程序)并卸载。调用所有“接受”处理程序。运行时切换回idle一切照常进行。

我能用它来做什么?

可以在开发中使用它作为LiveReload替代。实际上,webpack-dev服务器支持一种热模式,在尝试重新加载整个页面之前尝试使用hmr进行更新。只需添加webpack/hot/dev-server入口点,并使用以下命令调用dev-server--hot.

还可以在生产中使用它作为更新机制。在这里,需要编写自己的管理代码,将HMR与您的应用程序集成在一起。

一些加载器已经生成了可热更新的模块。I.E.style-loader可以交换样式表。你不需要做什么特别的事。

假设我想在将CSS(一个样式表)和JS模块保存到磁盘时更新它们,而不需要重新加载页面,也不需要使用诸如LiveReload之类的插件。这是什么热模块更换可以帮助我吗?

我需要做什么样的工作,HMR已经提供了什么?

下面是一个小小的例子:

模块只有在“接受”时才能更新。所以你需要module.hot.accept父母或父母的父母。也就是说,路由器是一个很好的地方或一个俯瞰。

如果只想将它与webpack-dev服务器一起使用,只需添加webpack/hot/dev-server作为切入点。否则,需要一些hmr管理代码调用checkapply.

意见:是什么让它这么酷?

  • It's LiveReload but for every module kind.
  • 你可以在生产中使用它。
  • 这些更新尊重您的代码拆分,并且只下载应用程序中使用过的部分的更新。
  • 可以将其用于应用程序的一部分,并且不影响其他模块
  • 如果禁用hmr,则编译器将删除所有hmr代码(将其包装在if(module.hot)

警告

  • 它是实验性的,测试得不太好。
  • 期望有一些错误
  • 理论上可以在生产中使用,但它可能会早期使用它来做一些严重的事情。
  • 需要在编译之间跟踪模块ID,因此需要存储它们(records)
  • 优化器不能在第一次编译后再优化模块ID。对束大小有一点影响。
  • HMR运行时代码增加包大小。
  • 对于生产使用,需要额外的测试来测试HMR处理程序。这可能会很困难。
用户回答回答于

接受的答案扩展了一切正确的无论如何,以下的描述有助于理解什么是HMR快速。

热模块替换是javascript开发中引起开发人员关注的最新技术之一。它通过在运行时用更改替换模块来减少页面刷新的次数。

在这里,它是在工作-注意,计时器没有重置为0,因为它将在页面重新加载,CSS也改变自动刷新。

WebPack有助于提高HMR的水平。它有助于实现以下目标:

  • 保留在完全重新加载过程中丢失的应用程序状态。
  • 只更新已更改的内容,可以节省宝贵的开发时间。
  • 更快地调整样式--几乎可以与浏览器调试器中的更改样式相媲美。

扫码关注云+社区