Petua ratikal untuk Meminimumkan Saiz Bundle JavaScript Anda

Karya seni: https://code-art.pictures/

Kenapa Repot?

Hari ini mungkin mengejutkan, tetapi trafik internet masih menjadi isu dalam banyak senario. Rangkaian mudah alih selalunya mempunyai pelan data yang terhad, bateri peranti tidak terhingga dan, yang paling penting, perhatian pengguna semasa menunggu tapak anda dimuatkan adalah terhad. Itulah sebabnya saiz bundle masih penting. Berikut ialah tujuh petua untuk anda pertimbangkan.

1. Jangan Transpile ke ES5

Pada tahun 2020, saya telah mengekalkan apl promosi untuk rangkaian sosial tempatan. Ia adalah aplikasi pek web React TypeScript biasa yang menyasarkan ES5. Apabila webpack 5 dikeluarkan, saya memutuskan untuk menaik taraf. Semuanya berjalan lancar; Saya memantau analitik ralat dan maklum balas pengguna, dan tiada apa yang tidak dijangka. Hanya selepas seminggu saya secara tidak sengaja mendapati bahawa berkas saya mengandungi fungsi anak panah — ia adalah ciri pek web baharu.

Berikut ialah artikel hebat tentang keadaan ES5. Ambilan penting:

• Banyak perpustakaan sudah mengandungi kod ES6, bermakna berkas dengannya tidak serasi dengan ES5.
• Kebanyakan tapak popular di dunia tidak serasi dengan ES5 — tapak anda mungkin juga tidak memerlukannya.
• Jika anda pasti anda masih memerlukan keserasian ES5, anda mesti memasukkan perpustakaan dalam proses binaan anda.

2. Tahu dan Gunakan Ciri Bahasa JavaScript Moden

Berikut ialah beberapa ciri yang membolehkan anda menulis kod yang lebih baik dan lebih padat.

2.1. Penjana

Penjana ialah cara yang cekap untuk melintasi struktur bersarang:

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

2.2. Medan Kelas Persendirian

Minifier mengetahui dengan pasti bahawa medan ini tidak boleh mempunyai penggunaan luaran, walaupun dalam objek yang dieksport dan bebas untuk memendekkan namanya.

Sumber

export class A {
  #myFancyStateObject
}

Himpunan

export class A{#t}

Ini tidak akan berfungsi, sudah tentu, dengan medan peribadi TypeScript, kerana pengetahuan bahawa ia adalah peribadi hilang apabila tsc telah melaksanakan tugasnya.

2.3. API moden

Pernahkah anda mendengar tentang Promise.withResolvers() atau Map.groupBy()? API ini tidak tersedia secara meluas pada masa penulisan ini, tetapi akan tersedia tidak lama lagi. Luangkan sedikit masa untuk membiasakan diri dengan mereka sekarang dan bersedia untuk menerima pakai mereka dalam beberapa tahun.

Petua: Cara Menemui API JavaScript Baharu

Terdapat banyak blog dan podcast, tetapi saya dapati “surat berita” terbaik ialah fail .d.ts baharu dalam repositori TypeScript. Buka sahaja, sebagai contoh, es2024.collection.d.ts dan nikmati ?

3. Elakkan Penduaan Kod

Adakah anda perasan corak yang berulang?

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

Kod berulang bukan sahaja meningkatkan saiz berkas tetapi juga menjadikannya lebih sukar untuk memahami perkara yang dilakukan oleh setiap bahagian. Ini selalunya menyebabkan pembangun menulis kod baharu dan bukannya mengenal pasti dan menggunakan semula fungsi utiliti sedia ada, seterusnya membebankan berkas.

Sudah ada banyak bahan yang sangat baik tentang topik ini, jadi daripada menceritakannya semula, saya mengesyorkan klasik: Pemfaktoran Semula oleh Martin Fowler. Ia merangkumi bukan sahaja contoh mudah seperti di atas tetapi juga kes kompleks seperti hierarki berganding dan reka bentuk berulang.

Sekarang, mari kita perbaiki contoh kecil kita. Nampaknya pengapit sering digunakan untuk mengehadkan parameter kepada julat indeks tatasusunan, jadi kami boleh membuat pintasan:

export class A {
  #myFancyStateObject
}

Perubahan ini menjadikannya jelas bahawa n mungkin bertujuan untuk menjadi integer, yang tidak disemak pada masa ini. Ia juga menyerlahkan kes tepi yang tidak dikendalikan: tatasusunan kosong. Dengan membuat deduplikasi kecil ini, kami turut menemui dua potensi pepijat ?

4. Elakkan Terlalu Kejuruteraan

Saya tidak ingat sumber sebenar pepatah ini, tetapi saya rasa ia tepat:

Overgineering ialah menyelesaikan masalah yang anda tidak ada.

Dalam dunia pembangunan web, saya telah memerhatikan dua jenis utama kejuruteraan berlebihan.

4.1. Penggeneralisasian yang berlebihan

Pertimbangkan kod ini. Pelapik ialah gandaan 4px dan warna latar belakang adalah warna biru. Ini mungkin bukan satu kebetulan, dan jika ya, ia mungkin menunjukkan kemungkinan pertindihan. Tetapi adakah kita benar-benar mempunyai maklumat yang mencukupi untuk mengekstrak komponen Butang generik, atau adakah kita terlalu kejuruteraan?

CSS

export class A{#t}

JSX

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

Nasihat ini agak bercanggah dengan "Elakkan pertindihan". Kod penyahduplikasi yang berlebihan boleh menyebabkan kejuruteraan berlebihan. Jadi, di manakah anda membuat garisan? Secara peribadi, saya menggunakan nombor ajaib "3": sebaik sahaja saya melihat tiga tempat dengan corak yang serupa, mungkin sudah tiba masanya untuk mengekstrak komponen generik.

Dalam kes butang biru kami, saya percaya penyelesaian terbaik ialah menggunakan pembolehubah CSS, sekurang-kurangnya untuk pelapik, dan bukannya mencipta komponen baharu.

4.2. Menggunakan Rangka Kerja Tidak Sesuai

Ya, saya bercakap tentang perkara yang kita suka — Next.js, React, Vue dan sebagainya. Jika apl anda tidak melibatkan banyak interaktiviti pada tahap elemen DOM, atau tidak dinamik, atau sangat mudah, pertimbangkan pilihan lain:

• Penjana tapak statik — anda boleh mulakan dengan beberapa senarai susun atur.
  • Berhati-hati: sesetengah daripada mereka menggunakan React atau rangka kerja lain di bawah tudung. Jika matlamat anda ialah pengecilan himpunan, cuba sesuatu yang berbeza.
• Sistem pengurusan kandungan, seperti WordPress.
• Vanila — amat berguna dalam dua kes:
  • Apl ini sangat mudah.
  • Apl ini tidak banyak memanipulasi DOM tetapi sebaliknya, sebagai contoh, melukis sesuatu pada kanvas. Saya ada projek betul-betul seperti ini.

5. Elakkan Ciri TypeScript Bertarikh

Matlamat semasa TypeScript terutamanya JavaScript menyemak taip, tetapi ia tidak selalu seperti ini. Pada hari sebelum ES6, terdapat banyak percubaan untuk mencipta "JavaScript yang lebih baik," dan TypeScript tidak terkecuali. Sesetengah ciri bermula sejak zaman awal tersebut.

5.1. Enums

Bukan sahaja ia sukar digunakan dengan betul, tetapi ia juga bertukar menjadi struktur yang agak bertele-tele:

TypeScript

type TreeNode<t> = {
    left?: TreeNode<t>
    value: T
    right?: TreeNode<t>
};

function* traverse<t>(root: TreeNode<t>): Generator<t> {
    if (root.left) yield* traverse(root.left)
    yield root.value
    if (root.right) yield* traverse(root.right)
}
</t></t></t></t></t></t>

JavaScript

export class A {
  #myFancyStateObject
}

Buku Panduan TypeScript rasmi mengesyorkan menggunakan objek mudah dan bukannya enum. Anda juga boleh mempertimbangkan jenis kesatuan.

5.2. Ruang nama

Ruang nama ialah penyelesaian modul pra-ESM. Ia bukan sahaja meningkatkan saiz berkas, tetapi memandangkan ruang nama bertujuan untuk menjadi global, ia menjadi sangat sukar untuk mengelakkan konflik menamakan dalam projek besar.

TypeScript

export class A{#t}

JavaScript

const clamp = (min, val, max) =>
  Math.max(min, Math.min(val, max))
const x = clamp(0, v1, a.length - 1)
const y = clamp(0, v2, b.length - 1)
const z = clamp(0, v3, c.length - 1)

Daripada ruang nama, gunakan modul ES.

Nota: Ruang nama masih berguna, walau bagaimanapun, untuk menulis definisi jenis untuk lib global.

6. Jangan Abaikan Pengoptimuman Kecil

Setiap helah kecil ini boleh menjimatkan beberapa hingga berpuluh-puluh bait dalam berkas. Jika digunakan secara konsisten, ia boleh membawa hasil yang ketara.

6.1. Gunakan Sifat Benar / Palsu

Sebagai contoh, rentetan kosong adalah palsu. Untuk menyemak sama ada ia ditakrifkan dan tidak kosong, anda hanya boleh menulis:

const clampToRange = (n, {length}) =>
  clamp(0, n, length - 1)
const x = clampToRange(v1, a)
// ...

6.2. Benarkan Perbandingan Tidak ketat Kadangkala

Saya percaya menggunakan == untuk memaksa null kepada undefined, atau sebaliknya, adalah wajar.

.btn-a {
    background-color: skyblue;
    padding: 4px;
}
.btn-b {
    background-color: deepskyblue;
    padding: 8px;
}

6.3. Gunakan Nullish Coalescence, Logical OR, dan Parameter Lalai untuk Menggantikan Nilai Lalai

<button classname="btn-a" onclick="{handleClick}">
    Show
</button>
// ...
<button classname="btn-b" onclick="{handleSubmit}">
    Submit
</button>

6.4. Gunakan Fungsi Anak Panah untuk Satu pelapik

Sebaliknya:

enum A {
  x, y
}

Tulis ini:

var A;
(function (A) {
    A[A["x"] = 0] = "x";
    A[A["y"] = 1] = "y";
})(A || (A = {}));

6.5. Jangan Gunakan Kelas untuk Objek Sangat Mudah

Sebaliknya:

namespace A {
  export let x = 1
}

Tulis ini:

var A;
(function (A) {
    A.x = 1;
})(A || (A = {}));

Anda juga boleh membekukan objek untuk melindungi sifatnya daripada perubahan.

7. Periksa Bundle secara kerap

Bagi setiap pengikat, terdapat alat untuk menggambarkan kandungannya, seperti penganalisis webpack-bundle untuk pek web dan penganalisis vite-bundle untuk Vite. Alat seperti ini membantu anda mengenal pasti isu biasa dengan himpunan anda:

• Perpustakaan menggunakan jumlah ruang yang tidak seimbang — mungkin sudah tiba masanya untuk berhijrah atau menaik taraf?
• Dua perpustakaan serupa digunakan di bahagian berlainan projek anda — bolehkah anda menyatukan dan menggunakan hanya satu?
• Fail besar wujud dalam berkas anda tetapi hanya diakses oleh halaman yang dilawati oleh 0.5% pengguna (cth., teks lesen) — mungkin anda boleh membahagikan berkas menggunakan import dinamik()?

Selain alatan ini, adalah idea yang baik untuk sekali-sekala membaca berkas secara manual untuk mengesan penyelewengan. Sebagai contoh, anda mungkin menemui pembantu ES5 dalam berkas ES6 atau pembantu CJS dalam projek ESM disebabkan salah konfigurasi TypeScript. Masalah ini mungkin tidak ditangkap oleh alatan automatik tetapi masih boleh meningkatkan masa pemuatan dan berpotensi menyebabkan kerugian kepada aset anda yang paling berharga — perhatian pengguna.

---

Terima kasih kerana membaca. Selamat mengekod!

Atas ialah kandungan terperinci Petua ratikal untuk Meminimumkan Saiz Bundle JavaScript Anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!