webpack-模块热替换剖析

2024-09-05 11:48
文章标签 模块 剖析 替换 webpack

本文主要是介绍webpack-模块热替换剖析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

webpack-模块热替换剖析 目录

文章目录

  • 前言
  • 推荐阅读
  • 前提
  • `HMR`
  • 应用
  • 开启`HMR`
    • 开启`webpack-dev-server`的`HMR`
    • 手动添加代码
  • `HMR`原理
  • 步骤


前言

  • 主要讲解热更新的原理

推荐阅读

  • 《webpack实战 入门、进阶与调优》

前提

  • 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码
  • 第一次提升效率:工具检测到代码改动,自动重新构建,然后触发网页刷新,称为:live reload
  • 第二次提升:webpack不刷新的前提下得到改动,甚至不需要重新发起请求就能看到更新后的效果,成为:模块热替换功能(Hot Module Replacement),简称HMR

HMR

  • 保留页面当前状态的前提下呈现出最新的改动,节省时间成本

应用

  • 复杂系统每改动一次,要经历资源重构建、网络请求、浏览器渲染等过程,需要几十秒
  • 调式页面很深的层级,有时候需要人配合验证

开启HMR

  • 基于webpack-dev-server或者webpack-dev-middlewebpack本身不支持HMR

开启webpack-dev-serverHMR

  • npm i webpack-dev-server -D
const webpack = require('webpack');
module.exports = {plugins: [new webpack.HotModuleReplacementPlugin()],devServer: {hot: true,},
};
  • 注意: webpack-cli的版本需要为3.3.10,才能和web-pack-server一起使用

调用HMR API有两种方式:

  • 手动地添加代码
  • 利用现成的工具:react-hot-loader, vue-loader

手动添加代码

// index.js
import { add } from 'util.js';
add(2, 3);if(module.hot) {module.hot.accept();
}
  • 当发现有模块发生变动时,HMR会再当前浏览器环境下重新执行一遍index.js,但是页面本身不会刷新

HMR原理

  • 在开启HMR的状态下进行开发,会出现资源的体积比原本的大,因为webpack会注入很多相关的代码
  • 在本地开发环境下,浏览器是客户端,webpack-dev-seerver(WDS)相当于服务端
  • HMR的核心:客户端从服务端拉取更新后的资源(不是拉取整个资源文件,而是chunk diff,即chunk需要更新的部分)

步骤

  1. 浏览器拉取更新的时间。
  • WDS对本地源文件进行监听,与浏览器之间构建了一个websocket
  • 当本地资源发生变化时,WDS会向浏览器推送更新事件,并带上本次构建的hash,让客户端与上一次资源进行比对
  • 通过hash比对可以防止冗余更新的出现
  • live reload也是依赖websocket实现的
  1. 拉取资源内容。
  • 客户端如果知道了新的构建结果和当前的有了差别,就会向WDS发起一个请求来获取更改文件的列表,即哪些模块有了改动
  • 通常这个请求的名字为:[hash].hot-update.json
  • 客户端返回:main.[hash].hot-update.js

这篇关于webpack-模块热替换剖析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1138877

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

一文深入详解Python的secrets模块

《一文深入详解Python的secrets模块》在构建涉及用户身份认证、权限管理、加密通信等系统时,开发者最不能忽视的一个问题就是“安全性”,Python在3.6版本中引入了专门面向安全用途的secr... 目录引言一、背景与动机:为什么需要 secrets 模块?二、secrets 模块的核心功能1. 基

Python如何判断字符串中是否包含特殊字符并替换

《Python如何判断字符串中是否包含特殊字符并替换》这篇文章主要为大家详细介绍了如何使用Python实现判断字符串中是否包含特殊字符并使用空字符串替换掉,文中的示例代码讲解详细,感兴趣的小伙伴可以了... 目录python判断字符串中是否包含特殊字符方法一:使用正则表达式方法二:手动检查特定字符Pytho

C#继承之里氏替换原则分析

《C#继承之里氏替换原则分析》:本文主要介绍C#继承之里氏替换原则,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#里氏替换原则一.概念二.语法表现三.类型检查与转换总结C#里氏替换原则一.概念里氏替换原则是面向对象设计的基本原则之一:核心思想:所有引py

Python logging模块使用示例详解

《Pythonlogging模块使用示例详解》Python的logging模块是一个灵活且强大的日志记录工具,广泛应用于应用程序的调试、运行监控和问题排查,下面给大家介绍Pythonlogging模... 目录一、为什么使用 logging 模块?二、核心组件三、日志级别四、基本使用步骤五、快速配置(bas

Python datetime 模块概述及应用场景

《Pythondatetime模块概述及应用场景》Python的datetime模块是标准库中用于处理日期和时间的核心模块,本文给大家介绍Pythondatetime模块概述及应用场景,感兴趣的朋... 目录一、python datetime 模块概述二、datetime 模块核心类解析三、日期时间格式化与

Python如何调用指定路径的模块

《Python如何调用指定路径的模块》要在Python中调用指定路径的模块,可以使用sys.path.append,importlib.util.spec_from_file_location和exe... 目录一、sys.path.append() 方法1. 方法简介2. 使用示例3. 注意事项二、imp

慢sql提前分析预警和动态sql替换-Mybatis-SQL

《慢sql提前分析预警和动态sql替换-Mybatis-SQL》为防止慢SQL问题而开发的MyBatis组件,该组件能够在开发、测试阶段自动分析SQL语句,并在出现慢SQL问题时通过Ducc配置实现动... 目录背景解决思路开源方案调研设计方案详细设计使用方法1、引入依赖jar包2、配置组件XML3、核心配

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚