一、vite 简介

Vite 官方中文文档
vite.config 配置文件

Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

Vite 能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 使用了 Rollup 进行生产构建，支持并兼容 Rollup 插件系统。甚至 Rollup 的维护者也推荐使用 Vite 来进行基于 Rollup 的 Web 开发。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

二、vite 语法纪要

vite 中文官网

三、用 vite 创建项目

据 vite 官网提供的方式，这里推荐以下两种方式：

• 使用 NPM：npm create vite@latest <项目名>
• 使用 Yarn：yarn create vite <项目名>

1、用 vite 创建一个 react 项目

我这里选用 npm 创建一个 react 项目：

npm create vite@latest vite-react-ts

然后，在出现的选项中依次选择 React–>TypeScript 即可

2、用 vite 创建一个 vue3 项目

我这里选用 npm 创建一个 vue3 项目：

npm create vite@latest vite-vue-ts

然后，在出现的选项中依次选择 Vue–>TypeScript 即可

四、vite 和 webpack 的比较

显然，vite 比 webpack 启动的更快。

为什么 Vite 启动快？

• 从底层语言来说：Vite 是用 go 语言实现的，go 语言是纳秒级别；webpack 使用 js 实现的，js 是毫秒级别。所以 vite 比 webpack 打包器快 10-100 倍。

  • Vite 是基于 esbuild 预构建依赖。而 esbuild 是采用 go 语言编写，go 语言的是纳秒级别的。
  • Webpack 是基于 nodejs 构建，js 是以毫秒计数。

• 从打包过程来说：vite 启动的时候不需要分析各个模块之间的依赖关系、不需要打包编译。vite 可按需动态编译缩减时间。当项目越复杂、模块越多的情况下，vite 明显优于 webpack。

  • Vite 打包：启动服务器 => 请求模块时按需动态编译显示。（vite 遵循的是 ES Modlues 模块规范来执行代码，不需要打包编译成 es5 模块即可在浏览器运行。）
  • Webpack 打包：分析各个模块之间的依赖 => 然后进行编译打 => 打包后的代码在本地服务器渲染。（随着模块增多，打包的体积变大，造成热更新速度变慢。）

综上所述，vite 从性能上看，完胜 webpack，webpack 一家独大的时代要一去不复返了啊。

【参考】
vue3 使用 vite
Vite 官方中文文档
Pug support

【推荐】
vite.config 配置文件
深入理解Vite核心原理

使用了 vite 的开源项目：
vue-vben-admin - 完整版
vue-vben-admin-thin-next - 简化版