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

相关文章

如何将Tomcat容器替换为Jetty容器

《如何将Tomcat容器替换为Jetty容器》:本文主要介绍如何将Tomcat容器替换为Jetty容器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Tomcat容器替换为Jetty容器修改Maven依赖配置文件调整(可选)重新构建和运行总结Tomcat容器替

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

python中time模块的常用方法及应用详解

《python中time模块的常用方法及应用详解》在Python开发中,时间处理是绕不开的刚需场景,从性能计时到定时任务,从日志记录到数据同步,时间模块始终是开发者最得力的工具之一,本文将通过真实案例... 目录一、时间基石:time.time()典型场景:程序性能分析进阶技巧:结合上下文管理器实现自动计时

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

Python利用自带模块实现屏幕像素高效操作

《Python利用自带模块实现屏幕像素高效操作》这篇文章主要为大家详细介绍了Python如何利用自带模块实现屏幕像素高效操作,文中的示例代码讲解详,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、获取屏幕放缩比例2、获取屏幕指定坐标处像素颜色3、一个简单的使用案例4、总结1、获取屏幕放缩比例from

nginx-rtmp-module模块实现视频点播的示例代码

《nginx-rtmp-module模块实现视频点播的示例代码》本文主要介绍了nginx-rtmp-module模块实现视频点播,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习... 目录预置条件Nginx点播基本配置点播远程文件指定多个播放位置参考预置条件配置点播服务器 192.

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

多模块的springboot项目发布指定模块的脚本方式

《多模块的springboot项目发布指定模块的脚本方式》该文章主要介绍了如何在多模块的SpringBoot项目中发布指定模块的脚本,作者原先的脚本会清理并编译所有模块,导致发布时间过长,通过简化脚本... 目录多模块的springboot项目发布指定模块的脚本1、不计成本地全部发布2、指定模块发布总结多模

Python中构建终端应用界面利器Blessed模块的使用

《Python中构建终端应用界面利器Blessed模块的使用》Blessed库作为一个轻量级且功能强大的解决方案,开始在开发者中赢得口碑,今天,我们就一起来探索一下它是如何让终端UI开发变得轻松而高... 目录一、安装与配置:简单、快速、无障碍二、基本功能:从彩色文本到动态交互1. 显示基本内容2. 创建链

Node.js 中 http 模块的深度剖析与实战应用小结

《Node.js中http模块的深度剖析与实战应用小结》本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮... 目录Node.js 中 http 模块的深度剖析与实战应用一、引言二、创建 HTTP 服务器:基石搭建(一