轻量级工具Vite到底牛在哪, 一文全知道 (2)

Vite本质上是针对各自库和复杂Web应用程序的,进行了优化的Web应用程序框架。以后一定会出现为Vite创建Vue + Vue路由器+ Vuex模板的形式,我们预感这会比Nuxt更好。不仅如此,对于React和Next.js,Svelte和Sapper / SvelteKit也是如此。

如果没有经过测试的Web应用程序框架可以选择所需的语言,Vite绝对是最优选择。

与其他后端集成

一般来说,不在Jamstack的代码库上的工作,基本都使用.NET或PHP作为后端。此时我们仍然可以使用Vite来优化JavaScript和CSS包,Vite具有专门针对此内容的后端集成内容(https://vitejs.dev/guide/backend-integration.html)。

按照说明进行操作之后,Vite会产生一个清单文件,其中包含有关所有产生的捆绑软件的信息。并可以读取此文件的CSS和JavaScript捆绑包,生成<link>和<script>标签。所有import都捆绑到中main.js,而所有动态import import('path/to/file.js')都单独捆绑。

表现

为什么选择Vite(https://vitejs.dev/guide/why.html)?
经过一些测试,给人留下了深刻的印象是Vite开发服务器可立即启动,并且通过替换热模块,每一次代码更改都会快速反映在浏览器中,有时甚至是即时显示。

在这里,测试者尝试导入了一个100kB的JavaScript库,并添加了2万行CSS,将文件类型更改为TypeScript和Sass,强制Vite分别使用TypeScript和Sass编译器进行编译。尽管会有一些延迟,但结果仍然远超预期。

开发人员经验

在以往的开发经验中,无论我们使用的是Grunt,Gulp,Rollup还是Webpack,这种大型复杂的项目都会花费不短的时间来调试并确保所有工具和插件都能正常运行。之后还会花更多的时间在修复错误上,改善捆绑软件能够优化并缩短其构建时间。

相比之下,Vite能轻而易举地做到。测试者尝试设置了四个堆栈,并且几乎立即对其进行了一些自定义设置。Vite消除了两个工具和插件的捆绑,并新增了很多友好的默认设置,甚至可以跳过配置并直接开始工作。

如果我们有特定的需求,Vite允许我们自行设置,可以覆盖Rollup和各种Rollup插件的配置。

项目中绑定的工具越多,整体就会越脆弱。如果一个组件发生故障或引入了重大更改,则整个流程将中断,我们必须再次深入研究每个工具和插件及其复杂性,以对其进行修复,Vite从根本上减轻了开发的负担。

总结

总而言之,Vite是对最近简化工具(如Parcel和Snowpack)趋势的补充。它精简的设置几乎就是外挂。

如果我们要使用前端框架,我们可能会选择Nuxt,Next.js,SvelteKit / Sapper或类似的产品。这些工具不仅简化了工具并加快了开发速度,而且还添加了许多复杂应用程序可能需要的插件,非常方便易用。

而如果我们要避免使用框架,但又需要缩小脚本和样式,Vite将会成为首选工具。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzppp.html