Vite是什么？
Vite (French word for "quick", pronounced /vit/, like "veet") is a new breed of frontend build tool that significantly improves the frontend development experience
是一个由原生 ES Module 驱动的 Web 开发构建工具特点就是快。
Why Vite？
-
更快
-
在一些老的工程尤其是Webpack2或者Webpack3的项目你会发现首次启动好多都超过三十秒甚至一分钟，及时使用热更新至少都要等好几秒才能看到效果。但自从浏览器支持ES之后，vite将更多的操作放在浏览器上例如接管了打包程序的部分工作和用HTTP头来加速加载，浏览器会根据请求头进行缓存。
-
开箱即用
-
虽然webpack现在也在强调开箱即用配置越来越少用尤玉溪的话说webpack core 因为只针对打包不预设场景，所以设计得极其灵活，不局限于针对 web 打包，几乎所有可配置的环节都做成了可配置的。，但Vite的选择是缩窄预设场景来降低复杂度。如果预设了 web 的场景，那么大部分常见的 web 构建需求都可以直接做成默认内置。由于内置，可以适当的增加各个环节之间的耦合来进一步降低复杂度。
-
支持度高
-
caniuse可以查询到ES Module支持度已经很高了所以凡是支持ES Module的都可以用Vite
image
-
Not only Vue
-
不要因为Vite是专门针对Vue开发的，通过官方文档我们可以发现Vite现在已经支持了绝大多数框架且可以直接通过指令生成模板使用他们。
vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts
Webpack VS Vite
image
image
先上两张官网的图 Webpack基于图1 Vite基于图2，可以清晰地发现Vite少了一步bundle的部分，没错Vite的bundless的。无论Webpack怎么进化都需要bundle,而Vite是浏览器直接加载资源。
我们直接用react来对比在冷启动情况下加载的时间。
- Webpack我们使用当下最流行create-react-app (v5.0.0基于webpack5)
- Vite (v2.7.0) 我们基于模板命令
<pre data-language="plain" id="m7szJ" class="ne-codeblock language-plain" style="border: 1px solid #e8e8e8; border-radius: 2px; background: #f9f9f9; padding: 16px; font-size: 13px; color: #595959">yarn create vite my-vite-vue3-app --template react-ts</pre>
同时启动:
image
image
我们发现就算基于Wbpack5还是Vite要快，但随着项目工程上去后，Webpack会越来越慢，这不是说Webpack不好，是Webpack最初设计的机制决定的，Webpack是重配置可配性更好。
当然Vite也是可配的虽然灵活性肯定比不上Webpack。
不是KPI项目
相信大家很多人都吃过亏，在某些生产项目上使用某开源框架或包突然就不更新了，然后团队去做其他事了，出了问题团队又不会维护你又不能更换框架，只能自己改源码，这样积累下去会越来越恼火。
但是Vite这个项目至少对于Vue来说是一个非常不错的选择，尤玉溪已经说了Vue 以后官方工具全部基于 Vite，且目前截止至2021年12月npm下载量超百万且周下载量超过30w。SvelteKit, Astro, Solid 等等新兴框架全部转向 Vite，Shopify 基于 React 的新框架 Hydrogen 也全面押注 Vite。
关于Vite生态的介绍
结论就是我们完全可以在生产环境用上Vite, 早用早享受。
网友评论