Vue3 中的脚手架工具Vite到底牛在哪, 一文全知道

Vue是一套用于构建用户界面的渐进式框架，与其它大型 JS 框架不同，Vue 被设计为可以自底向上逐层应用，更易上手，还便于与第三方库或既有项目整合，因此，Vue完全能够为复杂的单页应用提供驱动。

伴随着 Vue.js 3.0 的正式发布，这款优秀的前端开发框架迎来了一款轻量级的环境构建工具——Vite。Vite 是一个由原生 ESM 驱动的 Web 开发构建工具，在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。

今天，我们一起来了解一下这个新成员吧。

Vite 的特点：

和 Webpack相比，Vite 具有以下特点：

• 快速的冷启动，不需要等待打包
• 即时的热模块更新
• 真正的按需编译，不用等待整个项目编译完成

由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。看来，连尤大神都难逃“真香”理论。

Vite 的背景与工作方式

在过去Webpack、Rollup 等构建工具作为主场明星时，Vue 的代码都是基于 ES Module 规范去写的。一个巨大的依赖图能够通过import 和 export的桥梁在文件之间被完美搭建起来。这些工具在进行本地调试的时候会把模块预先打包成浏览器可读的js bundle格式，为了进行这一过程的优化，就出现了懒加载这种方式，但懒加载并不能解决构建的问题，Webpack依旧需要提前构建异步路由需要的模块。

随着我们的项目逐渐变大，项目启动的速度也会越来越慢。

而Vite则避开了这一点，它顺应时代潮流而产生的，继承了诸多前辈的优点。例如已经基本上将框架编译掉的Svelte或是Snowpack，这些工具能够利用现代JavaScript功能（例如ES模块）来提供更平稳，更快速的开发体验，几乎不需要配置，也不需要依赖于太多已安装软件包。Vite能够直接利用浏览器本机的ES模块进行开发环境搭建，并且直接放弃捆绑步骤，比如直接在 html 文件里写出这样的代码：

// index.html

createApp(Main).mount(’#app’)

无论我们的应用程序大小如何，HMR都能稳定的快速更新。捆绑生产时，Vite附带了一个预配置的构建命令，该命令可以立即进行许多性能优化。此外，Vite还能提供热模块替换，这意味着我们在开发过程中，可以在浏览器中看到代码刷新，甚至可以使用它来编译项目的精简版本，并直接用于生产。通过使用它，我们可以快速启动Vue或React项目，而无需再使用Vue CLI或Create React App。高效、快速就是它的代名词。

有趣的事情是：“ Vite”这个名字来自法语单词“ fast”，发音为“ vit”。

vite 的使用方式

同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，使用 yarn 在终端执行：

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

即可初始化一个 vite 项目（默认应用模板为 vue3.x），生成的项目结构十分简洁：

|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json执行 yarn dev 即可启动应用 。

vite 启动链路

命令解析

这部分代码在 src/node/cli.ts 里，主要内容是借助 minimist —— 一个轻量级的命令解析工具解析 npm scripts，解析的函数是 resolveOptions ，精简后的代码片段如下。

function resolveOptions() {
    // command 可以是 dev/build/optimize
    if (argv._[0]) {
        argv.command = argv._[0];
    }
    return argv;
}

拿到 options 后，会根据 options.command 的值判断是执行在开发环境需要的 runServe 命令或生产环境需要的 runBuild 命令。

if (!options.command || options.command === 'serve') {
    runServe(options)
 } else if (options.command === 'build') {
    runBuild(options)
 } else if (options.command === 'optimize') {
    runOptimize(options)
 }

在 runServe 方法中，执行 server 模块的创建开发服务器方法，同样在 runBuild 中执行 build 模块的构建方法。最新的版本中还增加了 optimize 命令的支持。

Vite 的作用

去掉打包步骤

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

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

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

实现按需打包

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

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

vite 如何处理 ESM

vite 在浏览器里使用 ES module 是使用 http 请求拿到模块，所以 vite 必须提供一个 web server 去代理这些模块，上文中提到的 koa 就是负责这个事情，vite 通过对请求路径的劫持获取资源的内容返回给浏览器，不过 vite 对于模块导入做了特殊处理。

开发人员经验

在以往的开发经验中，无论我们使用的是Grunt，Gulp，Rollup还是Webpack，这种大型复杂的项目都会花费不短的时间来调试并确保所有工具和插件都能正常运行。之后还会花更多的时间在修复错误上，改善捆绑软件能够优化并缩短其构建时间。

相比之下，Vite能轻而易举地做到。测试者尝试设置了四个堆栈，并且几乎立即对其进行了一些自定义设置。Vite消除了两个工具和插件的捆绑，并新增了很多友好的默认设置，甚至可以跳过配置并直接开始工作。

如果我们有特定的需求，Vite允许我们自行设置，可以覆盖Rollup和各种Rollup插件的配置。

项目中绑定的工具越多，整体就会越脆弱。如果一个组件发生故障或引入了重大更改，则整个流程将中断，我们必须再次深入研究每个工具和插件及其复杂性，以对其进行修复，Vite从根本上减轻了开发的负担。

总结

总而言之，Vite是对最近简化工具（如Parcel和Snowpack）趋势的补充。它精简的设置几乎就是外挂。

如果我们要使用前端框架，我们可能会选择Nuxt，Next.js，SvelteKit / Sapper或类似的产品。这些工具不仅简化了工具并加快了开发速度，而且还添加了许多复杂应用程序可能需要的插件，非常方便易用。

而如果我们要避免使用框架，但又需要缩小脚本和样式，Vite将会成为首选工具。

拓展阅读

如果您好奇Vite究竟有什么魔力？不妨让我们通过实际搭建一款基于Vue 3组件的表格编辑系统，亲自体验一把。

• 支持 Vue 框架的纯前端表格控件 SpreadJS