叉烧店并不卖叉烧

使用Webpack HMR可以在更少的时间里做更多的事

webpack TTT 64℃ 0评论

参考

模块热加载(Hot Module Replacement —— HMR)是Webpack的一个特性,可以在不刷新浏览器的情况下更新你的Javascript。它甚至可以在你更新代码的时候保持你应用的当前的状态。它主要用在开发中

这篇文章主要介绍你为什么应该使用它 —— 如果你没有听说过HMR,或者你从来没有在你的项目中使用过它,那么继续读下去

NOTE:Browserify也能通过插件支持模块热加载,但是我这篇文章是假设你正在使用Webpack

所以,为什么我需要HMR?

让我们退一步,讲讲你的开发周期。我不会说关于你项目的项目管理和敏捷。用最简单的说法,我只说这个周期:编写代码-》重新加载你的应用-》编写更多代码-》……

你每天会做这些多少次?几百次?还是几千次?

编写一些代码(type some code)这个步骤现在是由你来决定。让我们来看看重载你的应用(reload your app)这个步骤。当你在Javascript编辑器工作的时候,这意味着你需要重新加载和刷新你的浏览器

这只需要一秒,对吗?很好,当你分解成以下几个步骤的话,可能需要更多的时间

  • 1.点击win+tab键,1到2秒的时间切换到浏览器
  • 2.点击f5键进行刷新页面
  • 3.花费1秒左右的时间等待页面刷新完成
  • 4.重新将你的页面调为你需要的状态(在你重新加载的时候你失去了页面的状态)
  • 5.点击win+tab键,切换回你的代码编辑器

(对不起,这是windows的快捷键,mac 用户你自己想办法吧)

好吧,显然这也不是什么大问题,但是,当你重复这些步骤累计下来每天都要操作几百次了。并且作为一个程序员,当我知道我可以自己写一个或者直接部署一个现成的程序来帮助我完成以上步骤,那让我做多一次上面的任何步骤我都觉得累

并且,我也不想因为每天都操作相同的事情让我们患上重复性劳损。况且我(原文章作者)已经有RSI病症了,这可不能开玩笑呀

什么是实时重载(live reload)?

实时重载和HMR很相似,但是它只是每当代码更改完毕后自动的将浏览器重载。等待重载或许是,也或许不是一个问题,这取决于后台有多块

实时重载也是会丢失你的状态,所以,如果你是在一个大型的单页面应用里开发一个复杂的功能,这将会成为一个烦恼

好了,我已经把它卖了,我能要一个芝士汉堡吗?

你当然可以!如果你现在就想设置它,你可以看看我的文章,就是这篇《3种方法设置webpack的HMR

或者你想要了解更多,我已经写了一篇文章给你了《了解HMR及其工作原理

转载请注明:叉烧店 » 使用Webpack HMR可以在更少的时间里做更多的事

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址