Meminifikasi dan mengompresi payload jaringan dengan brotli

Michael DiBlasio

Tips: Untuk mengikuti codelab ini, buka demo Glitch ini di tab kedua.

Catatan: Codelab ini menggunakan Chrome DevTools. Download Chrome jika Anda belum memilikinya.

Codelab ini merupakan ekstensi dari codelab Memperkecil dan mengompresi payload jaringan dan mengasumsikan bahwa Anda sudah memahami konsep dasar kompresi. Dibandingkan dengan algoritma kompresi lain seperti gzip, codelab ini mengeksplorasi cara kompresi Brotli (br) dapat mengurangi rasio kompresi dan ukuran keseluruhan aplikasi Anda lebih lanjut.

Ukur

Catatan: Karena webpack digunakan dalam aplikasi ini, setiap perubahan yang dilakukan pada kode akan memicu build baru yang dapat memerlukan waktu beberapa detik. Setelah selesai, Anda akan melihat perubahan yang diterapkan dalam aplikasi.

Sebelum mulai menambahkan pengoptimalan, sebaiknya analisis terlebih dahulu status aplikasi saat ini.

1. Klik Remix to Edit untuk membuat project dapat diedit.
2. Untuk melihat pratinjau situs, tekan View App. Lalu tekan Fullscreen .

Dalam codelab Meminifikasi dan mengompresi payload jaringan sebelumnya, kami mengurangi ukuran main.js dari 225 KB menjadi 61,6 KB. Dalam codelab ini, Anda akan mempelajari cara kompresi Brotli dapat mengurangi ukuran paket ini lebih jauh lagi.

Kompresi Brotli

Peringatan: Banyak platform hosting, CDN, dan server reverse proxy mengenkode aset dengan kompresi secara default atau memungkinkan Anda mengonfigurasinya dengan lebih mudah. Jika platform hosting Anda mendukung Brotli, Anda mungkin tidak perlu menyiapkan server untuk mengompresi aset dengan Brotli seperti yang dijelaskan dalam tutorial ini.

Brotli adalah algoritma kompresi yang lebih baru yang dapat memberikan hasil kompresi teks yang lebih baik daripada gzip. Menurut CertSimple, performa Brotli adalah:

• 14% lebih kecil daripada gzip untuk JavaScript
• 21% lebih kecil dari gzip untuk HTML
• 17% lebih kecil daripada gzip untuk CSS

Untuk menggunakan Brotli, server Anda harus mendukung HTTPS. Brotli didukung di semua browser modern. Browser yang mendukung Brotli akan menyertakan br di header Accept-Encoding:

Accept-Encoding: gzip, deflate, br

Anda dapat menentukan algoritma kompresi yang digunakan menggunakan kolom Content-Encoding di tab Jaringan Chrome Developer Tools (Command+Option+I atau Ctrl+Alt+I):

Cara mengaktifkan Brotli

Cara Anda menyiapkan server web untuk mengirim resource yang dienkode Brotli bergantung pada cara Anda berencana mengenkodenya. Opsi Anda adalah mengompresi resource secara dinamis dengan Brotli pada saat permintaan (dinamis), atau mengenkode resource terlebih dahulu sehingga resource sudah dikompresi pada saat pengguna memintanya (statis).

Kompresi dinamis

Kompresi dinamis melibatkan kompresi aset secara langsung saat diminta oleh browser.

Kelebihan

• Pembuatan dan pembaruan versi aset terkompresi yang disimpan tidak perlu dilakukan.
• Kompresi langsung sangat cocok untuk halaman web yang dibuat secara dinamis.

Kekurangan

• Mengompresi file pada tingkat yang lebih tinggi untuk mencapai rasio kompresi yang lebih baik memerlukan waktu lebih lama. Hal ini dapat menyebabkan penurunan performa karena pengguna menunggu aset dikompresi sebelum dikirim oleh server.

Kompresi dinamis dengan Node dan Express

File server.js bertanggung jawab untuk menyiapkan server Node yang menghosting aplikasi.

const express = require('express');
const app = express();
app.use(express.static('public'));

const listener = app.listen(process.env.PORT, function() {
  console.log(`Your app is listening on port ${listener.address().port}`);
});

Tindakan ini hanya 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"
},

Dan impor ke file server, server.js:

const express = require('express');
const shrinkRay = require('shrink-ray');

Dan tambahkan sebagai middleware sebelum express.static dipasang:

// ...
const 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).

Catatan: Brotli memiliki sebelas tingkat kualitas, mulai dari 0 (tanpa kompresi) hingga 9 (kompresi maksimum). Kualitas 1 sangat cepat, tetapi kurang efektif, sedangkan setelan kualitas 11 sangat lambat, tetapi memberikan penghematan besar dalam ukuran file. Perhatikan bahwa tidak seperti library brotli standar, yang secara default menggunakan kualitas 11, shrink-ray secara default menggunakan kualitas 4, yang umumnya lebih sesuai untuk konten dinamis. Anda dapat menyesuaikan parameter algoritma brotli dengan meneruskan parameter options ke shrinkRay([options]).

Kompresi statis

Ide di balik kompresi statis adalah mengompresi dan menyimpan aset terlebih dahulu.

Kelebihan

• Latensi karena tingkat kompresi yang tinggi tidak lagi menjadi masalah. Tidak ada yang perlu dilakukan secara langsung untuk mengompresi file karena file kini dapat diambil secara langsung.

Kekurangan

• Aset perlu dikompresi dengan setiap build. Waktu build dapat meningkat secara signifikan jika tingkat kompresi yang tinggi digunakan.

Kompresi statis dengan Node dan Express dengan 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 tujuan ini.

Mulailah dengan menambahkannya sebagai devDependency di package.json:

"devDependencies": {
  // ...
 "brotli-webpack-plugin": "^1.1.0"
},

Seperti plugin webpack lainnya, impor plugin ini 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 paket utama yang dikompresi kini akan dibuat. Buka Glitch Console untuk melihat isi direktori public/ akhir yang disajikan oleh server Node.

1. Klik tombol Alat.
2. Klik tombol Console.
3. Di konsol, jalankan perintah berikut untuk beralih ke direktori public dan melihat semua filenya:

cd public
ls -lh

Versi paket yang dikompresi brotli, main.bundle.js.br, kini juga disimpan di sini dan ukurannya ~76% lebih kecil (225 KB versus 53 KB) daripada main.bundle.js.

Selanjutnya, beri tahu server untuk mengirim file yang dikompresi dengan brotli ini setiap kali versi JS aslinya diminta. Hal ini dapat dilakukan dengan menentukan rute baru di server.js sebelum file disajikan dengan express.static.

const express = require('express');
const 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 seperti ini:

• Menentukan '*.js' sebagai argumen pertama berarti hal ini berfungsi untuk setiap endpoint yang diaktifkan untuk mengambil file JS.
• Dalam callback, .br dilampirkan ke URL permintaan dan header respons Content-Encoding ditetapkan ke br.
• Header Content-Type disetel ke application/javascript; charset=UTF-8 untuk menentukan jenis MIME.
• Terakhir, next() memastikan bahwa urutan berlanjut ke callback berikutnya.

Karena beberapa browser mungkin tidak mendukung kompresi brotli, pastikan brotli didukung sebelum menampilkan file yang dikompresi dengan brotli dengan memeriksa apakah header permintaan Accept-Encoding menyertakan 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';
    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 Anda lebih lanjut.

Kesimpulan

Codelab ini mengilustrasikan cara brotli dapat mengurangi ukuran keseluruhan aplikasi Anda lebih lanjut. Jika didukung, brotli adalah algoritma kompresi yang lebih efektif daripada gzip.

Peringatan: Ingatlah untuk memeriksa apakah CDN Anda mendukung brotli sebelum menerapkan secara manual. Jika Anda perlu menerapkan brotli secara manual (seperti yang dijelaskan dalam codelab ini), tetapi memiliki dukungan CDN untuk algoritma kompresi lain seperti gzip, sebaiknya pertimbangkan manfaat brotli dibandingkan dengan upaya yang diperlukan untuk menerapkannya.