Vite 3.0来了，你还在卷吗？

Vite官方介绍称：Vite下一代的前端工具链，为开发提供极速响应

V2.X

去年的2月，Vite 2.X发布。一经发布，便不断被广大的国产程序员点赞，使用率随之暴增，npm每周下载量超过百万次。

社区生态也随之更新，庞大的的生态系统随之构建。

Nuxt 3 / Storybook 兼容 webpack / Vite；SvelteKit, Astro, Solid 等等新兴框架全部转向 Vite，Shopify 基于 React 的新框架 Hydrogen 也全面押注 Vite。Vite有时间可谓成为大家的宠儿

V3.X

7月13日，Vite 3发布。更是鉴定每年发布一个大版本的基调。

Vite3发布内容：

1. 服务器端渲染将默认启用 ESM 格式；
2. Vite 3 支持相对路径格式（base 选项），允许将编译目标部署到不同的根目录下，无需重新编译；
3. 冷启动时，如果插件解析模块时注入了新的 import，Vite 不再重启；
4. Vite 3 的包体大小降低了 30%。

同时，Vue 3 将在 2022 年 2 月 7 日 成为新的默认版本！Vite的地位有多高就不言而喻了吧

就是要快

Vite和传统打包方式对比

PK Webpack

Vite 能不能干掉 webpack？不限定目标场景的话，肯定不可能，这个也本来就不是 Vite 的目标。如果限定 web 场景，其实也不会，因为 webpack 体量太大，还有 Next 和 Gatsby 这种已经跟它强耦合的大玩家，肯定会对它持续投入，死是肯定死不了的。再说直接一点，纠结这个问题根本没意义，因为开发新工具的目的不是 “干掉竞争对手”，而是让愿意用的人用得爽。我是不太明白为什么有些人总是用一种你死我活的心态去看待开源工具。我开发 Vite 的初衷是让 Vue 用户以后可以少等点 HMR 的时间，后来发现顺道可以让其它框架的用户也受益而已。

-- 尤大

总结

最后总结下Vite相关的优缺点：

• 优点：

• • 快速的冷启动: 采用No Bundle和esbuild预构建，速度远快于Webpack
  • 高效的热更新：基于ESM实现，同时利用HTTP头来加速整个页面的重新加载，增加缓存策略
  • 真正的按需加载: 基于浏览器ESM的支持，实现真正的按需加载

• 缺点

• • 生态：目前Vite的生态不如Webapck，不过我觉得生态也只是时间上的问题。
  • 生产环境由于esbuild对css和代码分割不友好使用Rollup进行打包

结语

Vite.js虽然才在构建打包场景兴起，但在很多场景下基本都会优于现有的解决方案。

用了Vite后，你会发现，真香！