Meminifikasi dan mengompresi payload jaringan dengan gzip

Houssein Djirdeh

Untuk mengikuti codelab ini, buka Glitch ini di tab kedua.

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

Codelab ini menjelaskan cara meminifikasi dan mengompresi paket JavaScript untuk aplikasi berikut meningkatkan performa halaman dengan mengurangi ukuran permintaan aplikasi.

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 ditampilkan di aplikasi.

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

• Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar Penuh .

Aplikasi ini, yang juga tercakup dalam codelab "Menghapus kode yang tidak digunakan", memungkinkan Anda memilih anak kucing favorit Anda. 🐈

Sekarang lihat seberapa besar aplikasi ini:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Network
3. Centang kotak Disable cache.
4. Muat ulang aplikasi.

Meskipun banyak progres yang dilakukan dalam codelab "Remove unused code" untuk memangkas ukuran paket ini ke bawah, 225 KB masih cukup besar.

Minifikasi

Pertimbangkan blok kode berikut.

function soNice() {
  let counter = 0;

  while (counter < 100) {
    console.log('nice');
    counter++;
  }
}

Jika fungsi ini disimpan dalam file tersendiri, ukuran file sekitar 112 B (byte).

Jika semua spasi kosong telah dihapus, kode yang dihasilkan akan terlihat seperti ini:

function soNice(){let counter=0;while(counter<100){console.log("nice");counter++;}}

Ukuran file sekarang akan menjadi sekitar 83 B. Jika kemudian rusak dengan mengurangi panjang nama variabel dan memodifikasi beberapa ekspresi, kode akhir mungkin akan terlihat seperti ini:

function soNice(){for(let i=0;i<100;)console.log("nice"),i++}

Ukuran file sekarang mencapai 62 B.

Dengan setiap langkah, kode menjadi lebih sulit dibaca. Namun, mesin JavaScript browser menginterpretasikan keduanya dengan cara yang sama persis. Manfaat meng-obfuscate kode dengan cara ini dapat membantu mencapai ukuran file yang lebih kecil. 112 B memang bukan permulaan, tapi masih ada pengurangan ukuran sebesar 50%!

Dalam aplikasi ini, webpack versi 4 digunakan sebagai pemaket modul. Versi spesifik dapat dilihat di package.json.

"devDependencies": {
  //...
  "webpack": "^4.16.4",
  //...
}

Versi 4 sudah meminifikasi paket secara default selama mode produksi. Plugin ini menggunakan TerserWebpackPlugin untuk Terser. Terser adalah alat populer yang digunakan untuk mengompresi kode JavaScript.

Untuk mengetahui tampilan kode yang diminifikasi, lanjutkan dan klik main.bundle.js saat masih berada di panel Jaringan DevTools. Sekarang, klik tab Respons.

Kode dalam bentuk akhirnya, yang diminifikasi dan rusak, ditampilkan dalam isi respons. Untuk mengetahui seberapa besar paket jika tidak diminifikasi, buka webpack.config.js dan perbarui konfigurasi mode.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Muat ulang aplikasi dan lihat lagi ukuran paket melalui panel Jaringan DevTools

Itu perbedaan yang cukup besar! 😅

Pastikan untuk mengembalikan perubahan di sini sebelum melanjutkan.

module.exports = {
  mode: 'production',
  mode: 'none',
  //...

Penyertaan proses untuk meminifikasi kode dalam aplikasi bergantung pada alat yang Anda gunakan:

• Jika webpack v4 atau yang lebih tinggi digunakan, tidak ada pekerjaan tambahan yang perlu dilakukan karena kode diminifikasi secara default dalam mode produksi. 👍
• Jika webpack versi lama digunakan, instal dan sertakan TerserWebpackPlugin ke dalam proses build webpack. Dokumentasi ini menjelaskan hal ini secara mendetail.
• Plugin minifikasi lainnya juga ada dan dapat digunakan sebagai gantinya, seperti BabelMinifyWebpackPlugin dan ClosureCompilerPlugin.
• Jika pemaket modul tidak digunakan sama sekali, gunakan Terser sebagai alat CLI atau sertakan langsung sebagai dependensi.

Kompresi

Peringatan: Banyak platform hosting, CDN, dan server reverse proxy mengenkode aset dengan kompresi secara default atau memungkinkan Anda mengonfigurasinya dengan mudah. Artinya, Anda mungkin jarang perlu menyiapkan server yang serupa dengan cara melakukannya di bagian kompresi tutorial ini, tetapi Anda dapat terus membaca jika tertarik untuk mempelajari cara kerja kompresi.

Meskipun istilah "kompresi" terkadang longgar digunakan untuk menjelaskan cara kode dikurangi selama proses minifikasi, istilah ini sebenarnya tidak dikompresi dalam arti literal.

Kompresi biasanya mengacu pada kode yang telah dimodifikasi menggunakan algoritma kompresi data. Tidak seperti minifikasi yang pada akhirnya memberikan kode yang sangat valid, kode terkompresi harus didekompresi sebelum digunakan.

Dengan setiap permintaan dan respons HTTP, browser dan server web dapat menambahkan headers untuk menyertakan informasi tambahan tentang aset yang diambil atau diterima. Ini dapat dilihat di tab Headers dalam panel Jaringan DevTools tempat tiga jenis ditampilkan:

• General mewakili header umum yang relevan dengan seluruh interaksi permintaan-respons.
• Header Respons menampilkan daftar header khusus untuk respons sebenarnya dari server.
• Request Header menampilkan daftar header yang dilampirkan ke permintaan klien.

Lihat header accept-encoding di Request Headers.

accept-encoding digunakan oleh browser untuk menentukan format encoding konten, atau algoritma kompresi, yang didukungnya. Ada banyak algoritma kompresi teks di luar sana, tetapi hanya ada tiga yang didukung di sini untuk kompresi (dan dekompresi) permintaan jaringan HTTP:

• Gzip (gzip): Format kompresi yang paling banyak digunakan untuk interaksi server dan klien. Browser ini dibuat berdasarkan algoritma Deflate dan didukung di semua browser saat ini.
• Mengeluarkan (deflate): Tidak umum digunakan.
• Brotli (br): Algoritme kompresi baru yang bertujuan untuk lebih meningkatkan rasio kompresi, sehingga dapat menghasilkan halaman yang lebih cepat dimuat. Fitur ini didukung di versi terbaru sebagian besar browser.

Aplikasi contoh dalam tutorial ini identik dengan aplikasi yang diselesaikan di codelab "Remove unused code", kecuali karena Express sekarang digunakan sebagai framework server. Di beberapa bagian selanjutnya, kompresi statis dan dinamis akan dibahas.

Kompresi dinamis

Kompresi dinamis melibatkan kompresi aset dengan cepat saat aset diminta oleh browser.

Kelebihan

• Pembuatan dan update aset versi terkompresi yang disimpan tidak perlu dilakukan.
• Mengompresi dengan cepat sangat efektif untuk halaman web yang dibuat secara dinamis.

Kekurangan

• Mengompresi file di 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.

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);
});

Yang saat ini dilakukan adalah mengimpor express dan menggunakan middleware express.static untuk memuat semua file HTML, JS, serta CSS statis di direktori public/ (dan file tersebut dibuat oleh webpack dengan setiap build).

Untuk memastikan semua aset dikompresi setiap kali diminta, library middleware kompresi dapat digunakan. Mulai dengan menambahkannya sebagai devDependency di package.json:

"devDependencies": {
  //...
  "compression": "^1.7.3"
},

Dan impor ke file server, server.js:

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

Dan tambahkan sebagai middleware sebelum express.static dipasang:

//...

const app = express();

app.use(compression());

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

//...

Sekarang muat ulang aplikasi dan lihat ukuran paket di panel Network.

Dari 225 KB menjadi 61,6 KB! Dalam Response Headers sekarang, header content-encoding menunjukkan bahwa server mengirimkan file ini yang dienkode dengan gzip.

Kompresi statis

Ide di balik kompresi statis adalah membuat aset dikompresi dan disimpan sebelum waktu.

Kelebihan

• Latensi karena tingkat kompresi yang tinggi tidak lagi menjadi masalah. Tidak perlu ada yang terjadi dengan cepat untuk mengompresi file karena file ini sekarang dapat diambil secara langsung.

Kekurangan

• Aset perlu 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 dimodifikasi untuk mengompresi aset sebagai bagian dari langkah build. CompressionPlugin dapat digunakan untuk ini.

Mulai dengan menambahkannya sebagai devDependency di package.json:

"devDependencies": {
  //...
  "compression-webpack-plugin": "^1.1.11"
},

Seperti plugin webpack lainnya, impor plugin ini dalam file konfigurasi, webpack.config.js:

const path = require("path");

//...

const CompressionPlugin = require("compression-webpack-plugin");

Dan sertakan dalam array plugins:

module.exports = {
  //...
  plugins: [
    //...
    new CompressionPlugin()
  ]
}

Secara default, plugin mengompresi file build menggunakan gzip. Lihat dokumentasi untuk mempelajari cara menambahkan opsi untuk menggunakan algoritma yang berbeda atau menyertakan/mengecualikan file tertentu.

Saat aplikasi dimuat ulang dan di-build ulang, versi terkompresi dari paket utama kini akan dibuat. Buka Glitch Console untuk melihat isi direktori public/ akhir yang disalurkan oleh server Node.

Catatan: File git.ignore mencakup direktori public/. Direktori yang berisi file build biasanya disertakan di sini. Glitch juga menyembunyikan file ini dari pohon editor.

• Klik tombol Tools.
• Klik tombol Konsol.
• Di konsol, jalankan perintah berikut untuk berubah menjadi direktori public dan lihat semua filenya:

cd public
ls

Versi paket yang di-gzip, main.bundle.js.gz, sekarang juga disimpan di sini. CompressionPlugin juga mengompresi index.html secara default.

Hal berikutnya yang perlu dilakukan adalah memberi tahu server untuk mengirim file yang di-gzip ini setiap kali versi JS aslinya diminta. Hal ini dapat dilakukan dengan menentukan rute baru di server.js sebelum file ditayangkan dengan express.static.

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

app.get('*.js', (req, res, next) => {
  req.url = req.url + '.gz';
  res.set('Content-Encoding', 'gzip');
  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. Rute bekerja seperti ini:

• Menentukan '*.js' sebagai argumen pertama berarti argumen ini berfungsi untuk setiap endpoint yang diaktifkan untuk mengambil file JS.
• Dalam callback, .gz dilampirkan ke URL permintaan dan header respons Content-Encoding ditetapkan ke gzip.
• Terakhir, next() memastikan bahwa urutan tersebut berlanjut ke callback yang mungkin berikutnya.

Setelah aplikasi dimuat ulang, lihat panel Network sekali lagi.

Sama seperti sebelumnya, pengurangan ukuran paket secara signifikan.

Kesimpulan

Codelab ini membahas proses meminifikasi dan mengompresi kode sumber. Kedua teknik ini menjadi default di banyak alat yang tersedia saat ini. Jadi, penting untuk mengetahui apakah toolchain Anda sudah mendukungnya atau apakah Anda harus mulai menerapkan kedua proses sendiri.