How does Rspack handle static assets?

Rspack's asset processing capability is an important part of its build functionality, capable of efficiently handling various types of static assets. Here's a detailed explanation of Rspack's asset processing:

Asset Types

Rspack can handle multiple types of assets:

1. Image Assets: PNG, JPG, GIF, SVG, WebP, etc.
2. Font Assets: WOFF, WOFF2, TTF, EOT, etc.
3. Media Assets: MP4, WebM, OGG, etc.
4. Data Assets: JSON, XML, CSV, etc.
5. Other Assets: TXT, MD, etc.

Asset Module Types

Rspack provides four asset module types:

1. asset/resource

Emits the asset as a separate file and exports the 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

Inlines the asset as a data URI in the bundle:

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

3. asset/source

Exports the asset as source code:

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

4. asset

Automatically chooses between resource and inline:

javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8192 // Inline files smaller than 8KB
          }
        }
      }
    ]
  }
}

Image Processing

Basic Configuration

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

SVG Processing

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

Image Optimization

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 }] }]
            ]
          }
        }
      })
    ]
  }
}

Font Processing

Basic Configuration

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

Font Optimization

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']
            }
          }
        ]
      }
    ]
  }
}

Media Asset Processing

Video Processing

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

Data Asset Processing

JSON Processing

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

XML Processing

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

Asset Loading Methods

1. ES Module Import

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

console.log(logo); // Asset URL
console.log(data); // JSON data

2. CommonJS Import

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

console.log(logo); // Asset URL
console.log(data); // JSON data

3. Dynamic Import

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

Asset Naming Strategy

Hash Naming

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

Naming Placeholders

• [name]: Asset name
• [ext]: Asset extension
• [hash]: Asset hash
• [contenthash]: Content hash
• [hash:n]: Hash of specified length

Asset Caching Strategy

Long-term Caching

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

CDN Configuration

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

Asset Compression

Gzip Compression

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 Compression

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

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

Best Practices

1. Asset Optimization:

   • Compress images and fonts
   • Use appropriate formats
   • Load assets on demand

2. Caching Strategy:

   • Use contenthash
   • Configure long-term caching
   • Utilize CDN acceleration

3. Performance Optimization:

   • Inline small assets
   • Lazy load images
   • Use WebP format

4. Development Experience:

   • Reasonably configure asset paths
   • Provide clear naming
   • Optimize build speed

Rspack's asset processing features provide developers with powerful and flexible asset management capabilities. Through reasonable configuration and optimization, application performance and user experience can be significantly improved.