Vite和webpack、rollup打包工具对比

Vite是什么

一种前端构建工具,由两部分组成:

  • 一个基于浏览器原生ES模块的开发服务器。利用浏览器去解析模块,在服务端按需编译返回,完全跳过了打包这个概念。同时另有Vue文件支持,还搞定了热更新,而且热更新的速度不会随着模块增加而变慢
  • 一套构建指令,它使用 Rollup 打包代码,并且是预配置的,可输出用于生产环境的高度优化过的静态资源。
  • 兼容性注意,Vite2 需要Node版本 >= 12.0.0。

rollup 、webpack、vite的区别

  • rollup更适合打包库,webpack更适合打包项目,vite基于rollup实现了热更新也适合打包项目。
  • rollup基于esm打包,打包生成的文件更小。Rollup不支持HMR(识别commonJs需要插件)
  • rollup原生支持tree-shaking,webpack2开始支持且消除效果不好。
  • webpack支持代码切割。(分包)
  • webpack支持HMR。(热更新)
  • vite在生产环境通过rollup进行打包(打包体积小),生成esm模块包。(快)
  • vite在开发环境时,基于浏览器支持esm,让浏览器解析模块,然后服务器按需编译返回。同时基于esbuild进行预构建(开发环境)打包不常变动的第三包,并进行缓存。(缓存+快)
  • Vite 同时利用 HTTP 头来加速整个页面的重新加载(再次让浏览器为我们做更多事情),源码模块的请求会根据 304 Not Modified 进行协商缓存,而依赖模块请求则会通过 Cache-Control: max-age,immutable 进行强缓存,因此一旦被缓存它们将不需要再次请求。
  • vite热更新,实现按需编译,按模块更新。webpack需要全部重新编译并更新。(快)

为什么选 Vite

webpack:分析各个模块之间的依赖,然后进行编译,打包后的代码在本地服务器渲染。随着模块增多,打包的体积变大,造成热更新速度变慢,文件修改后的效果也需要几秒钟甚至更长时间才能在浏览器中反映出来。如此循环往复,迟钝的反馈会极大地影响开发者的开发效率和幸福感。

vite:vite启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite可按需动态编译缩减时间。当项目越复杂、模块越多的情况下,vite明显优于webpack。

webpack是基于nodejs构建,js是以毫秒计数。

vite是基于esbulid预构建依赖,可提高页面加载速度,esbulid是采用go语言编写的,go语言是纳秒级别的。

Vite采用了ES模块来实现模块的加载。目前基于web标准的ES模块已经覆盖了超过90%的浏览器。

Tree-shaking

tree shaking 是一个术语。通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。这个概念早在 1990 年就已经被提出,但直到ES6规范被提出之后,才被应用起来,因为它依赖于 ES6 模块语法的静态结构特性,例如 import和export,它会在运行过程中静态分析模块之间的导入导出,确定 ESM 模块中哪些导出值未曾被其它模块使用,并将其删除,以此实现打包产物的优化。

如下所示的代码是不被允许的:

if(condition) { import foo from "foo" } else { import bar from "bar" }

相反,我们必须在任何条件之外定义全局范围内的所有导入。

import foo

  • 8
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值