webpack提升打包构建速度(hmr/热模块替换)

这篇具有很好参考价值的文章主要介绍了webpack提升打包构建速度(hmr/热模块替换)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 场景

开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。

所以我们需要做到修改某个模块代码就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快

这个就需要在webpack.config.js中配置一下hmr热模块替换

二、什么是HotModuleReplacement

HotModuleReplacement(简称HMR)是Webpack提供的一个功能,它可以在不刷新页面的情况下,实现局部模块的热更新。也就是说,当你修改了一个模块的代码后,HMR会自动将修改的部分更新到浏览器中,而不会重新加载整个页面。

HMR的实现原理是通过WebSocket连接服务器,实时监听文件变化,然后动态更新模块。对于一些纯数据的模块,Webpack会使用热替换(Hot Replacement)技术,替换旧模块。

使用HMR可以提高开发效率和调试体验。在开发过程中,只需修改特定的代码,即可实时保存并查看修改结果,无需手动刷新浏览器。同时,HMR也避免了页面重新加载,减少了开发时间和流量消耗。

三、配置使用

在开发环境下将devServer的hot配置成true就行了

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能(只能用于开发环境,生产环境不需要了)
  },
};

此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。 但是 js 还不行。

js需要到main.js中配置,如下:文章来源地址https://www.toymoban.com/news/detail-486669.html

if (module.hot) {
  module.hot.accept('./library.js', function() {
    // 对更新过的 library 模块做些事情...
  });
}

// or
if (import.meta.webpackHot) {
  import.meta.webpackHot.accept('./library.js', function () {
    // Do something with the updated library module…
  });
}

到了这里,关于webpack提升打包构建速度(hmr/热模块替换)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • webpack打包速度优化思维导图

    去年的时候公司一个项目体积过大,我是m1芯片的macpro,光启动就要1分钟,配置差点都电脑,启动就要3分钟,自然打包速度也会慢很多,我们是gitlab设置成了自动打包的,所以打包速度上需要优化一下,否则太慢了。 之后是做了一个思维导图,测试了市面上对于webpack的优化

    2024年02月21日
    浏览(41)
  • 如何提高webpack的构建速度?

    随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的  webpack  的构建时间也会越来越久 构建时间与我们日常开发效率密切相关,当我们本地开发启动  devServer  或者  build  的时候,如果时间过长,会大大降低我们的工作效率 所以,优化 webpack  构建

    2024年02月08日
    浏览(40)
  • webpack基础知识九:如何提高webpack的构建速度?

    一、背景 随着我们的项目涉及到页面越来越多,功能和业务代码也会随着越多,相应的 webpack 的构建时间也会越来越久 构建时间与我们日常开发效率密切相关,当我们本地开发启动 devServer 或者 build 的时候,如果时间过长,会大大降低我们的工作效率 所以,优化webpack 构建

    2024年02月14日
    浏览(35)
  • 【前端工程化面试题】如何优化提高 webpack 的构建速度

    使用最新版本的 Webpack 和相关插件 : 每个新版本的 Webpack 都会带来性能方面的改进和优化,因此始终确保你在使用最新版本。同时,更新你的相关插件也是同样重要的。 使用DllPlugin动态链接库: 使用DllPlugin和DllReferencePlugin来将第三方库的代码进行预打包,减少构建时间。这个

    2024年02月19日
    浏览(61)
  • 前端性能优化——包体积压缩插件,打包速度提升插件,提升浏览器响应的速率模式

    –其他的优化可以具体在网上搜索 压缩项目打包后的体积大小、提升打包速度,是前端性能优化中非常重要的环节,结合工作中的实践总结,梳理出一些 常规且有效 的性能优化建议 ue 项目可以通过添加–report命令: \\\"build\\\": \\\"vue-cli-service build --report\\\" ,打包后 dist 目录会生成

    2024年02月12日
    浏览(55)
  • webpack打包机制,构建过程和配置

    Webpack是一个现代的JavaScript应用程序的模块打包器(module bundler),它主要用于处理应用程序中的资源文件,例如JavaScript文件、样式文件、图像文件等,将它们打包成一个或多个最终的bundle文件,以供浏览器加载。 Webpack的构建过程分为以下几个步骤: 解析入口文件:Webpack从入

    2024年01月19日
    浏览(36)
  • 模块化打包工具-初识Webpack

    在上一篇文章中提到的ES Module可以帮助开发者更好地组织代码,完成js文件的模块化,基本解决了模块化的问题,但是实际开发中仅仅完成js文件的模块化是不够的,尤其是面对一个较为庞大的工程项目的时候,主要仍有以下几个问题需要解决: ES Module是ES6新语法,一些老的

    2024年02月08日
    浏览(128)
  • 使用Webpack进行模块化开发与打包

    Webpack是一个现代化的JavaScript模块打包工具,它可以将多个模块打包成一个或多个静态资源文件。通过Webpack,我们可以将项目中的各个模块进行模块化开发,并将它们打包成一个或多个可供浏览器加载的静态资源文件。 使用Webpack进行模块化开发与打包有以下几个优势: 2.1

    2024年02月12日
    浏览(72)
  • Node.js入门与 Webpack模块打包工具

    目录 Node.js入门 fs模块-读写文件 path模块-路径处理  压缩前端html 认识URL中的端口号 http模块-创建Web服务 体验 Web 服务除了接口数据以外,还能返回网页资源等  Node.js模块化  ECMAScript标准-默认导出和导入 ECMAScript标准-命名导出和导入  包的概念 npm软件包管理器 npm安装所有依

    2024年02月11日
    浏览(44)
  • 十五、Webpack打包图片-js-Vue、Label命令、resolve模块解析

    为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两种: img元素,设置src属性; 其他元素(比如div),设置background-image的css属性; 这个时候我们打包会报错: 我们当前使用的webpack版本是webpack5: 在webpack5之前,加载这些资源我

    2024年02月09日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包