Rspack 如何处理静态资源？

Rspack 的资源处理能力是其构建功能的重要组成部分，能够高效处理各种类型的静态资源。以下是 Rspack 资源处理的详细说明：

资源类型

Rspack 可以处理多种类型的资源：

1. 图片资源：PNG、JPG、GIF、SVG、WebP 等
2. 字体资源：WOFF、WOFF2、TTF、EOT 等
3. 媒体资源：MP4、WebM、OGG 等
4. 数据资源：JSON、XML、CSV 等
5. 其他资源：TXT、MD 等

资源模块类型

Rspack 提供了四种资源模块类型：

1. asset/resource

将资源作为单独的文件发出，并导出 URL：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      }
    ]
  }
}

2. asset/inline

将资源作为 data URI 内联到 bundle 中：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        type: 'asset/inline'
      }
    ]
  }
}

3. asset/source

将资源作为源代码导出：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/i,
        type: 'asset/source'
      }
    ]
  }
}

4. asset

自动选择 resource 或 inline：

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8192 // 小于 8KB 的文件内联
          }
        }
      }
    ]
  }
}

图片处理

基本配置

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/i,
        type: 'asset',
        generator: {
          filename: 'images/[name].[hash:6][ext]'
        }
      }
    ]
  }
}

SVG 处理

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/i,
        oneOf: [
          {
            resourceQuery: /component/,
            use: ['@svgr/webpack']
          },
          {
            type: 'asset/resource'
          }
        ]
      }
    ]
  }
}

图片优化

javascript
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8192
          }
        }
      }
    ]
  },
  optimization: {
    minimizer: [
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ['imagemin-gifsicle', { interlaced: true }],
              ['imagemin-mozjpeg', { progressive: true }],
              ['imagemin-pngquant', { quality: [0.65, 0.9] }],
              ['imagemin-svgo', { plugins: [{ removeViewBox: false }] }]
            ]
          }
        }
      })
    ]
  }
}

字体处理

基本配置

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:6][ext]'
        }
      }
    ]
  }
}

字体优化

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff|woff2)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:6][ext]'
        },
        use: [
          {
            loader: 'fontmin-webpack',
            options: {
              glyphs: ['\ue000-\uefff']
            }
          }
        ]
      }
    ]
  }
}

媒体资源处理

视频处理

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:6][ext]'
        }
      }
    ]
  }
}

数据资源处理

JSON 处理

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'json'
      }
    ]
  }
}

XML 处理

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.xml$/i,
        use: 'xml-loader'
      }
    ]
  }
}

资源加载方式

1. ES Module 导入

javascript
import logo from './logo.png';
import data from './data.json';

console.log(logo); // 资源 URL
console.log(data); // JSON 数据

2. CommonJS 导入

javascript
const logo = require('./logo.png');
const data = require('./data.json');

console.log(logo); // 资源 URL
console.log(data); // JSON 数据

3. 动态导入

javascript
const loadImage = async () => {
  const logo = await import('./logo.png');
  return logo.default;
};

资源命名策略

Hash 命名

javascript
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js',
    assetModuleFilename: 'assets/[name].[hash:8][ext]'
  }
}

命名占位符

• [name]：资源名称
• [ext]：资源扩展名
• [hash]：资源 hash
• [contenthash]：内容 hash
• [hash:n]：指定长度的 hash

资源缓存策略

长期缓存

javascript
module.exports = {
  output: {
    filename: '[name].[contenthash:8].js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]'
  },
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'deterministic'
  }
}

CDN 配置

javascript
module.exports = {
  output: {
    publicPath: 'https://cdn.example.com/assets/'
  }
}

资源压缩

Gzip 压缩

javascript
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
}

Brotli 压缩

javascript
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,
      minRatio: 0.8
    })
  ]
}

最佳实践

1. 资源优化：

   • 压缩图片和字体
   • 使用合适的格式
   • 按需加载资源

2. 缓存策略：

   • 使用 contenthash
   • 配置长期缓存
   • 利用 CDN 加速

3. 性能优化：

   • 内联小资源
   • 懒加载图片
   • 使用 WebP 格式

4. 开发体验：

   • 合理配置资源路径
   • 提供清晰的命名
   • 优化构建速度

Rspack 的资源处理功能为开发者提供了强大而灵活的资源管理能力，通过合理配置和优化，可以显著提升应用性能和用户体验。