vite-plugin-compression2

To serve .gz and .br files generated by the plugin, enable the gzip_static and brotli_static modules in your Nginx configuration. This allows Nginx to serve the pre-compressed files directly instead of compressing them on the fly.

http {
    # Enable gzip_static module to serve pre-compressed .gz files
    gzip_static on;
    
    # Enable brotli_static to serve pre-compressed .br files
    # Requires ngx_brotli module: https://github.com/google/ngx_brotli
    brotli_static on;
    
    # Fallback to dynamic compression if static file not found
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    
    server {
        listen 80;
        server_name example.com;
        root /var/www/html;
        
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

To serve pre-compressed files on Apache, use mod_rewrite to check for the existence of .br or .gz versions of a file and serve them if the client's Accept-Encoding header supports them. You must also set the correct Content-Encoding headers.

# Enable mod_deflate for fallback dynamic compression
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript application/json
</IfModule>

# Serve pre-compressed files
<IfModule mod_rewrite.c>
    RewriteEngine On
    
    # Serve .br file if it exists and client supports brotli
    RewriteCond %{HTTP:Accept-Encoding} br
    RewriteCond %{REQUEST_FILENAME}.br -f
    RewriteRule ^(.*)$ $1.br [L]
    
    # Serve .gz file if it exists and client supports gzip
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ $1.gz [L]
</IfModule>

# Set correct content-type and encoding headers
<FilesMatch "\.js\.gz$">
    Header set Content-Type "application/javascript"
    Header set Content-Encoding "gzip"
</FilesMatch>

<FilesMatch "\.css\.gz$">
    Header set Content-Type "text/css"
    Header set Content-Encoding "gzip"
</FilesMatch>

<FilesMatch "\.js\.br$">
    Header set Content-Type "application/javascript"
    Header set Content-Encoding "br"
</FilesMatch>

<FilesMatch "\.css\.br$">
    Header set Content-Type "text/css"
    Header set Content-Encoding "br"
</FilesMatch>

When upgrading from vite-plugin-compression2 v1.x to v2.x, you must address several breaking changes regarding how algorithms are configured.

Key Breaking Changes

1. algorithm → algorithms: The single algorithm string option is replaced by an algorithms array.
2. Removal of compressionOptions: You can no longer pass a separate compressionOptions object. Instead, use the defineAlgorithm() helper function to associate options directly with an algorithm.
3. Plugin Consolidation: Instead of creating multiple plugin instances for different algorithms, you should now use a single plugin instance with multiple entries in the algorithms array.

Step-by-Step Migration

1. Update Package:

   npm install vite-plugin-compression2@latest -D

2. Update Imports: Ensure you import defineAlgorithm alongside compression:

   import { compression, defineAlgorithm } from 'vite-plugin-compression2'

3. Update Configuration:

   • Simple case: Change algorithm: 'gzip' to algorithms: ['gzip'].
   • With options: Use defineAlgorithm('gzip', { level: 6 }) inside the algorithms array.
   • Multiple algorithms: Combine multiple instances into one:

     // v1.x
     plugins: [compression({ algorithm: 'gzip' }), compression({ algorithm: 'brotliCompress' })]
     
     // v2.x
     plugins: [compression({ algorithms: ['gzip', 'brotliCompress'] })]

You can tune the compression intensity by using defineAlgorithm to set specific levels. This allows you to balance build speed against file size depending on your deployment stage.

• Development/CI: Use lower levels (e.g., gzip level 6 or brotli quality 4-6) for faster builds.
• Production: Use maximum levels (e.g., gzip level 9 or brotli quality 10-11) for the best compression ratio.
• Balance: Use mid-range levels (e.g., gzip level 7-8 or brotli quality 8-9).

compression({
  algorithms: [
    // Development: faster builds, lower compression
    defineAlgorithm('gzip', { level: 6 }),

    // Production: slower builds, better compression
    defineAlgorithm('gzip', { level: 9 }),

    // Brotli: quality 10-11 recommended for static assets
    defineAlgorithm('brotliCompress', {
      params: {
        [require('zlib').constants.BROTLI_PARAM_QUALITY]: 11
      }
    })
  ]
})