如果近期你有关注 Vue 的动态，就能发现 Vue 作者最近一直在捣鼓的新工具 vite。vite 1.0 目前已经进入了 rc 版本，马上就要正式发布 1.0 的版本了。几个月前，尤雨溪就已经在微博介绍过了 vite ，是一个基于浏览器原生 ESM 的开发服务器。

早期 Webpack 刚出来的时候，是为了解决低版本浏览器不支持 ESM 模块化的问题，将各个分散的 JavaScript 模块合并成一个文件，同时将多个 JavaScript 脚本文件合并成一个文件，减少 HTTP 请求的数量，有助于提升页面首次访问的速度。后期 Webpack 乘胜追击，引入了 Loader、Plugin 机制，提供了各种构建相关的能力（babel转义、css合并、代码压缩），取代了同期的 Browserify、Gulp。

如今，HTTP/2 的盛行，HTTP/3 也即将发行，再加上 5G 网络的商用，减少 HTTP 请求数量起到的作用已经微乎其微，而且新版的浏览器基本已经支持了 ESM（<script module>）。

上手 vite

vite 带着它的历史使命随之出现。由于省略了打包的过程，首次启动 vite 的时候可谓秒开。可以看下我录制的 Gif 图，完全无需等待就能进入开发。

想要尝试 vite ，可以直接通过如下命令：

$ npm init vite-app $ cd $ npm install
$ npm run dev

npm init vite-app 命令会执行 npx create-vite-app，从 npm 上拉取 create-vite-app 模块，然后通过对应的模板生成模板文件到指定文件夹。

{
"name": "vite-app",
"version": "0.0.1",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0-rc.1"
},
"devDependencies": {
"vite": "^1.0.0-rc.1",
"@vue/compiler-sfc": "^3.0.0-rc.1"
}
}

} 

目前 vite 都是和 vue 3 搭配使用，如果要在 vue 2 使用 vite 估计还得等正式版发布。当然，能上 vue 3 还是上 vue 3 吧，无论性能、包大小还有 ts 加持方面，vue 3 都远优于 vue 2 。除了 vue，vite 还提供了 react、preat 相关的模板。

生成的 vue 项目的目录结构如下。

项目的入口为 index.html，html 文件中直接使用了浏览器原生的 ESM（type="module"） 能力。

<script type="module" src="/src/main.js"></script>

所有的 js 文件经过 vite 处理后，其 import 的模块路径都会被修改，在前面加上 /@modules/。当浏览器请求 import 模块的时候，vite 会在 node_modules 中找到对应的文件进行返回。

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

这样就省略了打包的过程，大大提升了开发效率。当然 vite 也提供了生产模式，利用 Rollup 进行构建。