Codelab ini mempelajari cara meminifikasi dan mengompresi JavaScript paket untuk aplikasi berikut meningkatkan performa halaman dengan mengurangi ukuran permintaan aplikasi.
Ukur
Sebelum menambah pengoptimalan, sebaiknya Anda menganalisis status aplikasi saat ini.
- Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh .
Aplikasi ini, yang juga tercakup dalam pasal "Hapus yang tidak digunakan "code", memungkinkan Anda memilih favorit anak kucing. 🐈
Sekarang lihat seberapa besar aplikasi ini:
- Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
- Klik tab Jaringan.
- Centang kotak Disable cache.
- Muat ulang aplikasi.
Meskipun ada banyak progres dalam "Hapus kode yang tidak digunakan" Untuk memangkas ukuran paket ini, 225 KB masih cukup besar.
Minifikasi
Pertimbangkan blok kode berikut.
function soNice() {
let counter = 0;
while (counter < 100) {
console.log('nice');
counter++;
}
}
Jika {i>function<i} ini disimpan dalam {i>file<i} sendiri, ukuran filenya sekitar 112 B (byte).
Jika semua spasi kosong 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 model semakin 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 kini mencapai 62 B.
Dengan setiap langkah, kode menjadi lebih sulit dibaca. Namun, metode Mesin JavaScript menginterpretasikan masing-masing dengan cara yang sama persis. Tujuan mengaburkan kode dengan cara ini dapat membantu mencapai ukuran file yang lebih kecil ukuran. 112 B awalnya tidak terlalu banyak, tetapi masih ada 50% pengurangan ukuran!
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. Model ini menggunakan
TerserWebpackPlugin
plugin untuk Terser.
Terser adalah alat populer yang digunakan untuk mengompresi kode JavaScript.
Untuk mendapatkan gambaran tentang tampilan kode yang diminifikasi, lanjutkan dan klik
main.bundle.js
saat masih berada di panel Network DevTools. Sekarang klik
Tab Response.
Kode dalam bentuk akhirnya, yang diminifikasi dan dimodifikasi, ditampilkan dalam isi respons.
Untuk mengetahui seberapa besar ukuran paket jika tidak diminifikasi, buka
webpack.config.js
dan perbarui konfigurasi mode
.
module.exports = {
mode: 'production',
mode: 'none',
//...
Muat ulang aplikasi dan lihat kembali ukuran paket melalui Panel Jaringan DevTools
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 tersebut yang Anda gunakan:
- Jika webpack v4 atau yang lebih baru digunakan, tidak ada pekerjaan tambahan yang perlu dilakukan karena kode diminifikasi secara {i> default<i} dalam mode produksi. 👍
- Jika webpack versi lama digunakan, instal dan sertakan
TerserWebpackPlugin
ke dalam proses build webpack. Dokumentasi menjelaskan hal ini secara rinci. - 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 menyertakannya langsung sebagai dependensi.
Kompresi
Meskipun istilah “kompresi” kadang-kadang digunakan secara longgar untuk menjelaskan bagaimana kode dikurangi selama proses minifikasi, sebenarnya data itu tidak dikompresi dalam artinya secara harfiah.
Kompresi biasanya mengacu pada kode yang telah dimodifikasi menggunakan data algoritma kompresi. Tidak seperti minifikasi yang pada akhirnya memberikan kode yang valid, kode yang dikompresi perlu didekompresi sebelum digunakan.
Dengan setiap permintaan dan respons HTTP, {i>browser<i} dan server web dapat menambahkan
headers untuk menyertakan
informasi tambahan tentang aset yang diambil atau diterima. Dapat berupa
terlihat di tab Headers
dalam panel Jaringan DevTools tempat tiga jenis
ditampilkan:
- General mewakili header umum yang relevan dengan seluruh permintaan-respons interaksi.
- Header Respons menampilkan daftar header khusus untuk respons sebenarnya dari server.
- Header Permintaan menampilkan daftar header yang dilampirkan ke permintaan oleh dengan klien besar.
Lihat header accept-encoding
di Request Headers
.
accept-encoding
digunakan browser untuk menentukan konten
format encoding, atau algoritma kompresi, yang didukungnya. Ada banyak
algoritma kompresi teks yang ada, tetapi hanya ada tiga yang
didukung di sini untuk kompresi (dan dekompresi) permintaan jaringan HTTP:
- Gzip (
gzip
): Kompresi yang paling banyak digunakan untuk interaksi server dan klien. Dibangun di atas Deflate algoritme dan didukung di semua browser saat ini. - Deflat (
deflate
): Tidak biasa digunakan. - Brotli (
br
): Kompresi yang lebih baru yang bertujuan untuk lebih meningkatkan rasio kompresi, yang dapat menghasilkan pemuatan halaman yang lebih cepat. Alat ini didukung dalam versi terbaru sebagian besar browser.
Aplikasi contoh dalam tutorial ini sama dengan aplikasi yang diselesaikan dalam Codelab "Menghapus kode yang tidak digunakan", kecuali fakta bahwa Express kini digunakan sebagai framework server. Dalam beberapa bagian, baik kompresi statis maupun dinamis dieksplorasi.
Kompresi dinamis
Kompresi dinamis melibatkan kompresi aset dengan cepat saat aset tersebut yang diminta oleh browser.
Kelebihan
- Membuat dan memperbarui versi aset terkompresi yang disimpan tidak perlu selesai.
- Mengompresi dengan cepat bekerja sangat baik untuk laman web yang dibuat secara dinamis.
Kekurangan
- Mengompresi file pada level yang lebih tinggi untuk mencapai rasio kompresi yang lebih baik memakan waktu lebih lama. Hal ini dapat menyebabkan hit performa saat pengguna menunggu aset mengompresi 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 dilakukan saat ini adalah mengimpor express
dan menggunakan express.static
middleware untuk memuat semua file HTML, JS, dan CSS statis di
public/
(dan file tersebut dibuat oleh webpack dengan setiap build).
Untuk memastikan semua aset dikompresi setiap kali diminta,
Library middleware kompresi dapat
sebaiknya digunakan. Mulailah dengan menambahkannya sebagai devDependency
di package.json
:
"devDependencies": {
//...
"compression": "^1.7.3"
},
Lalu 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! Di Response Headers
sekarang, content-encoding
menunjukkan bahwa server mengirimkan file yang dienkode dengan gzip
ini.
Kompresi statis
Ide di balik kompresi statis adalah agar aset dikompresi dan disimpan sebelumnya.
Kelebihan
- Latensi karena tingkat kompresi yang tinggi bukan lagi masalah penting. Tidak perlu melakukan apa pun dengan cepat untuk mengompresi file karena sekarang file tersebut dapat diambil langsung.
Kekurangan
- Aset harus dikompresi dengan setiap build. Waktu build dapat bertambah secara signifikan jika tingkat kompresi tinggi digunakan.
Kompresi statis dengan Node/Express dan webpack
Karena kompresi statis melibatkan kompresi file terlebih dahulu, webpack
dapat diubah untuk mengompresi aset sebagai bagian dari langkah build.
CompressionPlugin
dapat digunakan untuk ini.
Mulailah dengan menambahkannya sebagai devDependency
di package.json
:
"devDependencies": {
//...
"compression-webpack-plugin": "^1.1.11"
},
Seperti plugin webpack lainnya, impor di 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
di dokumentasi
untuk mempelajari cara menambahkan opsi untuk menggunakan algoritma yang berbeda atau menyertakan/mengecualikan
file tertentu.
Saat aplikasi dimuat ulang dan dibuat ulang, versi terkompresi paket utama akan
dibuat. Buka Glitch Console untuk melihat apa yang ada di dalam
direktori public/
akhir yang
disalurkan oleh server Node.
- Klik tombol Alat.
- Klik tombol Konsol.
- Di konsol, jalankan perintah berikut untuk berubah menjadi
public
direktori tersebut dan melihat semua filenya:
cd public
ls
Versi paket yang di-zip, main.bundle.js.gz
, kini disimpan di sini sebagai
ya. CompressionPlugin
juga mengompresi index.html
secara default.
Hal berikutnya yang perlu dilakukan adalah memberi tahu
server untuk mengirim file
file kapan pun 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 hal ini
permintaan. Rutenya berfungsi seperti ini:
- Menentukan
'*.js'
sebagai argumen pertama berarti cara ini berfungsi untuk setiap yang diaktifkan untuk mengambil file JS. - Dalam callback,
.gz
dilampirkan ke URL permintaan dan Header responsContent-Encoding
disetel kegzip
. - Terakhir,
next()
akan memastikan urutan berlanjut ke callback mana pun yang mungkin akan muncul berikutnya.
Setelah aplikasi dimuat ulang, lihat panel Network
sekali lagi.
Sama seperti sebelumnya, pengurangan ukuran paket yang signifikan.
Kesimpulan
Codelab ini membahas proses meminifikasi dan mengompresi kode sumber. Kedua teknik ini menjadi default di banyak alat saat ini, jadi penting untuk mengetahui apakah toolchain Anda sudah mendukung mereka atau jika Anda harus mulai menerapkan kedua proses itu sendiri.