浅谈Vite：一个Vue.js 3.0专属的开发工具_vue vite.js

Vite

这个单词源自一个法语单词，有更快的意思。
也就是说它比过去基于Webpack的cli工具更快。

使用前的知识回顾

浏览器原生方式使用ES Module

• 现代浏览器都支持ES Module(IE除外)，即使用import/export导入导出模块。
• 通过下面的方式加载模块：<script type="module" src="xxx.js"></script>。
• 支持模块的script默认延迟加载
  • 类似于script标签设置defer；
  • 在文档解析完成后，触发 DOMContentLoaded 事件 前 执行。

vite VS vue-cli

vite 的快就是利用了浏览器支持的ES Module的方式，避免开发环境下打包，从而提升开发速度。Vue会开启一个测试服务器，拦截留篮球发送的请求，浏览器会想服务器发送请求获取相应的模块。Vite会对浏览器不识别的模块进行处理，比如import单文件组件的时候，也就是后缀名为.vue的文件时，会在服务器上对.vue文件进行编译，把编译的结果返回给浏览器。

• Vite 在开发模式下不需要打包，可以直接运行；