Lompat ke konten
Aback Tools Logo

Generator Konfigurasi Plugin Kompresi Vite

Buat konfigurasi vite-plugin-compression untuk pra-kompresi aset build Vite ke GZIP dan Brotli - menghasilkan vite.config.ts siap tempel dengan impor khusus framework, perintah instalasi, dan konfigurasi penyajian nginx. Mendukung React, Vue, Svelte, SolidJS, dan Vanilla JS. Tanpa pendaftaran.

Vite Compression Plugin Config Generator

Generate vite-plugin-compression configuration for pre-compressing Vite build assets to GZIP and Brotli - produces ready-to-paste vite.config.ts, install command, and nginx serving configuration. Supports React, Vue, Svelte, SolidJS, and Vanilla JS.

Your Vite Project Configuration

Files smaller than this are not compressed

Tips

Serving both GZIP and Brotli lets your server choose the best format per client. Brotli is served to modern browsers; GZIP is the fallback for older clients.

vite-plugin-compression only runs during production builds (vite build). Development mode (vite dev) is not affected.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import viteCompression from 'vite-plugin-compression'
import zlib from 'node:zlib'

export default defineConfig({
  plugins: [
    react(),
    // GZIP compression - produces .gz files alongside originals
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
      threshold: 10240,
      compressionOptions: { level: 6 },
      deleteOriginFile: false,
    }),
    // Brotli compression - produces .br files alongside originals
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 10240,
      compressionOptions: { params: { [zlib.constants.BROTLI_PARAM_QUALITY]: 6 } },
      deleteOriginFile: false,
    }),
  ],
  build: {
    // Recommended: enable source maps for production debugging
    // sourcemap: true,

    // Rollup options for chunk splitting (improves compression)
    rollupOptions: {
      output: {
        // Split vendor chunks for better long-term caching
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

vite-plugin-compression pre-compresses assets at build time - your server serves the .gz or .br files directly without runtime CPU overhead. Requires server-side support for gzip_static (nginx) or equivalent CDN configuration.

Mengapa memakai generator konfigurasi plugin kompresi Vite kami?

  • Konfigurasi kompresi Vite instan: pilih framework, algoritma, dan tingkat kompresi Anda - generator seketika menghasilkan vite.config.ts siap tempel dengan vite-plugin-compression yang dikonfigurasi dengan benar.
  • Generator konfigurasi Vite online yang aman: semua pembuatan konfigurasi berjalan sepenuhnya di browser Anda. Tidak diperlukan file proyek atau kunci API - sepenuhnya privat dan bisa dipakai offline.
  • 3 format keluaran: perintah instalasi, vite.config.ts dengan impor khusus framework, dan cuplikan nginx.conf untuk menyajikan file pra-kompresi - ketiganya diperbarui secara real-time.
  • 100% gratis selamanya: buat sebanyak mungkin konfigurasi kompresi Vite, sepenuhnya gratis. Tanpa akun, tanpa langganan, tanpa batas, dan tanpa iklan.

Apa itu plugin kompresi Vite?

vite-plugin-compression adalah plugin Vite yang mempra-kompresi file keluaran build (bundel JavaScript, CSS, HTML) ke format GZIP dan/atau Brotli saat build. Alih-alih memampatkan file pada setiap permintaan HTTP (kompresi runtime), server menyajikan file .gz atau .br hasil pra-kompresi secara langsung - menghilangkan beban CPU saat runtime dan menghasilkan waktu respons lebih cepat. Generator konfigurasi plugin kompresi Vite gratis kami menghasilkan vite.config.ts yang benar untuk framework dan pengaturan Anda.

Cara kerja generator konfigurasi kompresi Vite kami

  1. Pilih pengaturan Anda: pilih framework (React, Vue, Svelte, dll.), algoritma kompresi (GZIP, Brotli, atau keduanya), ambang, tingkat kompresi, dan manajer paket.
  2. Pembuatan konfigurasi instan: generator seketika menghasilkan tiga keluaran - perintah instalasi, vite.config.ts dengan impor khusus framework, dan cuplikan nginx.conf - semuanya diperbarui secara real-time.
  3. Salin dan terapkan: berpindah antar ketiga tab, salin konfigurasi yang relevan, dan tambahkan ke proyek Vite serta konfigurasi server Anda.

Pra-kompresi vs kompresi runtime

  • Kompresi runtime (nginx gzip on): memampatkan file pada setiap permintaan - menambah beban CPU, meningkatkan waktu respons, dan memerlukan sumber daya server.
  • Pra-kompresi (vite-plugin-compression): memampatkan file sekali saat build - tanpa beban CPU saat runtime, respons instan, dan kompatibel dengan server file statis atau CDN apa pun.
  • Praktik terbaik: pakai keduanya - pra-kompresi dengan vite-plugin-compression dan aktifkan gzip_static di nginx sebagai cadangan untuk file yang belum punya versi pra-kompresi.
  • Kompatibilitas CDN: unggah file .gz dan .br ke S3, CloudFront, atau Cloudflare R2 dan sajikan dengan header Content-Encoding yang benar.

GZIP vs Brotli untuk build Vite

Brotli mencapai kompresi 15-25% lebih baik daripada GZIP untuk bundel JavaScript dan CSS. Ia didukung semua browser modern (Chrome, Firefox, Edge, Safari 17.4+). GZIP adalah cadangan universal - didukung semua browser dan server. Untuk kompatibilitas maksimal, hasilkan kedua format dan biarkan server memilih yang terbaik untuk setiap klien. Kompresi Brotli pada kualitas 6 adalah keseimbangan baik antara rasio kompresi dan waktu build.

Pertanyaan yang Sering Diajukan

vite-plugin-compression adalah plugin Vite yang mempra-kompresi file keluaran build (JS, CSS, HTML) ke format GZIP dan/atau Brotli saat build. Ini menghilangkan beban CPU kompresi saat runtime di server Anda dan menghasilkan file lebih kecil untuk pengiriman via CDN. Generator konfigurasi online gratis kami menghasilkan vite.config.ts yang benar - tanpa pendaftaran.

Kompresi runtime (nginx gzip on) memampatkan file pada setiap permintaan sehingga menambah beban CPU. Pra-kompresi (vite-plugin-compression + nginx gzip_static) memampatkan file sekali saat build dan menyajikan file .gz atau .br hasil pra-kompresi secara langsung - tanpa beban CPU saat runtime dan waktu respons lebih cepat.

Ya. Generator konfigurasi kompresi Vite 100% gratis, tanpa pendaftaran, tanpa langganan, dan tanpa batas. Anda dapat membuat konfigurasi sebanyak yang Anda butuhkan.

Pakai GZIP dan Brotli untuk kompatibilitas maksimal. Brotli mencapai kompresi 15-25% lebih baik daripada GZIP dan didukung semua browser modern. GZIP adalah cadangan untuk browser dan alat lama. Server Anda (nginx dengan gzip_static + brotli_static) akan menyajikan format terbaik yang didukung setiap klien.

Ambang mengontrol ukuran file minimum untuk dikompresi. File lebih kecil dari ambang tidak dikompresi - memampatkan file yang sangat kecil justru bisa menambah ukurannya karena header kompresi. 10 KB adalah nilai bawaan yang baik. Untuk kompresi agresif, gunakan 1 KB.

Hapus file asli hanya jika server Anda dikonfigurasi menyajikan file .gz/.br secara eksklusif dan Anda yakin semua klien mendukung format terkompresi. Untuk sebagian besar pengaturan, simpan file asli - server akan menyajikan versi terkompresi bila klien mendukungnya dan beralih ke file asli jika tidak.

vite-plugin-compression bekerja dengan keluaran build sisi klien Vite. Untuk build SSR, plugin memampatkan bundel klien tetapi tidak bundel server. Konfigurasikan server SSR Anda untuk menangani kompresi secara terpisah memakai middleware seperti paket npm compression.

Aktifkan gzip_static on di blok server nginx agar file .gz disajikan otomatis. Untuk Brotli, pasang modul ngx_brotli dan aktifkan brotli_static on. Tab nginx.conf pada generator ini menghasilkan cuplikan konfigurasi yang tepat Anda butuhkan.