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 mempelajari cara meminifikasi dan mengompresi JavaScript paket 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 tercermin di aplikasi.

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:

1. Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
2. Klik tab Jaringan.
3. Centang kotak Disable cache.
4. 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

Peringatan: Banyak platform hosting, CDN, dan server reverse proxy yang mengenkode aset dengan kompresi secara default atau memungkinkan Anda mengonfigurasinya dengan mudah. Artinya, Anda mungkin jarang perlu menyiapkan server Anda seperti yang dijelaskan pada bagian kompresi di tutorial ini, tetapi Anda dapat terus membaca jika tertarik untuk mempelajari cara kerja 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.

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

• 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 respons Content-Encoding disetel ke gzip.
• 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.