什么是Vite？

vite是一种强调速度和简单性的网络开发的现代构建工具。它使用本机ES模块在开发过程中提供闪电般的性能，并利用诸如热模块更换和树木摇动之类的功能，以优化生产构建的大小和性能。 Vite设计为易于使用，具有简单的配置和低学习的曲线，是想要快速有效的Web应用程序的Web开发人员的理想工具，而不会在复杂的配置和设置中陷入困境。

入门

从Vite开始是轻而易举的。您需要做的就是运行几个命令。

npm create vite@latest app-name
yarn create vite app-name

然后继续选择所需的模板。例如，我们想使用JavaScript创建一个React项目。继续选择React，然后选择JavaScript + SWC。

这将创建一个没有安装依赖项的空项目。您需要手动进行。

# go to project directory
cd app-name

# install dependencies
npm ci
yarn

现在你很好。

开发服务器

在开发过程中处理应用程序时，通常会使用开发服务器来服务您的文件。开发服务器旨在使您在编写代码时易于测试您的代码。要启动您的开发服务器，您要做的就是运行npm run dev oryarn dev。这是开发服务器的一些关键功能：

快速建立时间

开发服务器可以快速构建和服务您的应用程序，因此您可以实时测试更改。

热模块更换

热模块替换（HMR）是一种用于改善开发人员体验的技术，可以通过允许您实时查看更改而无需刷新页面。

传统上，当您更改代码时，需要刷新页面以查看更新。这可能对您的工作流程耗时和破坏。使用HMR，您对代码的更改会自动注入运行应用程序，而无需页面刷新。

HMR通过检测代码中的模块已更改，然后在运行应用程序中更新它们来起作用。这意味着您可以立即看到更改，而不会失去当前状态或必须导航到应用程序中的位置。

HMR在较大的应用程序中特别有用，在该应用程序中，导航到特定页面或状态可能需要时间。使用HMR，您可以更改代码并实时查看结果，而无需花费时间来导航到相关页面或状态。

调试工具：

开发服务器通常带有内置调试工具，例如错误消息和控制台日志，以帮助您在代码中查找和修复问题。

开发服务器不打算用于生产环境中，因为它是针对速度和易用性而不是性能和安全性进行了优化的。

生产建造

准备将应用程序部署到实时环境时，通常会使用生产构建。生产构建是您的应用程序的一种版本，已针对性能和安全性进行了优化。

要创建生产构建，请运行命令：

# create your production build (for vite)
npm run build
yarn build

# start a server for viewing your production build
npm run preview
yarn preview

这是生产构建的一些关键特征：

缩小代码

生产构建中的代码通常被缩小。这是通过删除评论和空白空间来完成的。它还将功能名称和可变名称更改为较小的东西。这样做是为了减小捆绑包的大小并使其在浏览器中更快。

/* ORIGINAL CODE*/
// this function prints a message to the console
const printMessage = (message) => {
    console.log(message);
}
/* MINIFIED CODE */
const p=s=>{console.log(s)};

树摇

Tree Shaking是一种用于从应用程序中删除未使用的代码的技术，也称为“消除代码”。术语“摇动”来自摇晃树以去除枯叶或树枝的想法。

构建Web应用程序时，通常会包含许多实际上不需要的代码。这可能是您编写但从未使用过的代码，也可能是您从库中导入的代码，但仅使用了一小部分。此未使用的代码占据了您的应用程序中的空间，这可能会减慢其性能。

树木摇动是通过分析您的代码来确定实际使用哪些零件来起作用的。然后，它从您的应用程序中删除未使用的代码，从而产生较小，更有效的代码库。此过程可以大大减少应用程序的大小，从而导致加载时间更快并提高性能。

摇晃通常是作为应用程序构建过程的一部分。许多现代的模块捆绑包，例如Webpack和crolup，都包括对树木摇动的内置支撑（Vite在引擎盖下使用滚动）。当您通过其中一种工具运行应用程序时，它将自动分析您的代码并删除所有未使用的部分。

重要的是要注意，并非所有代码都可以摇晃。某些代码可能在运行时动态加载，或者可能具有复杂的依赖关系，因此难以确定是否使用它。在这些情况下，您可能需要手动删除未使用的代码或以其他方式优化您的应用程序。

缓存

生产版本中的资产通常由浏览器缓存，这意味着可以更快地加载它们来返回访客。

生产构建旨在在实时环境中使用，在该环境中，性能和安全性是首要任务。 Vite为您配置所有这些，因此您不必担心手动配置它。

什么是SWC？

SWC是一个基于生锈的编译器，声称“在单线上比Babel快20倍，而在四个内核上的速度快70倍”。如果要使用babel，只需选择JavaScript + SWC或Typescript + SWC。

请记住，诸如接下来的元框架以及包裹和Deno之类的工具使用SWC。

模块捆绑器 - 快速介绍

vite旨在易于使用和配置，但是如果您需要对构建过程进行更细粒度的控制，这种简单性也可能是一个劣势。一些开发人员可能会发现Vite的配置选项过于限制其需求。如果您想要更多的细粒度控制，则需要使用模块包装。

模块捆绑器是Web开发中用于将JavaScript代码多个模块组合到单个文件（称为捆绑包）中的工具。这个过程通常称为“捆绑”。一些用于网络开发的流行模块包装串包括Webpack，crolup和Snowpack。请记住，Vite在引擎盖下使用卷盘。