React 和 Vue 哪些事儿 – 2. 趁手的开发工具 Vite

什么是开发工具

这里说的开发工具不是指电脑硬件或者代码编辑器（例如 VS Code），而是前端工具链、或者说项目脚手架，其核心的功能基本类似，大致包含：

• 使用模板创建项目初始目录和文件
• 管理项目资源、依赖库、插件
• 提供本地开发、调试服务
• 为生产环境打包构建、优化文件

伴随着浏览器和整个前端生态系统的发展，开发工具也在不断迭代进步。

旧工具的不足

之前，使用 Create React App 工具开发 React 项目，而使用 Vue CLI 工具来开发 Vue 项目。

Create React App 和 Vue CLI 两者都使用名为 webpack 的静态模块打包工具来处理其核心功能。webpack 从应用程序的入口点开始，分析项目中的所有模块的依赖关系，将其组合成一个或多个静态文件资源输出。

使用基于 webpack 打包器的工具冷启动开发服务器时，必须先抓取并构建整个应用，然后才能提供服务。当前端应用越来越大型时，需要处理的 JavaScript 代码量也呈指数级增长，旧的开发工具开始遇到性能瓶颈，通常需要很长时间才能启动开发服务器。编辑代码修改文件后，使用模块热替换更新，改动的效果也需要在几秒钟之后才能迟迟在浏览器中反映出来。

新工具 Vite 的优势

Vite 将自己定义为“下一代的前端工具链”，主打一个“快”字。首次使用 Vite 的前端小伙伴甚至有点恍惚，命令行键入 npm run dev 后项目秒开，快得有点不可思议。

得益于 Vite 的高度可扩展性，它同时支持多种模板预设，可以使用它来开发各类项目，包括原生 JS、Vue、React、Preact、Lit、Svelte 以及各类框架对应的 TypeScript 版本项目。

Vite 的快得益于以下几个方面：

只编译不打包

现代浏览器原生支持 ESM 规范，即 JavaScript 模块化，浏览器能够最优化地去加载模块文件。

Vite 以原生 ESM 方式提供源码，实际上是让浏览器接管了打包程序的部分工作。当浏览器解析到 import 导入语句时，会发起 HTTP 请求向服务器请求源码，Vite 只需要对相应代码进行编译转换并提供。

根据具体情景，浏览器仅仅只是按需动态导入当前页面实际用到的那些模块，而暂时没有用到的模块是不会进行加载的。

依赖预构建

项目的一些依赖库包含的模块众多，大量的 import 引入会造成 HTTP 网络请求拥塞。另外，依赖库中可能存在不同模块化标准的代码，例如 CommonJS，也需要提前转化为 ESM。

在开发阶段，Vite 会提前对依赖库文件进行构建，将依赖库内部模块的 ESM 依赖关系合并成单个模块，减少 HTTP 请求次数，并且将非 ESM 转成 ESM。

处理速度快

Vite 在开发阶段使用 esbuild 打包器进行依赖预构建和源码编译，在打包时也使用它对 JS 和 CSS 文件做最小化压缩。

esbuild 使用 Go 语言编写，CPU 密集下更具多核多线程性能优势，编译速度比以 Node.js 编写的打包器快 10-100 倍。

当然，为了权衡插件和生态基础建设，Vite 在生产打包时仍选用了 Rollup。

利用缓存

依赖库在开发阶段很少发生变动，Vite 会将预构建好的文件缓存在 node_modules/.vite/ 文件夹下复用。

同时，依赖模块的请求会通过浏览器 Cache-Control: max-age=31536000, immutable 进行强缓存。

而源码相关模块的请求，则会根据 304 Not Modified 进行协商缓存。

强缓存可以直接减少 http 请求数。协商缓存在请求数上和没有缓存一致，但如果是 304，仅仅是返回状态码，并没有实际文件内容，可以减少响应体积，缩短传输时间。

创建项目

npm 是个包管理器，帮助我们在项目中轻松地安装、更新、管理 JavaScript 包和模块。我们即将要创建并开发的 React 或者 Vue 项目，每个项目都是一个独立的 npm 包，不过它们都是私有包（”private”: true），不会公开发布出去。

我们使用下面的 npm 命令下载并运行 Vite，分别创建 React 和 Vue 项目：

# 使用 vite 的 react 模板创建名称为 react-app 的项目
npm create vite@latest react-app -- --template react

# 使用 vite 的 vue 模板创建名称为 vue-app 的项目
npm create vite@latest vue-app -- --template vue

具体地，npm create 是 npm init 命令的别名，用来基于指定的模板和选项生成项目的初始代码。vite@latest 表示 create-vite 包的最新版本。这里有个约定，即 npm create 命令调用以 create- 开头的包时，可以省略 create- 前缀。

当我们执行 npm init vite 时，会先将包名补全为 create-vite，然后转换为使用 npm exec 命令执行。从 npm registry 即包的远程源地址查找、下载、安装 create-vite 的最新版本，接着执行包对应的 create-vite 命令。

react-app 或者 vue-app 是我们指定的项目名称，也会被用作项目目录路径。

命令最后使用 –template 选项指定使用 create-vite 的内置模板 react 或者 vue，而第一个单独的 — 分隔符是用来明确指定后面参数的目标是传递给 create-vite 而非 npm。

React 和 Vue 项目结构比较

使用相同的脚手架工具创建的两个项目，其结构基本是一致的，配置方法等也遵循一致的约定。Vite 巧妙地利用不同的插件（@vitejs/plugin-react 和 @vitejs/plugin-vue）同时实现了对 React 和 Vue 项目开发的支持。

文件列表描述如下：