总方针：是什么？从哪里来？要到哪里去？

一、是什么？

vite ------- vue 作者尤雨溪开发的web开发工具

它具有的特性：静态服务器、构建工具、轻量、开箱即用、极速模块热替换、内置Rollup 用于打包项目

作者在微博上的发言：

Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢。针对生产环境则可以把同一份代码用 rollup 打。虽然现在还比较粗糙，但这个方向我觉得是有潜力的，做得好可以彻底解决改一行代码等半天热更新的问题。

它的主要特点：基于浏览器 native 的 ES module (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 来开发，省略打包这个步骤，因为需要什么资源直接在浏览器里引入即可。

本质上是用C++ / Rust / Go 重写了依赖分析/模块构建能力，但是充分利用了已有的生态，使得开发成本极大降低。

二、从哪里来？

时下热门的打包构建工具有：parcel 、 rollup（es module/ tree shaking） 、 webpack(最强的性能、扩展能力强)

2.1 如何食用

命令行：npx create-vite-app <project-name>  /  yarn create vite-app <project-name>

  cd <project-name>

  npm install (or `yarn`)

  npm run dev (or `yarn dev`)

如下图即可食用：

2.2 背后的原理

2.2.1 如何去掉打包步骤？

打包的概念是开发者利用打包工具将应用各个模块集合在一起形成 bundle，以一定规则读取模块的代码——以便在不支持模块化的浏览器里使用。

为了在浏览器里加载各模块，打包工具会借助胶水代码用来组装各模块，比如 webpack 使用 map存放模块 id 和路径，使用 __webpack_require__ 方法获取模块导出。

vite 利用浏览器原生支持模块化导入这一特性，省略了对模块的组装，也就不需要生成 bundle，所以打包这一步就可以省略了。

2.2.2 如何实现按需加载？

webpack 之类的打包工具会将各模块提前打包进 bundle 里，但打包的过程是静态的——不管某个模块的代码是否执行到，这个模块都要打包到 bundle 里，这样的坏处就是随着项目越来越大打包后的 bundle 也越来越大。

开发者为了减少 bundle 大小，会使用动态引入 import() 的方式异步的加载模块（ 被引入模块依然需要提前打包)，又或者使用 tree shaking 等方式尽力的去掉未引用的模块，然而这些方式都不如 vite 的优雅，vite 可以只在需要某个模块的时候动态（借助 import() ）的引入它，而不需要提前打包，虽然只能用在开发环境，不过这就够了。

三、要到哪里去？

正如尤大大所言：彻底解决改一行代码等半天热更新的问题。咱们配好料就等饺子下锅了，真香！