面试取经:工程化篇-webpack性能优化之热替换

热替换 HMR

热替换并不能降低构建时间(可能还会稍微增加),但可以降低代码改动到效果呈现的时间

当使用webpack-dev-server时,考虑代码改动到效果呈现的过程

而使用了热替换后,流程发生了变化

使用和原理

  1. 更改配置
java 复制代码
module.exports = {
  devServer:{
    hot:true // 开启HMR
  },
  plugins:[ 
    // 可选
    new webpack.HotModuleReplacementPlugin()
  ]
}
  1. 更改代码
scss 复制代码
// index.js
​
if(module.hot){ // 是否开启了热更新
  module.hot.accept() // 接受热更新
}

首先,这段代码会参与最终运行

当开启了热更新后,webpack-dev-server会向打包结果中注入module.hot属性

默认情况下,webpack-dev-server不管是否开启了热更新,当重新打包后,都会调用location.reload刷新页面

但如果运行了module.hot.accept(),将改变这一行为

module.hot.accept()的作用是让webpack-dev-server通过socket管道,把服务器更新的内容发送到浏览器

然后,将结果交给插件HotModuleReplacementPlugin注入的代码执行

插件HotModuleReplacementPlugin会根据覆盖原始代码,然后让代码重新执行

所以,热替换发生在代码运行期

样式热替换

对于样式也是可以使用热替换的,但需要使用style-loader

因为热替换发生时,HotModuleReplacementPlugin只会简单的重新运行模块代码

因此style-loader的代码一运行,就会重新设置style元素中的样式

mini-css-extract-plugin,由于它生成文件是在构建期间,运行期间并会也无法改动文件,因此它对于热替换是无效的

tips:以上信息来自渡一相关学习资料,供自己学习和面试使用。

相关推荐
gnip1 天前
Jst执行上下文栈和变量对象
前端·javascript
excel1 天前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休1 天前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪1 天前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do1 天前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选1 天前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选1 天前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼1 天前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
DT——1 天前
前端登录鉴权详解
前端·javascript
李姆斯1 天前
复盘上瘾症:到底什么时候该“复盘”,什么时候不需要“复盘”
前端·后端·团队管理