前言
在上一篇文章中，我们分析了JSON和CSS处理插件，这篇文章我们继续分析Vite的内置插件。
在这篇文章中，我们将分析4个插件，分别是vite:modulepreload-polyfill，vite:define，vite:esbuild，vite:asset，其中define和asset这两个插件的难度相对要大一些，大家耐心阅读体会即可。
vite:modulepreload-polyfill
这个插件本身的源码实现足够简单。
我们接着看一下那个polyfill函数的来源： 这段代码，如果你阅读过我之前的文章的话，你会觉得非常熟悉，嘿嘿。
曾经我写过一篇关于Vite构建产物分析的文章：vite进阶之构建产物分析
这个插件虽然没有指明应用的阶段，但是在内部逻辑中判断了必须是构建阶段才会生效的。
vite:esbuild
这个插件目前还跟依赖预构建的知识点无关，关于依赖预构建我们会专门拿文章进行阐述。
这个插件主要的目的就是进行编译转换，这也是为什么Vite它能够原生支持TS的原因。 然后在这个
transformWithEsbuild方法中，Vite做了一系列的参数抹平和兜底处理之后，调用ESBuild的API：
vite:define
这个插件相对于前面2个插件就有一定的难度了，我们还是来看看实现。
这个插件主要完成的事是两件事儿：
我们来看一下这个插件的主要实现：
先拦截掉不做替换的内容。 然后利用ESBuild将环境变量进行替换，得到转换后的代码：
我们需要看一下啊这个
replaceDefine这个函数的实现： 上图中的
transform方法就是调用的ESBuild的API，符合vite文档所描述的，接下来，我们要看看那个define变量的来源。 在
getPattern这个方法中，最终调用的是generatePattern，在generatePattern方法中分别处理配置中的环境变量和import.meta.env.*
接着是处理
import.meta.env.*:
通过学习这个插件，我们可以得到一个小的结论，Vite在处理环境变量的时候，是整体替换的，比如我们定义一个环境变量import.meta.env.VITE_TEST_ENV，我们有时候可能会尝试打印一些调试信息，觉得import.meta.env预期应该是一个对象，这样的使用方法，在构建的产物中，可能是错误的，这是大家需要注意的。
vite:asset
这个插件的内容也不少，我们也需要耐心学习。
Rollup本身不支持图片处理，它需要使用插件才能完成图片处理，Vite在Rollup插件的基础上进一步进行了处理。
这个插件，重要的处理逻辑是在load生命周期和renderChunk的处理上。 对于
raw请求，将其转化成一个字符串来处理，对于普通请求，把它转换成base64字符串或者相对于DevServer的相对路径。 在Dev和构建的时候，处理有些许区别。
对于DEV，转换成请求路径，浏览器可以直接访问：
对于构建，转化成
base64。 有的小伙伴可能会有疑问了，Vite不是支持一个静态资源大小的配置吗，只有小于这个阈值的静态资源才会打包进css，这有点儿不符合预期呢？
有这个疑问的小伙伴明显是好学且记性不错的，Vite现在只是暂时把它打进去了，后续还要把base64这样的的资源再从Chunk的代码中提取出来的。
在
renderChunk这个生命周期中，Vite会对源码进行抽取：
最后，Vite删除了一些不需要的文件：
因为
generateBundle生命周期执行的时候还没有把产物写入磁盘，所以删除了bundle对象上的内容，将来写数据的时候就没有了。
结语
在这篇文章中我们分析了两个重要的插件，vite:asset和vite:define，有难度且格外重要的Vite内置插件还有几个，我们需要在后面的文章中继续分析，未完待续......