Vite热更新为什么比Webpack热更新快,Webpack与Vite热更新差异对比

frontend 投稿 1500 0 评论

      Webpack热更新慢的问题可以通过 babel-plugin-dynamic-import-node 插件来得到明显改善,或者通过手动实现动态按需加载(修改entry为当前项目中需要编译的部分或模块)亦可大幅提升热更新速度;

       热更新构建主要流程

Vite热更新为什么比Webpack热更新快,Webpack与Vite热更新差异对比

     首先看json文件,发出请求返回的结果中有一个c参数和一个h参数,c代表的是本次热更新要对应的是c模块,h代表的是本次热更新重新编译的过程中新生成的hash值,将作为下一次热更新请求编译后生成的文件前缀使用;

    Vite中热更新构建过程也是类似,Vite是在本地启动Vite Server服务,通过WebSocket与浏览器进行连接通信,并加入了WebSocket的定时心跳检测机制,拿到已修改更新的文件路径以及时间戳标识,然后再次带上这个时间戳作为参数去重新请求该文件修改后的版本,防止缓存;

 Vite热更新为什么比Webpack热更新快,Webpack与Vite热更新差异对比

       热更新边界

       正常来说我们Vue文件会正常热更新,因为Vue底层部分对热更新进行了自定义逻辑处理,重新定义了热更新的处理方式;但是当我们修改js文件或者ts文件,并且这个js或者ts文件刚好被.vue文件所引用,这个时候会怎么处理?

       当js或者ts文件被修改之后,会沿着依赖树一直往上寻找依赖关系,直到查找到最近的一个可以热更新的模块,这个最近的一个热更新模块叫热更新边界;

       Vite热更新为什么比Webpack热更新快?

        Webpack会遍历你的应用程序中的所有文件,并启动一个开发服务器(Webpack-dev-server),然后将整个代码渲染到开发环境中。从entry入口文件开始,将其依赖的资源文件通过loader打包成一个文件夹,然后通过server传递到客户端运行;也正是因为这样的运行机制,也必将导致项目代码量增多,应用体积增大之后,Webpack热更新需要等待较久的时间才能反映到浏览器中;

        Vite热更新运行机制:

       使用keep-alive组件导致热更新对ts文件失效,如何解决?

        解决方案:

 Vite热更新为什么比Webpack热更新快,Webpack与Vite热更新差异对比

     Vite劣势:

     有好必有坏,Vite目前的机制是会大幅提高热更新的速度,解决Webpack机制中的巨型项目热更新等待过久的问题,提高开发效率;但是同时也正是因为Vite的运行机制,直接浏览器按需向服务端请求资源,这就造成了Vite项目的首屏加载没有Webpack快,因为Vite首屏的时候会发出大量的请求去拿到资源文件从而渲染页面,而Webpack不需要;同时懒加载性能方面,Vite也没有Webpack好;但是首屏渲染这个问题只是第一次加载的时候会比较慢,Vite对第三方依赖做了缓存处理,第二次之后的页面加载速度提升很多;总体来说,Vite是优大于劣;

编程学习分享 » Vite热更新为什么比Webpack热更新快,Webpack与Vite热更新差异对比

赞 (0) or 分享 (0)
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽

高效,专业,符合SEO

联系我们