最近在公司探索落地 Bundless 构建工具，尝试将现有的一些业务项目 从 Webpack 往 Vite 迁移，由于中后台项目一般对浏览器兼容性要求不高，可以大胆引入一些前沿且激进的方案，因此在公司找到了一个业务中后台项目初步尝试引入 Vite。
当然，在迁移的过程中也不是直接使用 Vite，而是在 Vite 上层有做了一层封装，以接入团队目前研发的构建工具的架构当中，项目构建配置方面会和原始的 Vite 配置不太一样。不过这不影响后续的踩坑和原理介绍，我也尽量把现场还原成原始的 Vite 配置，以便大家理解。
前言
现在前端主流的打包工具主要以 Webpack 为代表，但随着项目规模的发展，构建方面的痛点越来越突出，最大的感受就是太慢了，一方面项目冷启动时必须递归打包整个项目的依赖树，另一方面 JavaScript 语言本身(解释执行、单线程执行)的限制，导致构建性能遇到瓶颈。
在这样的背景下，一些被称为 Bundleless (或者 Unbundled) 的构建工具应运而生，诸如 Snowpack、Vite，其中 Vite 最近在社区的呼声越来越高，GitHub 上的 star 30k+，甚至已经超过 vue3 仓库的 star 数(目前 24.1k)，可见其影响力之大。
和 Webpack 这种传统的打包工具相比，Vite 主要有两大主要优势:
- 利用浏览器内置 ES Module 的支持(script 标签加上属性
type="module"即可)，浏览器直接向 dev server 逐个请求各个模块，而不需要提前把所有文件打包。 - 借助 esbuild 超快的编译速度把第三方库进行预构建，一方面将零散的文件打到一起，减少网络请求，另一方面全面转换为 ESM 模块语法，以适配浏览器内置的 ESM 支持。
顾名思义，Bundleless 和传统的构建工具相比，最大的特点就是不用将业务代码打包(虽然第三方库还是得打包，这个没有办法)，尤其是在项目逐渐庞大的时候，可以极大地提升构建效率和开发体验。经过在公司业务项目的落地，底层从 Webpack 切到 Vite，冷启动速度提升 400% 以上，原本 20 秒启动的项目现在 3~4 秒 即可冷启，并且在依赖没有变动的情况下，二次启动直接秒开，不得不感慨：实在是太快了！
迁移问题
SVG 组件报错
Vite 本身没有对 svg 组件写法的支持，在默认情况下，下面的写法会导致浏览器报错:
import Up from 'common/imgs/up.svg';
function Home() {
return {
<>
// 省略其他子组件
<Up className="admin-header-user-up" />
</>
}
}
为了解决这个问题，在社区现有的生态中找到 vite-plugin-react-svg 插件，添加到 Vite 的 plugins 数组中，实现了以组件方式引用 SVG 资源的能力，并以下面的方式来引入 svg 文件：
import Up from 'common/imgs/up.svg?component';
第三方包内部 bug
在 esbuild 进行预构建的时候，会检查到相关第三方包依赖的报错。本项目中遇到了如下的报错，关于 react-virtualized 当中 esm 产物出现了问题：
// 在 WindowScroller.js 并没有导出这个变量！
import { bpfrpt_proptype_WindowScroller } from "../WindowScroller.js";
在这个库官方的 GitHub 仓库中也发现尤大提出了同样的问题(issue 地址: webpack/rollup 没有捕获这个问题，但在 esbuild 当中报错，总体来说属于第三方库产物的 bug。
一般来说，解决 node_modules 中第三方库的 bug 大概有两种思路：
- 第一种思路是将第三方库中有问题的文件 copy 一份进行修复，放在项目目录里面(非 node_modules)，然后通过构建工具
resolve.alias能力重定向到修复后的位置。 - 另一种是通过
patch-package记录 node_modules 更改记录，生成 patches 目录，然后通过项目的 post-install 脚本在团队中同步这个更改。
这里采用后者来实现第三方库的临时 patch，当然这也适合其他第三方库问题的临时修复。
// 1. 安装
yarn add patch-package postinstall-postinstall
// 2. 修改 node_modules 代码后执行：
yarn patch-package react-virtualized
// 3. package.json 中 scripts 增加：
{
"postinstall": "patch-package"
}
预构建反复执行
如果刚才这点问题只是小打小闹，那接下来的 bug 简直就是究极折磨。在做完基本的配置之后，项目的确是能够正常显示了，但每次清理缓存重新构建时，在预构建阶段会出现如下十分诡异的现象:
- 控制台一直显示
new dependencies xxx类似的 log，服务频繁 reload； - 预构建缓存目录 .Vite 中会不断产生新的依赖缓存文件，随着服务频繁 reload，不断清空所有缓存文件，再次产生更多的新依赖，也就是不断地
重刷缓存目录，过大概 20 多秒才稳定下来； - 在预构建不断重刷目录的 20 多秒当中，页面无法访问，一直处于卡死状态。
1. 问题定位
首先，拿正常情况下的 demo 项目试了一下，正常的预构建情况是这样的:
- 一次性输出所有的构建缓存文件
- 终端的 log 也很简洁，如下图所示:
