在vite中处理小文件打包，核心是调整构建配置中的 assetsinlinelimit 参数。该参数决定了静态资源（如图片、字体）是否被内联为base64字符串嵌入到js/css中，还是作为独立文件输出。默认值为256字节，小于此值的文件会被内联，大于或等于此值的文件会生成独立文件。通过修改 vite.config.js 中的 build.rollupoptions 可以自定义这一阈值，从而控制最终打包体积和请求数量。
如何配置assetsInlineLimit以改变小文件处理策略？
要改变小文件的处理策略，需要在 vite.config.js 文件中配置 build.rollupOptions 下的 assetsInlineLimit。这个配置项接受一个数字，单位是字节。如果将值设得较大，更多的小文件会被内联；如果设得较小或设为0，则几乎所有文件都会作为独立资源输出。例如，设置为0意味着不内联任何文件，全部生成独立文件；设置为Infinity则尝试内联所有文件（受限于其他限制）。这种配置直接影响最终输出的 dist 目录结构和网络请求效率。
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
// 设置内联阈值为 1024 字节
assetsInlineLimit: 1024,
},
},
});
上述代码将阈值设为1024字节。运行 npx vite build 后，检查 dist/assets 目录。若有一个 icon.svg 大小为500字节，它将被内联到引用它的CSS或JS中，不会出现在 dist/assets 目录下。若有一个 logo.png 大小为2KB，它将作为 logo-[hash].png 单独存在于 dist/assets 中。预期结果是：小文件减少HTTP请求但增加主包大小，大文件保持独立加载。
内联与独立输出对性能有何具体影响？
内联小文件可以减少HTTP请求次数，特别适合移动端或高延迟网络环境，因为建立连接的成本高于传输少量数据。然而，内联会增加JavaScript或CSS主文件的体积，可能导致解析和执行时间变长。独立输出小文件则允许浏览器并行下载和缓存这些资源，适合桌面端或高速网络。选择哪种策略取决于目标用户群体的网络状况和应用的具体资源构成。通常，对于图标等极小文件，内联是常见做法；对于较大的图片或字体，独立输出更优。
// 验证不同阈值下的行为 // 假设有一个 200 字节的 file.txt // 当 assetsInlineLimit: 100 时，file.txt 被内联 // 当 assetsInlineLimit: 300 时，file.txt 作为独立文件输出
通过对比不同阈值下的构建结果，可以直观看到文件归属的变化。例如，将阈值从256改为100，原本内联的200字节文件将变为独立文件。反之，将阈值从256改为500，原本独立的300字节文件将变为内联。这种灵活性允许开发者根据实际需求微调打包策略。
当assetsInlineLimit设置为0时会发生什么？
当 assetsInlineLimit 设置为0时，Vite将不会内联任何静态资源，所有符合静态资源规则的文件（如图片、字体、视频等）都将作为独立文件输出到 dist/assets 目录中。这意味着即使是一个1字节的PNG文件，也会生成一个对应的独立文件。这种做法最大化了并行下载的可能性，但显著增加了HTTP请求的数量。适用于需要精细控制资源加载顺序或希望利用浏览器缓存机制的场景。需要注意的是，某些极小的SVG内联可能仍会通过其他方式处理，但主要逻辑遵循此阈值。
