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

时下大热的 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/back…

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

体现

为什么抉择 Vite（https://vitejs.dev/guide/why….
通过一些测试，给人留下了粗浅的印象是 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 将会成为首选工具。

拓展浏览

如果您好奇 Vite 到底有什么魔力？无妨让咱们通过理论搭建一款基于 Vue 3 组件的表格编辑零碎，亲自体验一把。

• 反对 Vue 框架的纯前端表格控件 SpreadJS