首页> 前端开发> vite介绍

[文章]vite介绍

收藏
0 5507 0

【摘要】

前段时间Vue的作者尤雨溪在Vue3.0 beta直播中提到了一个vite的工具,其描述是:针对Vue单页面组件的无打包开发服务器,可以在浏览器运行请求的vue文件。

【正文】

   什么是Vite

借用作者的原话:“Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。虽然现在还比较粗糙,但这个方向我觉得是有潜力的,做得好可以彻底解决改一行代码等半天热更新的问题。”

Vite的实现离不开现代浏览器原生支持的模块功能。如下:

<script type="module">

import { a } from './a.js'

</script>

当声明一个script标签类型为module时,浏览器对其内部的import引用发起HTTP请求获取模块内容。比如上述,浏览器将发起一个对HOST/a.jsHTTP请求,获取到内容之后再执行。

Vite劫持了这些请求,并在后端进行相应的处理(比如将Vue文件拆分成templatestylescript三个部分),然后再返回浏览器。由于浏览器只会对用到的模块发起HTTP请求,所以Vite没必要对项目里的所有文件先打包后返回,而是只编译浏览器发起HTTP请求的模块即可。

   Vite使用

         运行项目后Vite的服务器会跑在3000端口

 


 

前端开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}