上手体验Vue3 Vite的魅力（“快”的艺术），有了它

目录结构跟平时的vue项目差不多，但是仔细观察，index.html文件放到了根目录下。当vite服务启动之后，服务器访问的目录就是该根目录。比如访问http://localhost:3000/package-lock.json

该文件就是我们根目录的package-lock.json

打开package.json，dependencies是vue3.0版本

项目也使用了vue3的新特性，如main.js中引入的是createApp而不是vue

组件里面的template标签下不止一个根标签，这也是vue3的其中一个特性

Vite的工作机制

Vite整体的工作机制，用简单的图表示：

根据图片来看，Vite实际上也是一个server，在启动vite构建web server后，即服务启动之后（如访问），我们访问这个地址，该页面会向web server发送请求，请求对应的文件，我们可以从network中看到，如下：

注意观察network里面的响应，我们会发现里面有两个App.vue，两个HelloWorld.vue，实际上这就是因为在我们请求这些文件的时候，被vite server拦截了，经过编译后才返回对应的内容。

打开network里面的HelloWorld.vue

对比我们项目里面的HelloWorld.vue，两个的内容是截然不同的

观察network中HelloWorld.vue里面的内容

import { render as __render } from “/src/components/HelloWorld.vue?type=template”

表示引入了HelloWorld.vue?type=template，正好network里面有HelloWorld.vue?type=template请求，打开查看response，这实际就是HelloWorld.vue中template编译之后的内容

这个工作机制也正是vite的速度快的原因，vite server拦截请求，只对请求的文件及其依赖的模块进行编译，那些没有被引用到的文件就不会被编译，做到了按需编译。

证明一下，查看当前的main.js，其引入了index.css

import { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

createApp(App).mount(‘#app’)

此时network中是会去请求index.css

修改main.js，去掉对index.css的引入

import { createApp } from ‘vue’

import App from ‘./App.vue’

//import ‘./index.css’

createApp(App).mount(‘#app’)

此时查看network中发现，index.css不去请求了

那么问题就来了，每次发请求都去拦截、编译，岂不是每次刷新页面都会重复之前的编译工作（即使页面没做更新）？答案是不会的。刚刚我们把index.css的引用去掉了，页面自动的刷新，观察上图中的状态码，除了几个为200，其他的大部分为403，这代表着这些请求用的是缓存里面的资源，而并没有重新去编译，合理利用浏览器的缓存机制，减少请求与编译，提升速度。

除了利用浏览器缓存外，vite本身也有一个缓存的机制，它会针对依赖的包做一个缓存，这里我们可以看一下network中main.js的response。

可以发现，我们对vue的引用，变成了对@modules下的vue.js的引用，在项目的目录，找到node_modules下的.vite_opt_cache文件夹可以找到vue.js文件。

与network里面的vue.js进行对比

network里面的vue.js就是vite缓存里面的vue.js，是对vue进行编译后生成的js文件，证明一下，现在在目录里面的vue.js文件添加一行代码：

刷新查看network中的vue.js，二者一致。实际上.vite_opt_cache就是用来存放被缓存的依赖包的，而这里不止缓存vue的依赖包，其他的依赖包也可以，比如这里我们引入一个axios 。

安装axios依赖包

npm i axios -S

此时package.json新增一个axios的依赖

在main.js中引入axios

import { createApp } from ‘vue’

import App from ‘./App.vue’

import ‘./index.css’

import { axios } from ‘axios’

createApp(App).mount(‘#app’)

观察network，axios已经进行编译，重新刷新，状态码304

刷新根目录，可以看到，.vite_opt_cache下多了一个axios.js

vite除了按需编译，通过这两种缓存，又一次提升了速度。有了它，你还会使用webpack吗？
最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它