Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。
由尤雨溪开发。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打包。

它主要具有以下特点：

  • 快速的冷启动：开发服务器启动后不需要进行打包操作，启动非常迅速
  • 即时的模块热更新

真正的按需编译：代码在需要的时候进行编译，所以只有代码真正在屏幕上展现的时候才进行编译。开始开发的时候再也不需要等待整个应用编译完成

  1. npm init vite-app vite-test

image.png 

  1. cd vite-test
  2. npm install
  3. npm run dev

image.png

  1. http://localhost:3000/@modules/vue.js
  2. http://localhost:3000/src/App.vue
  3. http://localhost:3000/src/index.css?import
  4. http://localhost:3000/src/components/HelloWorld.vue
  5. http://localhost:3000/src/App.vue?type=template
  6. http://localhost:3000/src/components/HelloWorld.vue?type=template

浏览器直接请求了 .vue 文件，那么文件内容是如何做出解析的呢。项目是如何在不使用 webpack 等打包工具的条件下如何直接运行 vue 文件。

浏览器端使用 export import 的方式导入和导出模块，在 script 标签里设置 type="module" ，然后使用 ES module。正因如此，vite 高度依赖 module script 特性，也就意味着从这里开始抛弃了 IE 市场**。

当前 vite 尚处于实验性阶段，不适合用于生产环境。不过我很期待 vite 👀👀。
当前阶段（20200930）：In beta and will likely release 1.0 soon.

参考文档：