vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:
- 快速的冷启动,不需要等待打包操作;
- 即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
- 真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。
1第一个疑问
通过运行npm run dev
,可以观察到这个项目是秒级打开,打开调试器可以看到:
浏览器直接请求了.vue
文件,并且后面带了一些type参数。点击这些请求,简单查看一下文件返回内容:
//main.js
import { createApp } from '/@modules/vue.js'
import App from '/src/App.vue' //
import '/src/index.css?import' //
createApp(App).mount('#app')
最直观地看到这里:
- 将vue引用转化为
/@modules/vue.js
- 将
./App.vue
转换为/src/App.vue
- 将
./index.css
转化为/src/index.css?import