Webpack和Vite打包工具的具体工作流程以及区别

1.webpack和vite工作流程图

 2.vite优点:

  1.  webpack服务器启动速度比vite慢
  2. 由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显
  3. vite热更新比webpack快
  4. vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译,
  5. vite使用esbuild(Go 编) 预构建依赖,而webpack基于nodejs,比node快 10-100 倍

vite缺点:

  1. 生态不及webpack,加载器、插件不够主富
  2. 打包到生产环境时,vite使用传统的rolup进行打包,生产环境esbuild构建对于CSs和代码分割不够友好。所以,vite的优势是体现在开发阶段
  3. 没被大规模重度使用,会隐藏一些问题
  4. 项目的开发浏览器要支持esmodule,而目不能识别commonis语法

3.webpack和vite的工作流程及区别(通俗解释)

  1. webpack和vite的工作流程:
  2. webpack打包是先分析项目路由然后分析路由相对应的模块,然后全部打包,再调用服务器,所以编译速度较慢,没有用到的模块也全部打包了。
  3. vite是先调用服务器,直接准备好,然后看你请求的是哪一个路由然后只去打包哪一个路由所对应的模块,没有请求的路由就不去打包,做到了按需编译打包,不再等待整个应用编译完成,提高了编译运行时速度。
  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值