Brotli kompresja plików z tailwind.

Vue-Brotli-Compress.md

Brotli kompresja plików css z tailwind

W folderze produkcyjnym dist/assets/ obok standardowych plików (np. index-C3b8x2.js oraz index-B9a1x2.css) zobaczysz ich super-lekkie wersje z rozszerzeniem .br (np. index-C3b8x2.js.br).

Instalacja

Dodajesz tylko jeżeli potrzebujesz generować pliki z .br gdyż serwer nginx nie obsługuje modułu brotli.

# Vue
npm i -D vite-plugin-compression2

Plik vite.config.js

import { defineConfig } from 'vite'
import vue from '@vue/plugin-vue'
import { compression } from 'vite-plugin-compression2'

export default defineConfig({
  plugins: [
    vue(),
    // Konfiguracja kompresji Brotli
    compression({
      algorithm: 'brotliCompress', // wymuszenie algorytmu Brotli
      exclude: [/\.(br)$/, /\.(gz)$/], // zapobieganie podwójnej kompresji
      threshold: 1024, // kompresuj tylko pliki większe niż 1 KB
    })
  ]
})

Produkcja plików .br

npm run build

Serwer .htaccess dla apache/nginx

<IfModule mod_rewrite.c>
  RewriteEngine On  
  # Sprawdź, czy przeglądarka obsługuje Brotli
  RewriteCond %{HTTP:Accept-Encoding} br  
  # Sprawdź, czy istnieje plik z rozszerzeniem .br
  RewriteCond %{DOCUMENT_ROOT}/%{REQUEST_FILENAME}.br -f  
  # Przepisz zapytanie na gotowy plik .br
  RewriteRule ^(.*)$ $1.br [L]
</IfModule>

# Ustawienie prawidłowych nagłówków dla plików .br
<Files *.js.br>
  AddType "text/javascript" .br
  AddEncoding br .br
</Files>
<Files *.css.br>
  AddType "text/css" .br
  AddEncoding br .br
</Files>
<Files *.html.br>
  AddType "text/html" .br
  AddEncoding br .br
</Files>

Weryfikacja

curl -I -H "Accept-Encoding: br" https://example.com

Gdy masz serwer vps

# Nginx instaluj i konfiguruj
ngx_http_brotli_module
ngx_brotli

Konfiguracja nginx

# Ładowanie modułów dynamicznych Brotli (na samej górze pliku)
load_module modules/ngx_http_brotli_filter_module.so;
load_module modules/ngx_http_brotli_static_module.so;

http {
    # 1. KONFIGURACJA GZIP (Fallback)
    gzip on;
    gzip_comp_level 5;             # Dobry balans CPU/kompresja dla Gzip
    gzip_min_length 256;
    gzip_proxied any;              # Kompresuj także dla żądań przez proxy/CDN
    gzip_vary on;                  # Dodaje nagłówek 'Vary: Accept-Encoding'
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

    # 2. KONFIGURACJA BROTLI (Priorytetowa)
    brotli on;
    brotli_comp_level 6;           # Optymalna wydajność w locie dla Brotli
    brotli_min_length 256;
    brotli_static on;              # Szuka gotowych plików .br na dysku
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;
}

Tylko z Node.js

Musisz sam zająć się plikami .br

const express = require('express');
const app = express();

app.get('*.js', (req, res, next) => {
  if (req.header('Accept-Encoding').includes('br')) {
    req.url = req.url + '.br';
    res.set('Content-Encoding', 'br');
    res.set('Content-Type', 'application/javascript; charset=UTF-8');
  }
  next();
});

app.use(express.static('public'));