Vite是Vue的作者尤雨溪开发的Web开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。
Vite具有以下特点:
快速的冷启动即时热模块更新(HMR,Hot Module Replacement)真正按需编译Vite是在推出Vue 3的时候开发的,目前仅支持Vue 3.x,这意味着与Vue 3不兼容的库也不能与Vite一起使用。
使用Vite
与Vue CLI类似,Vite也提供用npm或者yarn来生成项目结构的方式。选择一个目录,打开命令提示窗口,依次执行下面的命令构建脚手架项目,并启动项目。
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
如果使用yarn,则依次执行下面的命令:
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
例如,创建的项目名为hello,执行完最后一个命令的结果如下图所示。
启动项目
由于Vite使用了浏览器原生的ES模块导入功能,但IE 11并不支持ES的模块导入,因此基于Vite开发项目,浏览器不能使用IE11,其他主流的浏览器均支持ES模块的模块功能。
打开Chrome浏览器,访问http://localhost:3000/,界面如下图所示。
hello项目的默认页面
使用Vite生成的项目结构如下图所示。
hello项目的目录结构
可以发现,Vite生成的脚手架项目的目录结构与Vue CLI生成的项目目录结构很类似,确实是这样的,而且开发方式也基本相同。不过Vite项目的默认配置文件是vite.config.js,而不是vue.config.js。
package.json文件的内容如下所示:
{
"name": "hello",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.2"
},
"devDependencies": {
"vite": "^1.0.0-rc.8",
"@vue/compiler-sfc": "^3.0.2"
}
}
如果要构建生产环境下应用的发布版本,只需要在终端窗口中执行下面的命令即可:
npm run build
虽然Vite的作者已经在背后做了很多工作,让我们能够沿用基于Vue CLI建立的脚手架项目的开发习惯,但仍然会有一些细微的差别,详细的介绍请参看Vite源码库的GitHub网址。
与Vue CLI的不同
主要区别在于,对于Vite,在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器,浏览器通过原生的<script module>支持解析这些语法,并为每次导入发起HTTP请求。dev服务器拦截请求,并在必要时执行代码转换。例如,导入到*.vue文件的内容在发送回浏览器之前被即时编译。
这种方法有几个优点:
因为没有打包工作要做,所以服务器冷启动非常快。代码是按需编译的,因此只有在当前页面上实际导入的代码才会编译。我们不必等到整个应用程序打包后才开始开发,这对于有几十个页面的应用程序来说是一个巨大的不同。热模块更新(HMR)的性能与模块总数解耦。这使得无论应用程序有多大,HMR都能保持快速。整个页面的重新加载可能比基于绑定包的设置稍慢,因为本机ES导入会导致具有深度导入链的网络瀑布。但是,由于这是本地开发,所以与实际编译时间相比,差异是很小的。由于已编译的文件缓存在内存中,因此在页面重新加载时没有编译开销。
简单来说,就是使用Vite来开发Vue 3项目可以减少不必要的等待项目重启或模块更新的时间,加快开发进度。在生成环境下,我们依然是需要对项目进行打包的,以避免频繁的网络请求,Vite也提供了一个vite build来实现这一点,我们在终端窗口中执行npm run build,实际执行的就是vite build命令。
我是专注于软件开发和IT教育的孙鑫老师,喜欢我的文章欢迎转发、评论、关注、点赞和收藏,我会经常与大家分享IT技术、编程语言的文章和教学视频。目前已发布完整的《Vue.js从入门到实战》教学视频,正在发布《Java无难事》教学视频。
Vue.js从入门到实战
举报/反馈

IT技术专家孙鑫

1787获赞 335粉丝
让学习编程再无难事!
关注
0
0
收藏
分享