Pembuat Konfigurasi Plugin Kompresi Webpack
Hasilkan cuplikan webpack.config.js siap produksi dengan pra-kompresi GZIP dan Brotli menggunakan compression-webpack-plugin. Atur tingkat kompresi, threshold, minRatio, dan pola aset — lalu salin konfigurasinya, pasang plugin, dan dapatkan direktif penyajian Nginx yang sesuai. Berjalan sepenuhnya di browser Anda — tanpa pendaftaran.
Configure GZIP and Brotli pre-compression for your webpack build and generate a production-ready webpack.config.jssnippet using compression-webpack-plugin. All generation runs locally in your browser.
Best compression - slowest build
Maximum - slowest build
Skip assets smaller than this size
Skip if compressed/original > this ratio (0.8 = skip if <20% savings)
Regex to match assets to compress
Mengapa Menggunakan Pembuat Konfigurasi Plugin Kompresi Webpack Kami?
Berikut adalah keunggulan utama alat ini.
- Konfigurasi kompresi Webpack instan: atur tingkat GZIP, kualitas Brotli, threshold, minRatio, dan pola aset — pembuat konfigurasi menghasilkan cuplikan webpack.config.js lengkap secara instan.
- Pembuat konfigurasi Webpack online yang aman: semua pembuatan konfigurasi berjalan sepenuhnya di browser Anda. Tidak ada detail proyek, jalur file, atau data konfigurasi yang dikirim ke mana pun — sepenuhnya privat dan bisa dipakai offline.
- GZIP + Brotli + cuplikan penyajian Nginx: hasilkan plugin kompresi hanya GZIP, hanya Brotli, atau keduanya dalam satu konfigurasi — plus direktif Nginx gzip_static dan brotli_static yang sesuai untuk menyajikan file pra-kompresi.
- 100% Gratis Selamanya: hasilkan konfigurasi kompresi webpack untuk proyek sebanyak yang Anda perlukan, sepenuhnya gratis. Tanpa akun, tanpa langganan, tanpa batas, dan tanpa iklan.
Apa Itu Plugin Kompresi Webpack?
Plugin kompresi Webpack (compression-webpack-plugin) adalah plugin webpack yang mempra-kompresi keluaran build Anda saat proses build — membuat file .gz dan .br di samping aset aslinya. Ketika server web Anda dikonfigurasi untuk menyajikan file pra-kompresi ini (melalui gzip_static on di Nginx), biaya CPU per permintaan untuk kompresi on-the-fly menjadi hilang. Pembuat konfigurasi plugin kompresi Webpack gratis kami menghasilkan cuplikan webpack.config.js yang lengkap dan siap produksi — semuanya dihasilkan secara lokal di browser Anda tanpa pendaftaran.
Cara Kerja Pembuat Konfigurasi Plugin Kompresi Webpack Kami
Berikut adalah tiga langkahnya.
- Atur Opsi Anda: pilih algoritme GZIP, Brotli, atau keduanya. Atur tingkat kompresi, threshold, minRatio, pola aset, dan format modul menggunakan kontrol interaktif.
- Hasilkan Secara Instan: klik «Hasilkan Konfigurasi» — pembuat konfigurasi menghasilkan cuplikan webpack.config.js lengkap dengan instance plugin yang benar, sepenuhnya di browser Anda.
- Salin dan Terapkan: pasang plugin, tambahkan cuplikan ke konfigurasi webpack Anda, jalankan build, dan konfigurasikan server web Anda untuk menyajikan file pra-kompresi menggunakan cuplikan Nginx yang disertakan.
Apa Saja Isi Konfigurasi yang Dihasilkan
Berikut elemen yang dihasilkan.
- Instance CompressionPlugin: satu untuk GZIP (algorithm: 'gzip') dan/atau satu untuk Brotli (algorithm: 'brotliCompress') dengan tingkat dan opsi yang Anda konfigurasi.
- Threshold dan minRatio: lewati kompresi aset yang terlalu kecil atau yang tidak terkompresi cukup baik sehingga tidak sepadan dengan overhead-nya.
- Pola aset: regex yang hanya cocok dengan jenis file yang layak dikompresi — secara default JS, CSS, HTML, SVG, JSON, dan WOFF2.
- Cuplikan penyajian Nginx: direktif gzip_static dan brotli_static yang sesuai untuk menyajikan file pra-kompresi dari server web Anda.
Pra-Kompresi vs. Kompresi On-the-Fly
Kompresi on-the-fly (misalnya Nginx gzip on) mengompresi setiap respons pada saat permintaan — menambah beban CPU dan latensi. Pra-kompresi dengan plugin kompresi Webpack mengompresi aset sekali saat build, sehingga server hanya membaca dan menyajikan file pra-kompresi dengan nol biaya CPU per permintaan. Untuk aset statis bertrafik tinggi, pra-kompresi selalu lebih disukai. Pembuat konfigurasi plugin kompresi Webpack memudahkan penambahan pra-kompresi ke proyek berbasis webpack apa pun.
Pertanyaan yang Sering Diajukan
Pembuat konfigurasi plugin kompresi Webpack menghasilkan cuplikan webpack.config.js siap pakai yang menambahkan pra-kompresi GZIP dan/atau Brotli ke build webpack Anda melalui paket compression-webpack-plugin. Atur tingkat kompresi, threshold, minRatio, dan pola aset — pembuat konfigurasi langsung mengeluarkan instance plugin yang benar. Pembuat online gratis kami berjalan sepenuhnya di browser Anda tanpa pendaftaran.
Kompresi on-the-fly (misalnya Nginx gzip on) mengompresi setiap respons HTTP pada saat permintaan, sehingga menambah beban CPU dan latensi. Pra-kompresi dengan plugin kompresi Webpack mengompresi aset sekali saat build — server hanya membaca dan menyajikan file .gz atau .br yang sudah dikompresi tanpa biaya CPU per permintaan. Untuk aset statis bertrafik tinggi, pra-kompresi selalu lebih disukai.
Ya. Pembuat konfigurasi plugin kompresi Webpack berjalan sepenuhnya di browser Anda — semua pembuatan konfigurasi dilakukan secara lokal menggunakan JavaScript. Tidak ada detail proyek, jalur file, atau data konfigurasi yang dikirim ke server mana pun. Pengaturan Anda tidak pernah meninggalkan perangkat.
Ya. Pembuat konfigurasi plugin kompresi Webpack 100% gratis tanpa pendaftaran, tanpa langganan, dan tanpa batas. Hasilkan konfigurasi untuk proyek sebanyak yang Anda perlukan.
Ya — plugin kompresi Webpack membuat file .gz dan .br saat build, tetapi server web Anda harus dikonfigurasi untuk menyajikannya. Untuk Nginx, tambahkan gzip_static on untuk GZIP dan brotli_static on untuk Brotli (memerlukan modul ngx_brotli). Untuk Apache, gunakan mod_deflate dengan penyajian file pra-kompresi. Pembuat konfigurasi menyertakan cuplikan Nginx di hasilnya.
Untuk GZIP, tingkat 9 direkomendasikan pada pra-kompresi statis karena biaya CPU dibayar sekali saat build. Untuk Brotli, kualitas 11 mencapai kompresi maksimum — biasanya 20-26% lebih baik daripada GZIP tingkat 9. Untuk pipeline CI/CD yang mengutamakan waktu build, gunakan GZIP tingkat 6 dan Brotli kualitas 6 untuk menyeimbangkan rasio kompresi dan kecepatan build.
Opsi threshold (dalam byte) memberi tahu plugin untuk melewati kompresi aset yang lebih kecil dari ukuran yang ditentukan. Nilai default 10.240 byte (10 KB) adalah titik awal yang baik — mengompresi file yang sangat kecil menambahkan overhead tanpa penghematan berarti. Naikkan nilai ini jika ingin melewati lebih banyak file kecil, atau setel 0 untuk mengompresi semuanya.
Opsi minRatio memberi tahu plugin untuk tidak membuat file terkompresi jika rasio kompresinya kurang baik. minRatio 0,8 berarti: hanya buat file terkompresi jika ukurannya paling banyak 80% dari ukuran asli (yakni hemat minimal 20%). Setel 1 untuk selalu membuat file terkompresi, atau turunkan untuk menuntut kompresi yang lebih baik.
Bisa. Untuk Create React App, gunakan react-app-rewired atau CRACO untuk menyesuaikan konfigurasi webpack. Untuk Angular CLI, gunakan @angular-builders/custom-webpack. Untuk Vue CLI, tambahkan plugin di vue.config.js pada bagian configureWebpack. Pembuat ini menghasilkan konfigurasi CompressionPlugin standar yang berfungsi dengan alat build berbasis webpack apa pun.