转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

时下大热的 vue 框架又来了新开发环境构建工具Vite,今天我们一起来了解一下这个新成员。

背景与工作方式

在过去 Webpack 、Rollup 等构建工具作为主场明星时，我们的代码都是基于 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”。

首次安装

如果要根据本指南进行操作，需要先在计算机上安装 Node 的副本。

运行npm init @vitejs/app之后，我们可以选择一个项目名称和一个模板。选项包括：

vanilla vue vue-ts react react-ts preact preact-ts lit-element lit-element-ts svelte svelte-ts 

选择 vanilla 后会生成一个目录（基于项目名称），其中包含一些文件，包括index.html，main.js，style.css，favicon.svg，和 NPM 和 Git 。在package.json中只包含 vite 的依赖和一些脚本来构建并启动开发环境。

之后进入项目文件夹并安装依赖项：

cd vite-project npm install 

然后，我们可以使用启动服务器 npm run dev 并在 http：// localhost：3000 /上查看我们的应用程序。此时修改任何项目文件的内容都可以立即被看到。

运行npm run build，同时将项目编译到一个 dist 文件夹中，可以在其中找到 Javascript 和 CSS 文件，我们会发现这两个文件似乎都缩小了。

Vite 的文档中提到，对于 TypeScript 文件可以开箱即用。因此，尽管 vanilla 选项没有专用的 TypeScript 模板，但我们应该能够将其重命名 main.js ，为 main.tsVite 并自动对其进行编译。当我们把文件重命名并添加一些 TypeScript 特定的语法后，所有文件都可以更好的进行编译。

使用 CSS 时，有人会将其重命名为CSSstyle.scss，并添加一些特定于 Sass 的语法。控制台和网页上均显示以下错误：

运行 npm install sass --save-dev 并重新启动观察程序后，就可以使用 Sass 满足我们的需求了。

通常，我们会事先考虑一下堆栈安装所需的依赖项，这需要花费大量的时间进行配置，使某些工具可以更好配合我们的工作。所以在使用 Vite 时也优先考虑堆栈。 在实际使用中 Vite 令人惊叹，我们可以在一两分钟内就建立一个非常高级的堆栈，并且能够轻松完成从 Javascript 到 TypeScript 的转换以及从 CSS 到 Sass 的转换。鉴于 Vite 使用 anindex.html 作为切入点并构建为纯 HTML，CSS 和 Javascript 的特性，毫无疑问它是一个是用于静态站点和潜在的 Jamstack 应用程序的出色工具。

单页申请

接着我们来设置一个单页应用程序，试试 Vue

运行npm init @vitejs/app并选择 Vue 模板后，可以获得 Vite，Vue 和一个来编译 Vue 的 Vite 插件。如果要构建 SPA，则可能要处理路由，继续安装 Vue Router 。

我们在项目中得到了简单的 Vue 设置，并插入 Vue 的内容。安装 vue-router 并配置 Vue 之后即可工作。调整 Vite 的汇总配置之后，我们可以使用 Vite 创建多个页面，如文档中的多页应用。

通过在社区中提供的插件vite-plugin-vue-router，我们可以像使用 Nuxt 一样，基于文件路径生成路由器。

Vite 本质上是针对各自库和复杂 Web 应用程序的，进行了优化的 Web 应用程序框架。以后一定会出现为 Vite 创建 Vue + Vue 路由器+ Vuex 模板的形式，我们预感这会比 Nuxt 更好。不仅如此，对于 React 和 Next.js ，Svelte 和 Sapper / SvelteKit 也是如此。

如果没有经过测试的 Web 应用程序框架可以选择所需的语言，Vite 绝对是最优选择。

与其他后端集成

一般来说，不在 Jamstack 的代码库上的工作，基本都使用.NET 或 PHP 作为后端。此时我们仍然可以使用 Vite 来优化 Javascript 和 CSS 包，Vite 具有专门针对此内容的后端集成内容（ https://vitejs.dev/guide/backend-integration.html ）。

按照说明进行操作之后，Vite 会产生一个清单文件，其中包含有关所有产生的捆绑软件的信息。并可以读取此文件的 CSS 和 Javascript 捆绑包，生成<link>和<script>标签。所有 import 都捆绑到中 main.js ，而所有动态 import import('path/to/file.js')都单独捆绑。

表现

为什么选择 Vite （ https://vitejs.dev/guide/why.html ）？ 经过一些测试，给人留下了深刻的印象是 Vite 开发服务器可立即启动，并且通过替换热模块，每一次代码更改都会快速反映在浏览器中，有时甚至是即时显示。

在这里，测试者尝试导入了一个 100kB 的 Javascript 库，并添加了 2 万行 CSS，将文件类型更改为 TypeScript 和 Sass，强制 Vite 分别使用 TypeScript 和 Sass 编译器进行编译。尽管会有一些延迟，但结果仍然远超预期。

开发人员经验

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

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

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

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

总结

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

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

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