Vite 这个前端打包工具是怎么工作的呢？

首先，第一步是读取配置。就是 vite.config.js 还有 .env 以及 --mode 等命令 ，除了获取各种策略规则外，最主要的是知道哪个文件是入口文件（一般是一个 HTML 文件）。

现在万事俱备，开始打包。

一般会先删除上一次的打包结果，也就是删除 dist 目录里的内容。然后把一些静态资源给搞进入，比如：

obots.txt favicon.ico crossdomain.xml sitemap.xml manifest.json .htaccess humans.txt LICENSE README.md

这种。

然后就是处理和解析 HTML 了。

首先是压缩加工 HTML ，替换一些环境变量、一些埋点、加入 UTF-8 标志，转换代码成各种兼容模式。

提取页面的各种资源文件，尤其是 JS 的主入口脚本。

接下来就是模块相关的内容了。就跟顺藤摸瓜一样，一个模块一个模块加载、分析、解析.... 然后全串起来。这个过程可能会生产兼容不同浏览器的产物，当然，根据你给的配置决定。

标准的过程是【路径解析】-【模块加载】-【模块转化】-【分析模块依赖】-【循环路径解析】。

1. 【路径解析】很简单。 如果你用过 '@/' 路径、或者 js ts 省略了、或者略写了模块名等等.... 打包器会自动给你补全修正。
2. 【模块加载】的意思也简单，就是根据解析的数据，把对应的文件给你找到。加载到内存里。
3. 【模块转化】 就是把加载进来的文件，给深度处理一下，删除无用的代码、注入环境变量、转化解析 ts 和 JSON ，以及各种兼容性处理，如果你设置压缩了，那也给你压缩一下。
4. 【分析模块依赖】，上面的意思是单个模块的转化，我们的程序里可能还有很多很多的模块，于是就一个一个找下去，把所有模块给重复处理，并且生产项目依赖的关系图谱。

接着，就是根据上面得到的 依赖的关系图谱，生成最终的 Bundle（打包产物）！

在此中，会提出一些无用的 函数、变量、模块、逐渐等等，以及一些引用的 图片音频视频 等地址也替换成真正可用的（比如这些文件会生产唯一哈希值，追加到文件名末尾），以及为了兼容性的 top-level-await 降级 。

CSS 方面，Less 代码等 CSS 预处理器代码也会被编译成 CSS，还有会移除各种未使用的class、兼容性。

差不多就是这个样子。