Codelab ini adalah ekstensi codelab Minifikasi dan kompresi payload jaringan
dan mengasumsikan Anda telah memahami konsep dasar-dasar kompresi. Dibandingkan
dengan algoritma kompresi lainnya seperti gzip
, codelab ini akan mempelajari cara
kompresi Brotli dapat lebih mengurangi rasio kompresi dan ukuran
aplikasi Anda secara keseluruhan.
Ukur
Sebelum mulai menambahkan pengoptimalan, sebaiknya Anda menganalisis status aplikasi saat ini terlebih dahulu.
- Klik Remix to Edit agar project dapat diedit.
- Untuk melihat pratinjau situs, tekan View App, lalu tekan Fullscreen .
Di codelab Minifikasi dan kompresi payload jaringan sebelumnya,
kami mengurangi ukuran main.js
dari 225 KB menjadi 61,6 KB. Dalam codelab ini, Anda
akan mempelajari bagaimana kompresi Brotli dapat mengurangi ukuran paket ini lebih jauh.
Kompresi Brotli
Brotli
adalah algoritma kompresi lebih baru yang dapat memberikan hasil kompresi teks
yang lebih baik daripada gzip
. Menurut CertSimple, performa Brotli:
- 14% lebih kecil dari
gzip
untuk JavaScript - 21% lebih kecil dari
gzip
untuk HTML - 17% lebih kecil dari
gzip
untuk CSS
Untuk menggunakan Brotli, server Anda harus mendukung HTTPS. Brotli didukung di versi terbaru sebagian besar browser. Browser
yang mendukung Brotli akan menyertakan br
di header Accept-Encoding
:
Accept-Encoding: gzip, deflate, br
Anda dapat menentukan algoritme kompresi mana yang digunakan melalui kolom Content-Encoding
di tab Jaringan Chrome Developer Tools (Command+Option+I
atau
Ctrl+Alt+I
):
Mengaktifkan Brotli
Kompresi dinamis
Kompresi dinamis melibatkan kompresi aset dengan cepat saat diminta oleh browser.
Kelebihan
- Anda tidak perlu membuat dan mengupdate versi terkompresi yang tersimpan dari aset.
- Mengompresi dengan cepat berfungsi sangat baik untuk halaman web yang dihasilkan secara dinamis.
Kekurangan
- Mengompresi file pada tingkat yang lebih tinggi untuk mencapai rasio kompresi yang lebih baik memerlukan waktu yang lebih lama. Hal ini dapat menyebabkan hit performa saat pengguna menunggu aset untuk dikompresi sebelum dikirim oleh server.
Kompresi dinamis dengan Node/Express
File server.js
bertanggung jawab untuk menyiapkan server Node yang menghosting
aplikasi.
var express = require('express');
var app = express();
app.use(express.static('public'));
var listener = app.listen(process.env.PORT, function() {
console.log('Your app is listening on port ' + listener.address().port);
});
Yang dilakukan saat ini adalah mengimpor express
dan menggunakan middleware express.static
untuk memuat semua file HTML, JS, dan CSS statis di
public/directory
(dan file tersebut dibuat oleh webpack dengan setiap build).
Untuk memastikan semua aset dikompresi menggunakan brotli setiap kali
diminta, modul shrink-ray
dapat digunakan. Mulailah dengan menambahkannya sebagai devDependency
di package.json
:
"devDependencies": {
//...
"shrink-ray": "^0.1.3"
},
Lalu impor ke file server, server.js
:
var express = require('express');
var shrinkRay = require('shrink-ray');
Dan tambahkan sebagai middleware sebelum express.static
dipasang:
//...
var app = express();
// compress all requests
app.use(shrinkRay());
app.use(express.static('public'));
Sekarang muat ulang aplikasi, dan lihat ukuran paket di panel Jaringan:
Sekarang Anda dapat melihat brotli
diterapkan dari bz
di header Content-Encoding
.
main.bundle.js
dikurangi dari 225 KB menjadi 53,1 KB. Ukuran ini ~14% lebih kecil
dibandingkan dengan gzip
(61,6 KB).
Kompresi statis
Ide di balik kompresi statis adalah untuk membuat aset dikompresi dan disimpan terlebih dahulu.
Kelebihan
- Latensi karena tingkat kompresi yang tinggi bukan lagi masalah penting. Tidak ada yang perlu dilakukan dengan cepat untuk mengompresi file karena sekarang file tersebut dapat diambil secara langsung.
Kekurangan
- Aset harus dikompresi dengan setiap build. Waktu build dapat meningkat secara signifikan jika tingkat kompresi tinggi digunakan.
Kompresi statis dengan Node/Express dan webpack
Karena kompresi statis melibatkan kompresi file terlebih dahulu, setelan
webpack dapat diubah untuk mengompresi aset sebagai bagian dari langkah build. brotli-webpack-plugin
dapat digunakan untuk ini.
Mulailah dengan menambahkannya sebagai devDependency
di package.json
:
"devDependencies": {
//...
"brotli-webpack-plugin": "^1.1.0"
},
Seperti plugin webpack lainnya, impor plugin webpack dalam file konfigurasi,
webpack.config.js
:
var path = require("path");
//...
var BrotliPlugin = require('brotli-webpack-plugin');
Dan sertakan dalam array plugin:
module.exports = {
// ...
plugins: [
// ...
new BrotliPlugin({
asset: '[file].br',
test: /\.(js)$/
})
]
},
Array plugin menggunakan argumen berikut:
asset
: Nama aset target.[file]
diganti dengan nama file aset asli.test
: Semua aset yang cocok dengan RegExp ini (yaitu, aset JavaScript yang diakhiri dengan.js
) akan diproses.
Misalnya, main.js
akan diganti namanya menjadi main.js.br
.
Saat aplikasi dimuat ulang dan di-build ulang, versi terkompresi paket utama
kini akan dibuat. Buka Glitch Console untuk melihat isi direktori
public/
akhir yang disalurkan oleh server Node.
- Klik tombol Alat.
- Klik tombol Konsol.
- Di konsol, jalankan perintah berikut untuk beralih ke direktori
public
dan melihat semua filenya:
cd public
ls -lh
Versi paket terkompresi Brotli, main.bundle.js.br
, kini juga disimpan
di sini dan berukuran ~76% lebih kecil (225 KB vs. 53 KB) daripada
main.bundle.js
.
Selanjutnya, beri tahu server untuk mengirim file yang dikompresi brotli ini setiap kali
versi JS aslinya diminta. Hal ini dapat dilakukan dengan menentukan rute baru di server.js
sebelum file disalurkan dengan express.static
.
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
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'));
app.get
digunakan untuk memberi tahu server cara merespons permintaan GET
untuk
endpoint tertentu. Fungsi callback kemudian digunakan untuk menentukan cara menangani permintaan ini. Rutenya berfungsi seperti ini:
- Menentukan
'*.js'
sebagai argumen pertama berarti argumen ini berfungsi untuk setiap endpoint yang diaktifkan untuk mengambil file JS. - Dalam callback,
.br
dilampirkan ke URL permintaan dan header responsContent-Encoding
ditetapkan kebr
. - Header
Content-Type
ditetapkan keapplication/javascript; charset=UTF-8
untuk menentukan jenis MIME. - Terakhir,
next()
akan memastikan urutan berlanjut ke callback yang mungkin berikutnya.
Karena beberapa browser mungkin tidak mendukung kompresi brotli, pastikan brotli
didukung sebelum menampilkan file yang dikompresi brotli dengan memeriksa
header permintaan Accept-Encoding
mencakup br
:
var express = require('express');
var app = express();
app.get('*.js', (req, res, next) => {
if (req.header('Accept-Encoding').includes('br')) {
req.url = req.url + '.br';
console.log(req.header('Accept-Encoding'));
res.set('Content-Encoding', 'br');
res.set('Content-Type', 'application/javascript; charset=UTF-8');
}
next();
});
app.use(express.static('public'));
Setelah aplikasi dimuat ulang, lihat panel Jaringan sekali lagi.
Berhasil! Anda telah menggunakan kompresi Brotli untuk mengompresi aset lebih lanjut!
Kesimpulan
Codelab ini menggambarkan bagaimana brotli
dapat semakin mengurangi ukuran
keseluruhan aplikasi. Jika didukung, brotli
adalah algoritma kompresi yang lebih kuat daripada
gzip
.