Vite 是一个前端构建工具，它以其快速的开发服务器和生产优化的打包器而闻名前端界，今天的内容，必须得唠唠 Vite 的关键能力，以下是 Vite 的核心组件分析，以及使用案例：
原理分析
：
- Vite 利用了现代浏览器对
ESModule
语法的支持，在开发环境中不进行打包编译，而是通过启动本地
devServer
来提供服务，从而显著提高了启动速度 。
- 在开发过程中，Vite 按需加载页面所需的模块，而不是一次性编译整个项目 。
- Vite 使用
esbuild
进行依赖预构建，将多种模块化规范转换为 ESM，并减少网络请求 。
- Vite 通过 HTTP 缓存和文件系统缓存优化性能，利用
es-module-lexer
和
magic-string
重写模块路径 。
源码实现
：
- Vite 的源码主要分为客户端和服务端两部分，客户端代码负责处理 WebSocket 消息，服务端代码处理代码构建和模块请求 。
- Vite 的服务端使用 Koa 框架，通过拦截 HTTP 请求来提供模块服务 。
使用技巧
：
- 利用 Vite 的快速开发体验，可以快速启动项目并实时预览修改效果 。
- 由于 Vite 支持原生 ESM，可以直接在浏览器中运行未打包的代码，简化了开发流程 。
- Vite 的配置简单，通常只需要一个配置文件即可完成项目的构建和部署 。
- Vite 支持多种前端框架和语言，可以灵活地选择技术栈 。
Vite 相对于 Webpack 的优势
：
- Vite 提供了更快的冷启动和热模块替换 。
- Vite 支持原生 ESM，无需额外的转译和打包步骤 。
- Vite 实现了按需加载，降低了构建和加载的成本 。
- Vite 提供了易配置和零配置选项，简化了项目设置 。
Vite 的设计哲学是尽可能利用现代浏览器的能力，减少不必要的打包操作，从而提高开发效率。在生产环境中，Vite 使用 Rollup 进行打包，确保了最终产物的优化和性能 。
Vite 的核心组件功能主要包括以下几个方面：
开发服务器（Dev Server）
：
- Vite 提供了一个快速的开发服务器，利用 HTTP/2 和 ES 模块（ESM）来提供服务，实现快速的模块加载和热更新。
按需编译
：
- Vite 在开发模式下按需编译请求的模块，而不是一次性编译整个项目，这大大提升了开发时的响应速度。
依赖预构建
：
- Vite 使用
esbuild
预先构建依赖，将 CommonJS、UMD 等模块化规范转换为 ESM，减少网络请求次数，提高性能。
热模块替换（HMR）
：
- Vite 实现了高效的热模块替换机制，当源代码发生变化时，只替换变更的部分，而不需要重新加载整个页面。
缓存机制
：
- Vite 利用 HTTP 缓存和文件系统缓存来提高性能，对于不经常变动的依赖使用强缓存，源码部分使用协商缓存。
模块路径重写
：
- Vite 使用
es-module-lexer
和
magic-string
来解析和重写模块路径，以适应浏览器的模块加载机制。
构建优化
：
- 在生产模式下，Vite 使用 Rollup 或其他构建工具来打包应用，生成优化后的静态资源。
插件系统
：
- Vite 支持插件扩展，允许开发者通过插件来自定义构建流程，例如添加对特定类型文件的支持。
下面 V 哥将一一介绍这些核心功能并结合案例讲解。
1. 开发服务器（Dev Server）
开发服务器（Dev Server）是 Vite 的核心组件之一，它在开发过程中提供了快速的模块加载和热更新功能。以下是开发服务器的一个简单案例和解析：
来看一个案例
假设我们有一个简单的 Vue 3 项目，我们希望使用 Vite 来启动开发服务器。以下是项目的目录结构和关键文件：
/my-vue-app
|-- node_modules
|-- public
| |-- index.html
|-- src
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
- index.html
(
public/index.html
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite Vue App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
- App.vue
(
src/App.vue
):
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script setup>
const message = 'Hello Vite!';
</script>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// 配置选项...
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
这个命令会执行
package.json
中定义的
"dev"
脚本，使用 Vite 启动开发服务器。
具体解析一下
服务启动
：
- 当执行
npm run dev
时，Vite 会启动一个本地开发服务器。
模块服务
：
- 开发服务器会监听文件系统的变化，并为
index.html
中引用的
type="module"
脚本提供服务。
按需加载
：
- 当浏览器请求
/src/main.js
时，Vite 服务器会提供该文件的内容，并按需解析和加载依赖的模块（如
App.vue
）。
热更新（HMR）
：
- 如果
App.vue
或其他依赖文件发生变化，Vite 会通过 WebSocket 推送更新到浏览器，实现热更新，而无需刷新页面。
源码映射（Sourcemap）
：
- Vite 可以生成 Sourcemap，使得在浏览器的开发者工具中可以直接调试原始源代码，而不是转换后的代码。
开发与生产分离
：
- 开发服务器专注于开发体验，而生产构建会使用 Rollup 或其他配置进行优化，确保生产环境的性能。
2. 按需编译
按需编译是 Vite 的一个核心特性，它允许开发者在开发过程中只编译那些被实际请求的模块，而不是整个项目。以下是使用 Vite 进行按需编译的案例和解析：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
| |-- SomeComponent.vue
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.mount('#app');
- App.vue
(
src/App.vue
):
<template>
<div>
<h1>Home Page</h1>
<button @click="loadComponent">Load Component</button>
</div>
</template>
<script>
import SomeComponent from './SomeComponent.vue';
export default {
methods: {
loadComponent() {
this.$forceUpdate();
this.$options.components.SomeComponent = SomeComponent;
}
}
}
</script>
- SomeComponent.vue
(
src/SomeComponent.vue
):
<template>
<div>
<h2>I'm a lazy-loaded component!</h2>
</div>
</template>
<script>
export default {
name: 'SomeComponent'
}
</script>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// 配置选项...
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
按需编译解析
首次加载
：
- 当你访问应用的主页时，只有
main.js
和
App.vue
会被加载和编译，因为它们是初始入口点。
按需加载组件
：
- 当用户点击按钮触发
loadComponent
方法时，
SomeComponent.vue
将被按需加载。由于 Vite 支持 ES 模块，这个组件将通过动态
import()
语法异步加载。
编译请求的模块
：
- 当
SomeComponent.vue
被请求时，Vite 的开发服务器会捕获这个请求，并编译该模块，然后将其发送给浏览器。
热更新（HMR）
：
- 如果
SomeComponent.vue
在开发过程中被修改，Vite 将通过 HMR 更新浏览器中的组件，而不需要重新加载整个页面。
优化开发体验
：
- 按需编译减少了初次加载的时间和资源消耗，同时保持了快速的模块更新和热替换能力。
一句话，Vite 通过按需编译，从而提供更快速的开发体验和更高效的资源管理。
3. 依赖预构建
依赖预构建是 Vite 的一个重要特性，它在项目启动之前预先处理项目依赖，将非 ES 模块转换为 ES 模块，以减少开发时的模块请求次数和提高性能。以下是依赖预构建的案例和解析：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
| |-- some-pkg/
| |-- package.json
| |-- index.js
|-- src/
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
文件内容
- index.js
(
node_modules/some-pkg/index.js
- 一个 CommonJS 模块):
// CommonJS 模块
exports.default = function() {
console.log('CommonJS package loaded');
};
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
import somePkg from 'some-pkg';
somePkg.default(); // 使用预构建的依赖
const app = createApp(App);
app.mount('#app');
- App.vue
(
src/App.vue
):
<template>
<div>
<h1>App Component</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// 配置选项，例如别名 @ 指向 src 目录
alias: {
'@': '/src',
},
// 其他配置...
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0",
"some-pkg": "1.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
依赖预构建过程解析
预构建过程
：
- 当 Vite 启动时，它会检查
node_modules
目录中的依赖，并使用
esbuild
这个高性能的 JavaScript 打包器来预构建这些依赖。
转换模块类型
：
- 如果依赖是 CommonJS 或其他非 ES 模块类型，
esbuild
会将其转换为 ES 模块，以便浏览器能够通过
import
语句加载。
减少请求次数
：
- 通过预构建，Vite 可以将多个小的依赖模块合并为一个大的模块，从而减少 HTTP 请求次数，加快页面加载速度。
缓存优化
：
- 预构建的依赖会被缓存到
node_modules/.vite
目录中，这样在开发过程中，只有当依赖发生变化时，才会重新构建，否则直接使用缓存。
兼容性
：
- 预构建确保了即使在不支持原生 ES 模块的旧版浏览器环境中，依赖也能被正确加载和执行。
开发服务器启动
：
- 一旦预构建完成，Vite 将启动开发服务器，提供源代码和预构建依赖的服务。
小结一下，Vite 能够显著提高大型项目的开发效率和性能，同时确保了代码的兼容性和模块的按需加载。
4. 热模块替换（HMR）
热模块替换（Hot Module Replacement）是 Vite 在开发过程中提供的一项功能，它允许开发者在不刷新整个浏览器页面的情况下，替换、添加或删除模块。下面是 HMR 案例和解析，一起来看看：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- Button.vue
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import Button from './Button.vue';
const app = createApp();
app.component('button-component', Button);
app.mount('#app');
- Button.vue
(
src/Button.vue
):
<template>
<button @click="count++">Count is: {{ count }}</button>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
- index.html
(
public/index.html
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite HMR Demo</title>
</head>
<body>
<div id="app">
<button-component></button-component>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// HMR 默认开启，无需额外配置
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
HMR 过程解析
开发服务器启动
：
- 当你启动 Vite 时，开发服务器会启动，并自动开启 HMR 功能。
修改 Button 组件
：
- 假设你正在开发过程中修改了
Button.vue
的模板或脚本。
HMR 替换模块
：
- 保存文件后，Vite 会编译修改的
Button.vue
组件，并使用 HMR 更新浏览器中的对应模块，而不需要重新加载整个页面。
状态保持
：
- 由于 HMR 的特性，
Button.vue
中的
count
状态会保持不变，即使组件被重新加载。用户会看到按钮上显示的计数在点击后继续增加，而页面不会刷新。
浏览器开发者工具
：
- 在浏览器的开发者工具中，你可以看到网络请求只针对修改的模块，而不是整个资源。
小结一下，我们可以看到 Vite 的 HMR 功能使得开发更加高效，允许开发者快速迭代组件，同时保持应用状态和用户体验。
5. 缓存机制
缓存机制在 Vite 中主要体现在两个方面：
HTTP 缓存
和
文件系统缓存
。以下是缓存机制的案例和解析：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
- App.vue
(
src/App.vue
):
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vite!'
};
}
}
</script>
- index.html
(
public/index.html
):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vite Cache Demo</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// 配置选项...
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
缓存机制解析
HTTP 缓存
：
- Vite 为静态资源设置了 HTTP 缓存头。对于不经常变动的资源（如预构建的依赖），Vite 使用
Cache-Control
响应头，指定资源可以被浏览器缓存。
文件系统缓存
：
- Vite 会在
node_modules/.vite
目录下缓存预构建的依赖。当没有发生变化时，Vite 会直接从这个缓存中读取依赖，避免重复构建。
示例操作
：
- 假设你修改了
App.vue
中的
message
数据。保存文件后，Vite 会触发 HMR 更新，但不会重新构建整个项目的依赖。
浏览器缓存利用
：
- 当你访问开发服务器提供的资源时（如
main.js
），浏览器会根据 HTTP 响应头中的缓存指令缓存这些资源。下次访问相同的资源时，如果资源没有更新，浏览器会使用本地缓存，而不是从服务器重新下载。
协商缓存
：
- 对于源码文件，Vite 使用 HTTP 协商缓存（如
ETag
或
Last-Modified
）。当源文件有更新时，Vite 会更新这些标记，浏览器会根据这些标记判断是否需要从服务器获取新的资源。
开发体验优化
：
- 通过缓存机制，Vite 减少了开发过程中的网络传输和重复构建，提高了开发服务器的响应速度和开发体验。
Vite 的缓存机制帮助提高开发效率的同时，减少不必要的资源加载和构建过程，get到了没。
6. 模块路径重写
Vite 在处理模块路径时，需要将基于 Node.js
require.resolve
的路径转换为浏览器可识别的路径。此外，Vite 还支持使用
@
符号作为
src
目录的别名，这在 Vue 单文件组件（SFC）中尤为常见。来看一下这个案例和解析：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- components/
| | |-- MyComponent.vue
| |-- views/
| | |-- Home.vue
| |-- main.js
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import Home from '@/views/Home.vue';
createApp(Home).mount('#app');
- Home.vue
(
src/views/Home.vue
):
<template>
<div>
<h1>Welcome to the Home page</h1>
<my-component />
</div>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
components: {
MyComponent
}
}
</script>
- MyComponent.vue
(
src/components/MyComponent.vue
):
<template>
<div>I'm a component!</div>
</template>
<script>
export default {
name: 'MyComponent'
}
</script>
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
// 设置别名 @ 指向 src 目录
alias: {
'@/': '/src/',
'vue': 'vue/dist/vue.esm.js'
}
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0"
}
}
启动开发服务器
在项目根目录下，运行以下命令来启动开发服务器：
npm run dev
解析
别名配置
：
- 在
vite.config.js
中，我们设置了
@
别名指向项目的
src
目录。这样，我们就可以使用
@/views/Home.vue
这样的路径来代替相对路径或绝对路径。
模块请求
：
- 当
Home.vue
被
main.js
引用时，浏览器会发送一个请求到 Vite 开发服务器，请求
@/views/Home.vue
。
路径重写
：
- Vite 服务器接收到请求后，会根据配置的别名将
@/views/Home.vue
转换为实际的文件路径
/src/views/Home.vue
。
处理单文件组件
：
- Vite 使用
es-module-lexer
来解析
import
语句，并根据浏览器对 ES 模块的支持来重写模块路径。
服务模块
：
- Vite 将请求的模块进行处理，如果是 Vue 单文件组件，Vite 会将其分解为
.js
和
.css
（如果有）等不同的模块，并单独服务这些模块。
浏览器加载
：
- 浏览器根据 Vite 服务的路径加载模块，由于路径已经被转换为浏览器可识别的路径，模块能够正确加载并执行。
Vite 通过模块路径重写支持别名和单文件组件的按需加载，从而提高开发效率和模块化管理的便利性，有点意思。
7. 构建优化
构建优化是 Vite 在生产环境下的关键特性，它确保最终的静态资源被压缩、分割和优化以提高应用的性能。以下是构建优化的案例和解析：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- public/
|-- src/
| |-- main.js
| |-- App.vue
| |-- SomeLib.js
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
import SomeLib from './SomeLib';
createApp(App).mount('#app');
// 使用库函数
SomeLib.doSomething();
- App.vue
(
src/App.vue
):
<template>
<div id="app">
<h1>My Vue App</h1>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- SomeLib.js
(
src/SomeLib.js
):
export function doSomething() {
console.log('Library function called');
}
- vite.config.js
(
vite.config.js
):
// vite.config.js
module.exports = {
build: {
// 配置生产环境构建选项
minify: 'terser', // 使用 terser 进行代码压缩
sourcemap: true, // 生成 sourcemap 文件
rollupOptions: {
output: {
manualChunks: {
lib: ['src/SomeLib.js'], // 将 SomeLib.js 单独打包成一个 chunk
}
}
}
}
};
- package.json
(
package.json
):
{
"scripts": {
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"vite": "^2.0.0",
"terser": "^5.0.0"
}
}
构建项目
在项目根目录下，运行以下命令来构建项目：
npm run build
解析一下
配置构建选项
：
- 在
vite.config.js
中，我们配置了构建选项，包括代码压缩工具
terser
和 sourcemap 生成。
手动分块
：
- 我们使用
rollupOptions
中的
manualChunks
配置将
SomeLib.js
单独打包成一个 chunk，这有助于按需加载和缓存。
执行构建
：
- 运行
npm run build
后，Vite 会启动构建流程，根据配置进行代码压缩、分块等操作。
代码压缩
：
- 使用
terser
，Vite 会压缩 JavaScript 代码，移除多余的空格、注释，并进行一些优化以减少文件大小。
生成 sourcemap
：
- 构建过程中，Vite 会生成 sourcemap 文件，这有助于在生产环境中调试代码。
输出构建结果
：
- 构建完成后，Vite 会在
dist
目录下生成优化后的静态资源，包括 JavaScript、CSS 和其他静态资源文件。
部署
：
- 构建结果可以直接部署到生产服务器，由于进行了优化，应用的加载速度和性能会得到提升。
Vite在生产环境中进行构建优化，包括代码压缩、手动分块、sourcemap 生成等，以确保应用的性能和可维护性。
8. 插件系统
Vite 的插件系统允许开发者扩展 Vite 的功能，例如添加对特定类型文件的支持、优化构建流程等，来看一下：
项目结构
假设我们有以下项目结构：
/my-vue-app
|-- node_modules/
|-- src/
| |-- main.js
| |-- App.vue
| |-- assets/
| |-- image.png
|-- vite.config.js
|-- package.json
文件内容
- main.js
(
src/main.js
):
import { createApp } from 'vue';
import App from './App.vue';
import './assets/image.png';
createApp(App).mount('#app');
- App.vue
(
src/App.vue
):
<template>
<div>
<img src="image.png" alt="Image">
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
- vite.config.js
(
vite.config.js
):
// vite.config.js
import vue from '@vitejs/plugin-vue';
import path from 'path';
import imageTransformPlugin from './imageTransformPlugin'; // 假设我们创建了一个自定义插件
module.exports = {
plugins: [
vue(), // Vite 官方 Vue 插件，用于处理 Vue 单文件组件
imageTransformPlugin, // 使用自定义插件来处理图像转换
],
// 其他配置...
};
- imageTransformPlugin.js
(
imageTransformPlugin.js
):
// 自定义插件来处理图像文件
export default {
name: 'image-transform-plugin',
transform(code, id) {
if (id.endsWith('.png')) {
// 假设我们对图像进行某种转换处理
const transformedCode = code.replace(/.png$/, '-transformed.png');
return {
code: transformedCode,
map: null, // 这里简化处理，实际插件应该生成 sourcemap
};
}
},
};
- package.json
(
package.json
):
{
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^2.0.0",
"vite": "^2.0.0"
}
}
使用插件
安装插件
：
- 首先，我们安装了
@vitejs/plugin-vue
，这是 Vite 官方提供的插件，用于支持 Vue 单文件组件。
创建自定义插件
：
- 我们创建了一个名为
imageTransformPlugin
的自定义插件，用于处理图像文件的转换。
配置插件
：
- 在
vite.config.js
中，我们将这两个插件添加到
plugins
数组中，这样 Vite 在构建时就会应用这些插件。
运行 Vite
：
- 当你运行
npm run dev
或
npm run build
时，Vite 会使用配置的插件来处理项目资源。
过程解析
Vite 插件系统允许开发者自定义构建流程，增强 Vite 的功能，以适应各种开发需求。
最后
除了以上这些，Vite 还对 Vue 3 和 React 17+ 的官方支持，允许开发者使用这些前端框架进行开发。Vite 内置了对 TypeScript 的支持，无需额外配置即可使用 TypeScript 开发。Vite能够处理 CSS 文件和各种静态资源，包括图片、字体等，并支持 CSS 预处理器。Vite 能够生成 Sourcemap，方便开发者在浏览器中调试源代码。Vite 支持在构建过程中注入环境变量，使得配置更加灵活。如果你还知道哪些关于 Vite 的能力，欢迎给 V 哥点拨一下，在此感谢。
这些核心组件功能共同构成了 Vite 的强大能力，使它成为一个高效、灵活且易于使用的前端构建工具，如果你还没用上 Vite，那就抓紧搞起来吧。
