webpack的性能优化-HMR(开发环境)

已于 2023-12-04 11:30:00 修改
阅读量358 收藏
点赞数 1
文章标签： html webpack 前端框架
于 2021-08-30 17:15:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45903009/article/details/120000370
版权

性能优化-HMR

在开发环境下，我们都是通过index,js作为入口文件的，那么就会存在一个问题，无论是css的改变还是依赖的js文件改变，无论是改变哪一个，其他的依赖文件都会被重新打包的，

试想以下：当有1000个js文件，1000个css文件互相依赖，但是开发者改变了其中一个文件，是不是其他的文件都要被重新打包一次，这样会不会太浪费性能了。

因此webpack提出，只有改变的文件需要重新打包，其他不变的文件不需要重新打包加载

这就需要了解HMR—热更新替换

HMR：hot module replacement，热更新替换

作用：只有改变的文件需要重新打包，其他不变的文件不需要重新打包加载
注意：配置更新，必须重启webpack
在这里插入图片描述
样式文件：因为style-loader内部实现了HMR功能
js文件：默认不支持HMR功能·,[用来处理非入口的文件的更新]
html文件：默认不支持HMR功能·，同时html文件不在进行热更新

解决：修改entry入口，将html文件引入
在这里插入图片描述
但是这样以后，发现js文件HMR正常，但是html还是不变，
原因:一个项目只有一个html，所以没有必要对html进行热更新
index.js
在这里插入图片描述
print.js
在这里插入图片描述

乐意-李
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack学习（七）：启用 HMR(模块热替换)
qq593249106的博客
12-09 4709
demo地址: https://github.com/Lkkkkkkg/react-demo 上次使用 webpack-dev-serve : https://blog.csdn.net/qq593249106/article/details/84922572 当前目录结构 : |- /dist //用于放打包后文件的文件夹 |- app.bundle.js //出口文件 |- print...
webpack---优化_HMR
weixin_43390711的博客
05-31 107
webpack---优化_HMR
webpack优化-HMR
肖帅的博客
03-31 320
webpack性能优化 开发环境性能优化 生产环境性能优化 开发环境性能优化 优化打包构建速度 HMR 优化代码调试 source-map 生产环境性能优化 优化打包构建速度 oneOf babel缓存 多进程打包 externals dll 优化代码运行的性能 缓存(hash-chunkhash-contenthash) tree shaking code spli...
webpack优化系列(1)-HMR
ysj1218的博客
12-23 382
webpack优化要做哪些方面呢？ 开发环境性能优化 优化打包构建速度 优化代码调试 生产环境性能优化 优化打包构建速度 优化代码运行性能（提高用户体验） 那么怎么实现优化呢？以下是我的学习，仅供参考~ 场景一 当我们修改样式文件，实际上js文件也被重新打包了。假如项目体积很大，我们修改某一个css文件，那所有的模块都要被重新编译，会导致构建很慢，这个时候我就就要实现改哪个模块的只更新编译对应的模块即可，那么怎么实现呢？ 这个时候可以用到HMR，下面我们先来了解一下什么是HMR，有什么作用.
webpack性能优化——热模块替换（HMR）
雨的印记的博客
02-22 208
/* 开发环境配置：能让代码运行 运行项目指令： webpack 会将打包结果输出出去 npx webpack-dev-server 只会在内存中编译打包，没有输出 */ /** * HMR: hot module replacement (热模块替换) * 作用： 一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） * 极大提升构建速度 * * 样式文件： 可以使用 HMR 功能（因为 style-loader
webpack-使用webpack-dev-middleware.rar
04-12
`webpack-dev-middleware` 是 Webpack 提供的一个中间件，用于集成到 Node.js 的服务器环境中，实现快速、热更新的开发环境。 在 Web 开发过程中，频繁地手动刷新浏览器来查看代码改动既耗时又低效。`webpack-dev-...
webpack-dev-server-demo.zip
09-29
8. **静态文件服务**：Webpack-dev-server 还能提供静态文件服务，例如 HTML、CSS 和图片等，方便在开发环境中快速查看。 在解压后的 "webpack-dev-server-demo" 目录中，我们可以找到项目结构，包括源代码、配置...
webpack-tutorial-collection：webpack教程资源收集
02-06
5. **优化Webpack**：掌握代码分割、懒加载、生产环境优化等技巧。 6. **集成前端框架**：学习如何将Webpack与Vue、React等框架配合使用。 总之，Webpack-tutorial-collection 提供了一个全面的学习资源，无论你是...
浅谈webpack 构建性能优化策略小结
08-27
【webpack 构建性能优化策略小结】 在前端开发领域，webpack因其强大的功能和灵活性而备受推崇，逐渐取代了grunt和gulp，成为许多项目构建的首选工具，包括React、Vue和Angular等主流框架。然而，随着项目规模的...
webpack开发环境和生产环境的深入理解
10-17
### Webpack开发环境与生产环境深入理解 #### 一、引言 Webpack 是一个非常流行的前端资源打包工具，被广泛应用于构建现代Web应用程序。在实际项目中，开发环境与生产环境有着本质的区别，这就要求我们在配置...
webpack HMR
落枫秋歌
03-11 826
HMR模式下，webpack与浏览器之间会建立一个websocket连接，使得浏览器可以和服务端进行通信；当应用程序的代码更新时，会要求HMR runtime检查更新，有更新时，在websoket连接中会返回原文件的hash以及更新后代码的hash，并在[oldhash].hot-update.json文件中返回如下结构： { h: "fe94d54f9adaaa2831b2", // new ...
webpack模块热替换（HMR）在开发环境中应用
果车的博客
05-16 437
HMR概念介绍： 模块热替换功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过一下几种方式来加快开发速度： 只更新变更内容，以节省开发时间。 保留在完全重新加载页面时丢失的应用程序状态。 几乎相当于在浏览器中更改样式。 HMR在开发环境中使用 webpack.config.js中代码： /** * html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新 * 解决：修改entry入口，将html文件引入 * * css样式文件可以使用HMR
webpack 之开发环境优化 HMR
p1967914901的博客
01-29 110
webpack 之开发环境优化 HMR // webpack.config.js /** * HMR hot module replacement 热模块替换 / 模块热替换 * 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块） * 极大提升构建速度 * * * 样式文件：可以使用 HMR 功能：因为 style-loader 内部实现了 * js 文件：默认不能使用 HMR 功能 --> 需要修改js代码，添加支持HM
hmr webpack 不编译_Webpack HMR 热更新实现原理深入分析
weixin_30841011的博客
01-17 261
概述在使用 Webpack 构建开发期时，Webpack 提供热更新功能为开发带来良好的体验和开发效率，那热更新机制是怎么实现的呢？代码实现Webpack 配置添加 HotModuleReplacementPlugin 插件new webpack.HotModuleReplacementPlugin({// Options...})Node Server 引入 webpack-dev-middle...
Webpack热更新（HMR）
weixin_43613849的博客
12-01 2582
1、什么是模块热替换 模块热替换（HMR - Hot Module Replacement）是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面，其思路主要有以下几个方面 保留在完全重新加载页面时丢失的应用程序的状态 只更新改变的内容，以节省开发时间 调整样式更加快速，几乎等同于就在浏览器调试器中更改样式 2、启用HMR   HMR的启用十分简单，这归功于webpack内置插件使用上的便利。我们要做的仅仅是更新webpack-
论webpack配置技巧
qq_33726801的博客
02-06 574
        对于构建工具，相信大家并不陌生，熟悉webpack的人都知道，webpack的配置项非常庞大，有时想要找一个配置项就要花半天时间，所以有一部分人把目标投向了去年在构建工具类中排行冠军的零配置的parcel。        作为webpack的忠实粉丝，我并没有选择parcel这种简单构建工具，众所周知，比如一个需要传参才能执行某个事件的和一个不需要传参就可以执行某个事件的函数哪种灵...
Webpack HMR 原理解析
jiao512的专栏
03-04 702
Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。例如，在开发 Web 页面过程中，当你点击按钮，出现一个弹窗的时候，发现弹窗标题没有对齐，这时候你修改 CSS 样式，然后保存，在浏览器没有刷新的前提下，标题样式发生了改变。感觉就像在 Chrome 的开发者工具中直接修
webpack热模块替换（HMR）/热更新
热门推荐
皖林的博客
03-17 1万+
这是一篇关于webpack热模块替换的最简单的配置（不需要react），也称作热更新。
什么是webpack的HMR？webpack的HMR原理是什么？
tyxjolin的专栏
04-03 730
在本文中，我们深入探讨了Webpack HMR的原理，并说明了如何使用它来提高开发效率。我们了解到，Webpack HMR使用WebSocket和模块热替换技术来在运行时更新模块，从而使开发人员能够立即看到更改的效果。尽管HMR具有一些优点，但它也有一些缺点，包括可能导致应用程序状态出现问题以及增加应用程序的复杂性。因此，在使用HMR时，需要仔细考虑其优点和缺点，并确保在应用程序中正确配置和使用它。
如何利用webpack优化前端性能
最新发布
04-29
4. 模块热替换（HMR）：在开发环境中使用 HMR 可以减少页面刷新，提高开发效率。 5. 缓存：使用 hash 命名文件可以解决缓存问题，在文件内容发生变化时，文件名会发生变化，强制浏览器重新加载文件。 6. 压缩代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值