轻量级工具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/backend-integration.html)。

　　按照说明进行操作之后，Vite会产生一个清单文件，其中包含有关所有产生的捆绑软件的信息。并可以读取此文件的CSS和JavaScript捆绑包，生成和