Vite初体验

首先附上官方文档地址:Home | Vite⚡

全局安装vite:

npm install create-vite-app -g

yarn global add create-vite-app

全局安装的时候,现在会提示一个warning create-vite-app@1.21.0: create-vite-app has been deprecated. run `npm init @vitejs/app` or `yarn create @vitejs/app ` instead. 意思是现在不用全局安装了,可以直接使用yarn或者npm进行初始化,并且官方文档中也是推荐这种直接初始化的方式,但是声明了你的node版本必须大于等于12.0.0.

由于目前日常开发用的基本是vue,所以初始化的时候自动使用vue的模板:yarn create @vitejs/app demoname --template vue,创建了一个基于vue3.0的项目,但是这个项目中只是有了vue其他的什么都没有,接下来先yarn dev运行起来看一下,然后修改一点东西,会明显感觉到速度比以往使用webpack的方式快的不是一点半点。

项目结构
运行页面

在官方文档中有说明,webpack是确定入口以后,根据全部路由去加载特定的模块和依赖,然后整理集合成一个bundle,最后启动一个dev server去加载总的这些文件,而vite是首先启动一个dev server,然后根据当前显示的路由去匹配加载当前路由需要的模块和依赖,跳过了打包成一个bundle的过程,在拆分代码的过程中,仅需要服务当前路由页面使用的模块,那肯定会比webpack快很多。

目前先到这里,下一篇中会继续修改这个初始化的项目,变成一个我们熟悉的日常开发的目录结构,例如添加路由和vuex等

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容