Rumah >hujung hadapan web >tutorial js >Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript

Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript

Mary-Kate Olsenasal: 2024-12-20 03:13:09495semak imbas

A modular Edge Side Includes component for JavaScript Compute

Pada musim panas 2022, rakan sepasukan saya Kailan bekerja pada peti Rust untuk Fastly Compute, melaksanakan subset bahasa templat Edge Side Includes (ESI) dan menerbitkan catatan blog tentang ia. Artikel ini penting bukan sahaja kerana kami mengeluarkan pustaka yang berguna, tetapi kerana ia merupakan ilustrasi cemerlang tentang perkara yang boleh dibawa oleh Compute kepada kami: kelebihan boleh atur cara dengan fungsi modular. Dan kini JavaScript telah tersedia secara umum di Compute selama lebih daripada setahun, sudah tiba masanya kami mempunyai penyelesaian yang sama untuk pengguna JavaScript kami. Pustaka ESI Fastly untuk JavaScript, kini tersedia pada npm, membolehkan anda menambah pemprosesan ESI yang berkuasa pada aplikasi anda.

Kebolehprograman dan Modulariti

Selama hampir sedekad, CDN Fastly telah mendapat sokongan untuk Edge Side Includes (ESI), bahasa templat yang berfungsi dengan mentafsir teg khas dalam sumber HTML anda. Ia berkisar pada teg , yang mengarahkan pelayan tepi untuk mengambil dokumen lain dan menyelaraskannya ke dalam strim.

index.html

<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>

header.html

<header>Welcome to the web site</header>

output


<header>Welcome to the web site</header>

Content

Apabila Compute memasuki pemandangan, landskap tepi berubah dalam dua cara utama: kebolehprograman dan modulariti.

Tidak lama selepas sokongan platform kami untuk Rust telah stabil, kami menerbitkan peti untuk Rust yang melaksanakan ESI, dan menambah kebolehprograman. Anda kini boleh mengkonfigurasi, menggunakan kod, cara membina permintaan bahagian belakang tambahan dan cara mengendalikan serpihan respons. Anda juga boleh melakukan pemprosesan ESI pada dokumen yang tidak berasal dari pelayan bahagian belakang. Kebolehprograman ini membezakannya daripada sokongan ESI yang kami ada dalam VCL, yang terhad kepada set tetap ciri yang kami tawarkan.

Pada masa yang sama, pendekatan ini sangat modular, memberikan pengaturcara pilihan untuk melaksanakan pemprosesan ESI ini atas dasar setiap permintaan, dan pilihan untuk menggabungkan pemprosesan dengan modul lain yang berfungsi dengan jenis data yang serasi dan digunakan mereka dalam sebarang susunan dan/atau keadaan logik yang dinyatakan.

Sasaran seterusnya: JavaScript

Sama seperti keluaran Rust kami, kami mahu pustaka JavaScript ini boleh diprogramkan. Sokongan JavaScript Fastly sentiasa menerima API Ambil dan API Streams pendampingnya. Satu ciri berguna bagi Streams API ialah antara muka TransformStream, membenarkan data untuk "disampaikan" melalui objek untuk menggunakan transformasi—sempurna untuk ESI. Dengan melaksanakan pemproses ESI sebagai pelaksanaan TransformStream, kami dapat menyesuaikannya terus ke dalam Aplikasi Pengiraan Cepat yang ditulis dalam JavaScript.

Berikut ialah cara anda boleh menstrim melaluinya:

<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>

Transformasi, yang kami panggil EsiTransformStream, digunakan pada strim secara langsung, mengurangkan kebimbangan memori dan prestasi. Ini bermakna:

Tidak perlu menampan keseluruhan respons huluan sebelum menggunakan transformasi.
Transformer menggunakan tindak balas huluan secepat mungkin dan memproses teg ESI apabila ia muncul dalam strim. Apabila pengubah selesai memproses setiap teg ESI, hasilnya dikeluarkan serta-merta ke hiliran, jadi kami dapat menahan penimbal yang mungkin minimum. Ini membolehkan pelanggan menerima bait pertama hasil yang distrim apabila ia sedia, tanpa perlu menunggu untuk diproses sepenuhnya.

Selain itu, reka bentuk ini adalah modular, menjadikan EsiTransformStream sebagai alat lain yang boleh anda gunakan bersama dengan perkara lain. Sebagai contoh, anda mungkin mempunyai transformasi lain yang anda ingin gunakan pada respons, seperti pemampatan, dan respons boleh disalurkan melalui mana-mana bilangan strim transformasi ini, kerana ia adalah antara muka standard sepenuhnya. Jika anda mahu, anda juga boleh mendayakan ESI secara bersyarat untuk permintaan atau respons tertentu sahaja, seperti pengepala permintaan, laluan atau jenis kandungan respons.

Begini cara anda membuat seketika EsiTransformStream:

<header>Welcome to the web site</header>

Pembina mengambil URL dan objek Pengepala, dan secara pilihan mengambil beberapa pilihan sebagai parameter ketiga. Seperti yang diterangkan sebelum ini, fungsi utama ESI ialah memuat turun templat tambahan, untuk dimasukkan ke dalam strim yang dihasilkan. Menghadapi tag menggunakan fetch sebagai mekanisme asas untuk mendapatkan semula templat, dan tujuan utama parameter ini adalah untuk mengkonfigurasi panggilan pengambilan tersebut:

URL digunakan untuk menyelesaikan laluan relatif dalam src tanda nama.
Pengepala digunakan semasa membuat permintaan tambahan untuk mengambil templat.
Objek konfigurasi pilihan boleh digunakan untuk mengatasi gelagat pengambilan yang dibuat dan untuk menggunakan gelagat tersuai lain, seperti cara memproses templat yang diambil dan pengendalian ralat tersuai.

Dalam kes paling mudah, anda hanya akan menggunakan nilai pengambilan objek konfigurasi. Jika anda tidak menyediakannya, maka ia menggunakan fungsi pengambilan global sebaliknya, tetapi dalam Kira anda memerlukannya untuk menentukan hujung belakang untuk pengambilan untuk digunakan apabila menyertakan templat (melainkan anda menggunakan ciri hujung belakang dinamik). Contoh coretan di atas memberikan bahagian belakang bernama origin_0 sebelum memanggil pengambilan global.

Itu sahaja! Dengan persediaan mudah ini, anda boleh mempunyai bahagian belakang yang menyajikan teg ESI dan aplikasi Compute yang memprosesnya. Berikut ialah contoh penuh yang boleh anda jalankan:

biola.fastly.dev

Sokongan untuk ciri ESI

Pelaksanaan ini menawarkan lebih banyak ciri ESI daripada yang lain yang kami sediakan pada masa lalu.

Ralat pengendalian

Kadangkala, fail yang dirujuk oleh tag mungkin gagal diambil kerana ia tidak wujud atau menyebabkan ralat pelayan. Anda boleh mengabaikan ralat dalam kes ini dengan menambahkan atribut onerror="continue".

<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>

Jika /templates/header.html menyebabkan ralat, pemproses ESI secara senyap mengabaikan ralat dan menggantikan keseluruhan tag dengan rentetan kosong.

Anda juga boleh menggunakan pengendalian ralat yang lebih berstruktur dengan menggunakan blok, yang kelihatan seperti ini:

<header>Welcome to the web site</header>

Pemproses ESI mula-mula melaksanakan kandungan . Jika teg esi:include menyebabkan ralat, maka pemproses ESI melaksanakan kandungan .

Adalah penting untuk ambil perhatian bahawa keseluruhan blok digantikan dengan keseluruhan sekat jika ia berjaya atau jika ada kesilapan. Dalam contoh di atas, jika /templates/header.html menyebabkan ralat, maka ini juga menyebabkan teks "Pengepala utama" tidak muncul dalam output; hanya teks "Pengepala alternatif" disertakan. Lihat spesifikasi bahasa ESI untuk butiran lanjut.

bersyarat

ESI juga membenarkan pelaksanaan bersyarat, dengan melakukan semakan masa jalan pada pembolehubah. Berikut ialah contoh cek sedemikian:


<header>Welcome to the web site</header>

Content

Apabila pemproses menemui blok, ia berjalan melalui blok, menyemak ungkapan yang ditetapkan dalam atribut ujian mereka. Pemproses melaksanakan blok esi:when pertama di mana ungkapan menilai kepada benar. Jika tiada ungkapan bernilai benar, maka ia secara pilihan akan melaksanakan esi: otherwise block jika ia disediakan. Keseluruhan blok digantikan dengan keseluruhan mana-mana atau blok yang melaksanakan.

Pemproses menyediakan set pembolehubah terhad, yang berdasarkan terutamanya pada kuki permintaan. Dalam contoh di atas, kuki HTTP dengan nama "kumpulan" disemak untuk nilainya. Pelaksanaan kami adalah berdasarkan spesifikasi bahasa ESI; rujuk padanya untuk butiran lanjut.

Senarai tag dan ciri yang disokong

Pelaksanaan ini menyokong teg berikut bagi spesifikasi bahasa ESI.

esi:termasuk
esi:ulasan
esi:alih keluar
esi:cuba / esi:percubaan / esi:kecuali
esi:pilih / esi:bila / esi:sebaliknya
esi:vars

teg ditakrifkan dalam spesifikasi sebagai pilihan dan tidak disertakan dalam pelaksanaan ini.

Pembolehubah ESI disokong dalam atribut teg ESI dan Ungkapan ESI disokong dalam atribut ujian . Selain itu, ulasan disokong.

Tingkah laku tersuai bermakna kemungkinan yang tidak berkesudahan

Walaupun set ciri cukup untuk teruja, bahagian yang benar-benar menarik untuk boleh diprogramkan ialah lebih banyak perkara boleh dilakukan. Membawa masuk templat ialah penggunaan utama ESI, tetapi itu bukan semua yang boleh dilakukannya. Ini contohnya.

Pertimbangkan anda mempunyai cap masa yang ditandakan dalam dokumen anda yang anda mahu diwakili sebagai tarikh relatif apabila ia dipaparkan, seperti "2 hari yang lalu". Terdapat banyak cara untuk melakukan ini, tetapi untuk mempunyai prestasi terbaik dan implikasi ingatan, adalah bagus untuk melakukan pencarian/gantian dalam strim. Pengaturcaraan perpustakaan ESI ini sebenarnya boleh digunakan sebagai pilihan yang baik untuk melakukan ini.

Kami boleh menentukan cap masa untuk dikodkan dalam dokumen hujung belakang anda menggunakan teg ESI yang dibuat khas dalam format seperti berikut:

<body>
<esi:include src="./header.html" />
<main>
Content
</main>
</body>

Sebagai contoh, coretan ini boleh mewakili tengah malam pada 1 Januari 2024, waktu Pasifik:

<header>Welcome to the web site</header>

Sekarang, sediakan EsiTransformStream untuk menyediakan dokumen gantian sintetik apabila ia melihat corak URL itu:


<header>Welcome to the web site</header>

Content

Sekarang, apabila pemproses menemui contoh coretan di atas, ia akan mengeluarkan hasil yang serupa dengan yang berikut (bergantung pada berapa hari ke hadapan anda menjalankannya):

const transformedBody = resp.body.pipeThrough(esiTransformStream);

return new Response(
  transformedBody,
  {
    status: resp.status,
    headers: resp.headers,
  },
);

Oleh kerana dokumen bahagian belakang boleh dicache oleh Fastly, permintaan masa hadapan boleh mendapat manfaat daripada HIT cache, manakala pemprosesan akan terus memaparkan masa relatif yang dikemas kini.

Untuk contoh langsung ini, lihat biola berikut:

biola.fastly.dev

Ambil pusing!

@fastly/esi kini tersedia di npm, sedia untuk ditambahkan pada mana-mana program JavaScript. Gunakannya di tepi dalam program Fastly Compute anda, sudah tentu, tetapi sebenarnya, ia juga berfungsi di luar Compute, selagi persekitaran anda menyokong API pengambilan. Kod sumber penuh tersedia di GitHub.

Mulakan dengan mengklon salah satu Fiddles di atas dan mengujinya dengan asal-usul anda sendiri, walaupun sebelum anda membuat akaun Fastly. Apabila anda bersedia untuk menerbitkan perkhidmatan anda pada rangkaian global kami, anda boleh mendaftar untuk percubaan percuma Compute dan kemudian mulakan segera dengan perpustakaan ESI pada npm.

Dengan Compute, kelebihan boleh diprogramkan dan modular – pilih dan gabungkan penyelesaian yang paling sesuai untuk anda, atau bina sendiri. Kami bukan satu-satunya yang boleh menyediakan modul seperti ini untuk Compute. Sesiapa sahaja boleh menyumbang kepada ekosistem dan mengambil daripadanya. Dan, seperti biasa, temui kami di forum komuniti Fastly dan beritahu kami perkara yang telah anda bina!

Atas ialah kandungan terperinci Bahagian Tepi modular Termasuk komponen untuk Pengiraan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Memahami Asas Penghala React: Mengurus Navigasi dalam ReactArtikel seterusnya：Memahami Asas Penghala React: Mengurus Navigasi dalam React

Artikel berkaitan

Lihat lagi