轻量级工具Vite到底牛在哪, 一文全知道

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

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