Vite+Vue3+TypeScript+Element Plus：企业级轻量框架实践（六）

2023-09-10 11:58:03

在前面的文章中，我们已经完成了 Vite+Vue3+TypeScript+Element Plus 企业级轻量框架的前五章内容。在本章中，我们将介绍如何使用 Vite 的 Plugins 系列教程，包括极速的服务启动、轻量快速的热重载和优化的构建。

极速的服务启动

Vite 提供了极速的服务启动功能，可以让我们在几百毫秒内启动开发服务器。这对于快速开发和迭代非常有用。

Vite 服务启动原理

Vite 使用 esbuild 作为构建工具，esbuild 是一个非常快速的 JavaScript 构建工具。它可以将 JavaScript 代码编译成可以在浏览器中运行的代码。Vite 利用 esbuild 的快速构建速度，可以在几百毫秒内启动开发服务器。

使用 Vite 服务启动

使用 Vite 服务启动非常简单，只需要在项目根目录下运行以下命令即可：

vite

这样，Vite 就会在 3000 端口启动开发服务器。然后，你就可以在浏览器中访问 http://localhost:3000 来查看你的项目了。

轻量快速的热重载

Vite 还提供了轻量快速的热重载功能，可以让我们在修改代码后，在几百毫秒内看到修改后的效果。这对于快速开发和迭代非常有用。

Vite 热重载原理

Vite 使用 esbuild 的增量构建功能来实现热重载。当我们修改代码后，esbuild 会只编译修改的部分代码，然后 Vite 会将编译后的代码注入到浏览器中。这样，我们就可以在几百毫秒内看到修改后的效果。

使用 Vite 热重载

使用 Vite 热重载非常简单，只需要在项目根目录下运行以下命令即可：

vite

这样，Vite 就会在 3000 端口启动开发服务器并启用热重载功能。然后，你就可以在浏览器中访问 http://localhost:3000 来查看你的项目了。当我们修改代码后，Vite 会自动检测到修改并重新编译代码，然后将编译后的代码注入到浏览器中。这样，我们就可以在几百毫秒内看到修改后的效果。