Vite.js是用于现代web项目的快速开发工具。它通过改进开发体验来关注速度和性能。

Vite使用本地浏览器ES导入来支持现代浏览器，而无需构建过程。

Vite两个主要组成部分：

1.开发服务器支持热模块替换（HMR），用于在应用程序执行期间更新模块。当对应用程序的源代码进行更改时，只更新更改，而不是重新加载整个应用程序。此功能有助于加快开发时间。

2.build命令使开发人员能够将他们的代码与Rollup捆绑在一起，Rollup被预先配置为输出用于生产的高度优化的静态资产。

Vite的工作原理

当ES模块在ES2015中引入时，许多浏览器对ES6模块的支持很差。为了解决这个问题，现代浏览器现在支持原生ES模块。这允许开发人员以本机方式使用导入和导出语句。

在本机ES中，导入必须获得相对或绝对URL，因为它不支持裸模块导入，例如：

import { someMethod } from 'my-dep'

上面的代码将在浏览器中抛出一个错误，因为许多浏览器不支持ES6模块。所以现在的问题是Vite是如何处理的？

Vite将自动检测从源文件导入的裸模块，并对其执行以下两个操作：

1.Vite将预绑定源文件以加快页面加载并将CommonJS/UMD模块转换为ESM。

2.为了允许浏览器在不引发错误的情况下导入模块，Vite将把导入重写为这样的有效URL：

/node_modules/.vite/my-dep.js?v=f3sf2ebb

为什么使用Vite？

既然我们知道了Vite是什么以及它是如何工作的，你可能会想知道为什么要使用Vite。

1.表现

与Vite的ESbuild预绑定使其比使用任何其他JS绑定器都快10到100倍。这是因为它有助于提高页面速度并将CommonJS/UMD模块转换为ESM。

基于Vite文件，“预绑定步骤使用esbuild执行，使Vite的冷启动时间明显快于任何基于JavaScript的绑定程序。”

2.热模块更换（HMR）

Vite使用HMR功能来跟踪应用程序中的更改，而无需重新加载整个页面。使用HMR API，浏览器将只加载页面的修改部分，并且仍然保留应用程序的状态。

无需在应用程序中手动配置HMR API。它会在应用程序安装期间自动添加到您的项目中。

使用HMR性能，无论模块数量或应用程序大小如何，都可以设计更轻、更快的应用程序。

3.配置选项

Vite允许您通过使用Vite.config.js或Vite.config.ts扩展默认配置来更好地控制项目的配置。它们位于项目的基本根目录中。

您还可以使用--config CLI选项指定不同的配置文件，如下所示：

vite --config my-config.js

如何使用Vite

您必须在计算机上安装以下软件，然后才能创建Vite项目：

Node.js 12.2.0或更高版本（检查您的计算机上是否安装了Node，并在终端上运行Node-v）

Npm / Yarn

一旦你在电脑上安装了这些，你现在就可以创建一个Vite项目了。

如何创建Vite项目

要创建Vite应用程序，请打开终端并导航到要保存Vite程序的文件夹。然后运行此命令：

npm create @vitejs/app my-vite-app

注意：my_vite_app是我们要创建的vite应用程序的名称。你可以把它改成你喜欢的任何名字。

运行以上命令后，系统将提示您选择框架和模板（变体）。推荐使用React，但您可以选择任何熟悉的框架和模板。

接下来，运行以下命令以完成安装：

cd vite_applicationnpm install

npm install

安装可能需要几分钟时间，请耐心等待安装完成。

如何运行Vite应用程序

要在终端上运行Vite应用程序，请导航到应用程序文件夹（Vite_application），然后运行下面的dev命令来启动开发服务器：

npm run dev

运行以上命令将启动开发服务器。然后打开您的终端并输入http://localhost:3000.

您应该在浏览器中看到这样的内容：

Vite文件夹结构

让我们来看看Vite应用程序文件夹是如何组织的。我们还将详细查看一些文件夹和文件。

注意：如果使用不同的框架和模板，文件名将不相同。

1.node_modules文件夹

node_modules文件夹包含应用程序的所有必要依赖项，这些依赖项在package.json文件中指定。

运行npm install命令后，package.json中所有配置的依赖项都将下载到node_modules文件夹中。

将源代码推送到GitHub时，不需要推送node_modules文件夹，因为用户可以通过package.json安装应用程序中使用的所有必要依赖项。

您可以在应用程序父级的根目录中找到package.json文件。

2.src文件夹

src文件夹是我们在开发Vite应用程序时交互最多的文件夹之一。此文件夹包含app.jsx、main.jsx、app.css和index.js。

用程序的所有资产，如图像、视频和其他文件，都必须存储在src文件夹中，因为Vite会自动在index.html中重新设置所有URL的基础。

3.App.jsx和main.jsx

app.jsx文件是作为应用程序中使用的所有其他组件的容器的基本组件。

main.jsx文件是从index.html中获取根id并呈现应用程序中使用的所有组件的位置。

4.index.css和app.css

这些文件包含程序中使用的所有CSS样式。您可以添加自己的CSS文件或更改样式。

至此，我么已经对Vite及其工作原理和功能有了一定的了解。我们还简单讨论了如何创建Vite应用程序，希望这些在您的开发过程中有所帮助。

为了改进您的开发工作流程，并通过创建更轻、更快的应用程序来提高生产力，您可以通过学习VUE3.0从实战到源码全剖析技术实战课程来获取更多技能，其中包含但不限于vite工具实现原理的详细介绍，是IT领域从业者提升工作效率，提升竞争力的良好途径。

[1]