Vite 如何处理静态资源？图片、CSS 等资源是如何加载的？

Vite 在开发环境中使用原生 ES 模块（ESM）加载资源，在生产环境中通过 Rollup 打包优化。以下是 Vite 处理静态资源的详细机制：

开发环境：

1. 直接加载：静态资源通过 HTTP 请求直接加载，无需打包
2. 资源引用：通过 ?url、?raw、?inline 等后缀控制资源加载方式
3. CSS 处理：CSS 文件通过 <style> 标签注入，支持 CSS Modules 和预处理器
4. 图片处理：图片等资源返回 URL，浏览器直接请求

生产环境：

1. 资源打包：静态资源被打包到输出目录
2. 文件命名：使用 hash 命名（如 logo.abc123.png）实现长期缓存
3. 资源引用：代码中的资源引用被替换为打包后的路径
4. 代码分割：动态导入的资源会被分割成独立的 chunk

资源类型处理：

图片资源：

• 小于 4KB 的图片默认转为 base64 内联
• 大图片作为独立文件输出
• 支持常见格式：png、jpg、jpeg、gif、svg、webp

CSS 资源：

• 支持 CSS、SCSS、SASS、LESS、Stylus 等预处理器
• 支持 CSS Modules
• 自动提取 CSS 到独立文件

JSON 资源：

• 可以直接导入 JSON 文件
• 支持按需导入：import { field } from './data.json'

其他资源：

• Worker 文件：通过 ?worker 后缀导入
• WebAssembly：通过 ?wasm 后缀导入
• 字体文件：直接引用

资源引用方式：

javascript
// 默认：返回 URL
import logo from './logo.png'

// ?raw：返回字符串内容
import content from './file.txt?raw'

// ?url：显式返回 URL
import logoUrl from './logo.png?url'

// ?inline：内联为 base64
import logoInline from './logo.png?inline'

配置选项：

javascript
export default {
  build: {
    assetsInlineLimit: 4096, // 内联阈值（字节）
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    }
  },
  assetsInclude: ['**/*.glb'] // 自定义资源类型
}

最佳实践：

1. 将静态资源放在 public 目录，会被直接复制到输出目录
2. 使用适当的资源格式（如 WebP 图片）
3. 配置合理的内联阈值
4. 使用 CDN 加速静态资源加载