关于webpack:HMR知识点梳理

2次阅读

共计 487 个字符,预计需要花费 2 分钟才能阅读完成。

HMR 是啥?

简略来讲就是开发的时候更新代码不必刷新整个页面就能够更新对应的内容,能够进步开发效率

webpack 中实现 HMR 所依赖的 api 与技术性能点

  1. nodejs 的监听文件的 apihttp://nodejs.cn/api/fs.html#fs_fs_watchfile_filename_options_listener,用于监听文件变动
  2. 内存文件系统 https://github.com/webpack/webpack-dev-middleware/blob/v3.7.0/lib/fs.js#L115,用内存文件系统替换 compiler 自带的文件系统,能够大大提高效率
  3. 及时通信,生成新的代码块后被动告诉客户端
  4. 模块中须要解决 HMR 的事件,个别在 loader 中解决,能够参考 vue-loader 的 https://github.com/vuejs/vue-loader/blob/6a05115ddf3ea680ab2b00862b2891da2e98a41c/lib/codegen/hotReload.js,如果对应模块中没有解决 HMR 的代码,事件会一层层冒泡直至刷新整个页面
正文完
 0