ViteConf 2023结束,现在的Vite发展如何?是时候使用Vite了么? |
您所在的位置:网站首页 › a站现在是什么公司的 › ViteConf 2023结束,现在的Vite发展如何?是时候使用Vite了么? |
![]() 博客:https://www.mintimate.cn Mintimate’s Blog,只为与你分享 ViteConf2023,主要讲解了Vite的发展、一些开发大牛分享Vite的使用,以及一些框架对Vite的适配,看着确实让人激情澎湃,那么?已经2023年了,Vite现在发展怎么样呢?现在是时候切换到Vite么? ViteConf这里再开一个小标题,如何大家想会看ViteConf的录像,可以取官网: ViteConf: https://viteconf.org/23/replay/welcome![]() 其实,我个人比较感兴趣的是Nuxt,毕竟我最近用的就是Nuxt3 + TailWindCSS,用Vite作为构建工具。 当然,很多开发者可能对尤雨溪的“The State of Vite”更感兴趣,本次我们就来介绍一下Vite的发展,同时融合看看现在使用Vite怎么样? Vite4.x版本发展首先,根据项目地址最新的公共: Vite Github项目地址: https://github.com/vitejs/viteVite处于4.5版本,同时5.0版本处于准备开发的状态,停止支持已经过时的Node.js版本,并且Vite 正在弃用 CommonJS API。 相信很多人还在使用Nodejs v16.x去开项目,甚至很多旧的项目还是Nodejs v10或者v12(╯—﹏—)╯( ┷━━━┷ 小版本更新上,主要就是不停修bug和性能优化,期间适配了一些第三方框架,比如:lightning-css。 ![]() 尤其是Vite4.3,相比2.x版本,大幅度优化冷启动性能: ![]() “唯一能比Vite快的构建工具,那就是下一代的Vite( ◔ ڼ ◔ )” ![]() 总体来说,Vite 4.x专注于性能、稳定性和开发体验的改进。当然,还有生态系统的融合。每个版本都在迭代优化,使Vite成为一个更快、更易用的前端构建工具。 Vite生态Vite横空出世就惊艳全场,最开始作为Vue的构建工具,就已经感受到Vite的强大和迅速,是真的快如闪电的迅速⚡: 极速的服务器启动: 利用ES modules的原生支持,Vite可以实现即时的模块热更新,无需打包就可以直接在浏览器中运行。服务器启动时间可以瞬间完成。超快的热模块更新(HMR):Vite的HMR速度更快,可以直接更新函数体,而不是对整个页面进行重新加载。Webpack4.x开始其实也有很不错的HMR生态支撑,但是历史包袱太重,重载模块还是较慢。按需编译:Vite只在浏览器请求时才对源代码进行编译,省去了大量不必要的打包时间;这点其实要电脑性能足够,我用过公司的六代i5标压电脑,可以说…… Vite也救不了。轻量快速的打包:基于Rollup + esbuild实现快速打包,并生成高效的代码。良好的开发体验:集成了开发服务器,支持自动刷新,类似开发SPA体验。![]() 支持静态资源服务:可以作为静态资源服务器,快速高效。 接下来,我们看看Vite的生态如何。主要看看各大UI/应用的框架。 VueVue自然不必多说,Vue2时代,使用VueCli(基于Webpack)进行创建脚手架项目,Vue3开始官方推荐使用create-vue: ![]() ![]() 使用create-vue可以初始化基于Vite的Vue2/3脚手架项目。 当然,你也可以选择使用其他第三方组件初始化Vue项目来获得更好的SEO(比如后文介绍的Nuxt)。 React使用Vite的create vite支持直接初始化React模板;与此同时,create vite支持其他的模板: JavaScript TypeScript vanilla vanilla-ts vue vue-ts react react-ts preact preact-ts lit lit-ts svelte svelte-ts solid solid-ts qwik qwik-ts 值得注意的是,模板内使用的插件,是Vite团队维护,非React官方团队: vite-plugin-react: https://github.com/vitejs/vite-plugin-react![]() 但是用React,为了更好的SEO和SSR支持,很难不用Next.js;在SSR方面,Vite构建Next.js就比较麻烦了,加上Next.js目前发布的TurboPack: ![]() 也是对标Vite的;所以,在React项目内,使用Vite可以,但是官方也有发布构建工具,不知道大家用什么呢?换作我的话…… TurboPack目前还不成熟,可能还是用Vite初始化项目或者继续Webpack5…… Nuxt两大热门框架说完,接下来我们说说Nuxt: https://nuxt.com/。Nuxt是什么呢?在我看来,Nuxt主要的特点: 全面支持和使用Vite: Nuxt3版本开始,默认使用Vite作为构建工具,当然你也可以切换为Webpack5,但是我觉得大部分人不会这么做;采用动态生成和静态生成并存的 Hybrid 模式,可以很好地支持服务端渲染和静态站点生成。基本可以算是Next3的Vue版本;这个也是我目前在使用的Web框架,用于解决搜索引擎的渲染问题: ![]() 也是全面支持Vite,默认的配置就是使用Vite并且完成了封装: ![]() 查看依赖: ![]() 可以说,在Vite生态里,Nuxt绝对是首屈一指。 VitePress看完了Nuxt应用框架,如果写文档呢? 在Vue2时期,配合Webpack,我们可以使用VuePress轻松完成一个文档的部署工作,现在VuePress也在适配Vite:https://v2.vuepress.vuejs.org/: ![]() 但是,这里要介绍的是VitePress: https://vitepress.dev/ ![]() 当然,可能是VitePress支持Vite比较早,又是在早期Vite生态支持还不完善时的模范项目,VuePress的Star比VitePress少很多: ![]() 不过,我最近开文档,使用VitePress的直观感受: 操作方便: 相当于VuePress,VitePress的配置比较少,配置相对简单;当然,要更加多的自定义功能,大部分就需要自己编写,也是有些麻烦。编译和启动快: 基于Vite,启动十分快。社区活跃: 可能是目前官方Vite文档也是用VitePress的原因?目前VitePress的Github讨论比较活跃,issue能快速响应。More当然,还有其他框架也在逐渐适配Vite,比如:Angular在5月份支持使用Vite作为构建工具。 ![]() 为什么Angular CLI开始使用Vite? 早期测试显示,Angular CLI独立使用Vite作为开发服务器,在冷启动的生产构建中有超过72%的性能提升。 不使用Vite的观点其实社区上的观点也看了很多,不推荐使用Vite的声音也很多,我们来看看。 webpack可以运行时检查代码规范,但是vite依旧不可以 个人观点: 这个可能是早期的问题了;目前代码规范的检查,主要有两类: 编译器检查: WebStrom等编译器在默认情况下就有的代码高亮和代码检查;eslint语法检查: 强大的代码规范和风格检查工具,可以自定义规则来约束代码,并结合git hook等实现自动检查(WebStrom也支持载入ESlint语法检查)。webpack运行时的语法检查,应该就是指ESlint语法检查了,其实现在Vite也有ESlint插件了,比如: vite-plugin-eslint: https://github.com/gxmari007/vite-plugin-eslintVite不停“造轮子”,前期兼容Rollup,现在开发Rolldown,学习成本太高 个人观点: 这个确实麻烦,Vite的发展确实很快;之前看到Vite支持了Rollup,我就去看了Rollup,现在好不容易熟悉了,官方说Rolldown在开发中…… 不过这个也无法避免,工具总是不断优化迭代的,有意义的“造轮子”,可以不断解决现有问题,是应该推崇的。据我所知,如果 Rolldown 顺利,可以解决开发和生产环境 bundler 不一致的问题,还是挺不错的。 是否使用ViteViteConf2023 确实展示了 Vite 强大的生态系统和活跃的社区。尤雨溪的 "The State of Vite" 演讲总结了 Vite 的发展历程,以及下一步的计划。目前 Vite 已经发展成熟,被许多主流框架默认支持或者建议使用,比如 Vue、React、Nuxt等。其超快的启动速度、模块热更新和按需编译等特性,大大提升了前端开发体验。 至于是否使用Vite? 我个人觉得,对于个人开发者和学生群体,现在是一个非常好的时机。Vite 的生态已经足够完善,文档和学习资料也很丰富。无论是创建新项目还是将旧项目迁移到 Vite,都不会遇到明显的阻碍。 当然,也要看场景;一些企业不重视前端,或者只是使用Vue2作为企业内部系统的使用,它们甚至可以使用Vue2 + Element UI或者Webpack4 + Vue2退休;正如现在很多企业还在使用JQ开设新的项目一样。 记得刚开始Vite横空出世,基本除了Vue,没有什么适配Vite的框架;一些SSG、SSR的插件甚至根本不支持Vite; 但是现在Vite已经被各大框架说接受,不管是Web App还是文档框架,都证明了Vite的可行,新的项目可以使用Vite进行初始化了,它已经足够稳定。 对于旧的项目,是否要重构到Vite呢? 每个企业有每个企业的取舍,我个人认为旧的项目,“屎山”还是不要碰了。 END好啦,本次的分享就到这里~~ 具体要不要用,取决于自己啦。反正我是上车了。 ![]() 我正在参与2023腾讯技术创作特训营第二期有奖征文,瓜分万元奖池和键盘手表 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |