Codelab ini menjelaskan cara meminifikasi dan mengompresi paket JavaScript untuk aplikasi berikut meningkatkan performa halaman dengan mengurangi ukuran permintaan aplikasi.
Ukur
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:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Network
- Centang kotak Disable cache.
- 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
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.
- 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 responsContent-Encoding
ditetapkan kegzip
. - 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.