Bagaimana untuk mengurangkan saiz fail javascript pada klien?

Hello semua! Dalam artikel ini saya ingin memberitahu anda bagaimana anda boleh mengurangkan saiz fail javascript beberapa kali terima kasih kepada bahasa templat seperti hmpl.

Pendekatan teknologi yang muncul dalam artikel itu bukanlah sesuatu yang baharu, tetapi cukup popular hari ini untuk dibincangkan.

Mengurangkan saiz fail javascript akan membolehkan halaman dimuatkan dengan lebih pantas pada klien. Jika kita mengambil SPA moden, ternyata saiz fail, walaupun mengambil kira semua minification, masih agak besar. Sudah tentu, sebaik sahaja anda memuatkan halaman sekali, lebih mudah untuk menavigasi halaman itu, tetapi masa muat pertama itu sendiri boleh dari satu saat hingga, katakan, beberapa minit dengan sambungan internet yang teruk. Beberapa pelanggan akan mahu menunggu selama itu.

Apabila menggunakan kebanyakan rangka kerja dan perpustakaan untuk mencipta UI, anda perlu menulis banyak kod boilerplate. Setiap simbol mengambil ruang ingatan. Mari ambil pengklik Vue.js:

createApp({
  setup() {
    const count = ref(0);
    return {
      count,
    };
  },
  template: `<div>
        <button @click="count++">Click!</button>
        <div>Clicks: {{ count }}</div>
    </div>`,
}).mount("#app");

Pengklik yang sangat mudah, tetapi ia memerlukan jumlah baris kod dalam js yang adil, apatah lagi kes apabila aplikasi itu lebih besar atau kurang besar.

Walaupun tanpa dua koma, mungkin terdapat beberapa bait kurang

Ini bukan sahaja masalah dengan Vue, tetapi juga dengan rangka kerja dan perpustakaan lain yang berfungsi dengan cara yang serupa. Tetapi, itu bukan satu-satunya perkara. Terdapat sejumlah besar modul tambahan yang diberikan kepada mereka, dan kepada mereka pergi ke jumlah modul tambahan yang sama, dan seterusnya kepada "infiniti".

Malah, salah satu penyelesaian kepada masalah ini telah lama dicadangkan dan ia adalah mudah - ia adalah untuk menyediakan UI pada pelayan dan hanya memuatkannya pada klien. Terima kasih kepada ini, saiz fail aplikasi boleh dikurangkan dengan ketara. Ini betul-betul idea yang digunakan dalam HMPL.

Dalam contoh, saya juga akan cuba membuat klik, tetapi menggunakan hmpl.js.

document.querySelector("#app").appendChild(
  hmpl.compile(
    `<div>
        <button>Click!</button>
        <div>Clicks: {{ src: "/api/clicks", after: "click:button" }}</div>
    </div>`
  )().response
);

Seperti yang anda lihat, UI akan sama, tetapi saiz fail akan menjadi lebih kecil sedikit.

Walaupun anda mengecilkan fail dan mengalih keluar semua ruang yang tidak diperlukan daripada templat, mungkin fail akan setanding atau lebih besar, tetapi ini hanyalah andaian pada contoh kecil. Jika kita mengambil aplikasi yang besar, maka jelaslah bahawa dengan pendekatan ini terdapat lebih sedikit js.

Seperti yang dapat dilihat daripada contoh, kefungsian mengira dan menyimpan keadaan aplikasi boleh, jika dikehendaki, dialihkan ke pelayan.

Seperti yang anda lihat daripada contoh, kefungsian mengira dan menyimpan keadaan aplikasi boleh, jika mahu, dialihkan ke pelayan. Adalah jelas bahawa jika terdapat sejumlah besar pengguna, ini hanya akan menurunkan pelayan, tetapi hakikat bahawa antara muka pengguna adalah sama adalah penting.

Ya, sudah tentu, kaedah ini bukan sahaja mempunyai kelemahan, tetapi juga kebolehgunaan semula UI, bagaimana untuk cache UI supaya tidak memuatkan semuanya seratus kali dan banyak lagi. Alternatif adalah penting, yang, jika dikonfigurasikan dengan betul, boleh bersaing dengan kebanyakan penyelesaian moden.

Terima kasih banyak-banyak kerana membaca artikel ini!

Senarai bahan:

https://hmpl-lang.github.io/#/docs
https://vuejs.org/guide/quick-start.html

Atas ialah kandungan terperinci Bagaimana untuk mengurangkan saiz fail javascript pada klien?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!