Menambah caching CDN ke binaan Vite

Memanfaatkan rangkaian penghantaran kandungan (CDN) dengan ketara meningkatkan prestasi laman web dengan aset statik caching lebih dekat dengan pengguna. CDN mencapai ini dengan mengedarkan kandungan di seluruh pelayan kelebihan yang tersebar di seluruh dunia. Apabila pengguna mengakses laman web anda, CDN mengarahkan permintaan tersebut ke pelayan terdekat. Jika aset sudah di -cache (dari lawatan sebelumnya atau pengguna lain), ia disampaikan dengan serta -merta. Jika tidak, CDN mengambilnya dari pelayan asal anda, cache, dan kemudian menyampaikannya.

Tutorial ini menggunakan AWS Cloudfront sebagai contoh, menunjukkan cara mengkonfigurasi pengedaran untuk melayani JavaScript, CSS, fail fon, dan aset statik lain, dan mengintegrasikannya dengan proses membina Vite. Untuk pendekatan yang lebih mantap, pertimbangkan untuk menggunakan alat infrastruktur-as-kod seperti kerangka tanpa pelayan atau AWS CDK. Walau bagaimanapun, untuk kesederhanaan, kami akan menggunakan konsol AWS.

Mengkonfigurasi taburan awan AWS

1. Navigasi ke laman utama Cloudfront di konsol AWS.
2. Klik butang "Buat Pengedaran".
3. Dalam skrin Penciptaan, tentukan domain asal (di mana aset anda tinggal). Sebilangan besar tetapan lalai sesuai.
4. Secara kritikal, pilih "Cors-With-Preflight" dari dropdown "Headers Response".
5. Klik "Buat Pengedaran." Pengedaran baru anda akan muncul.

Mengintegrasikan Cloudfront dengan Vite

Semasa menubuhkan CDN adalah penting, laman web anda mesti dikonfigurasi untuk mendapatkan aset daripadanya. Integrasi ini adalah serupa di pelbagai sistem binaan (Webpack, Rollup, dan lain -lain).

1. Dalam fail vite.config.ts anda, tentukan sama ada binaan itu untuk pengeluaran:

 const isproduction = process.env.node_env === "Pengeluaran";

2. Konfigurasikan Vite untuk menggunakan CDN dalam pengeluaran:

 Eksport DefinectonFig lalai ({
  asas: isproduction? proses.env.react_cdn: "",
});

Ingatlah untuk menetapkan pembolehubah persekitaran REACT_CDN ke URL pengedaran awan anda (misalnya, https://distributiondomainname.cloudfront.net ).

Keserasian Vitepwa

Jika menggunakan plugin Vitepwa, pastikan harta base anda ditetapkan dengan betul:

 Vitepwa ({
  asas: "/",
});

Tetapan yang salah boleh menyebabkan kesilapan dalam fail web.manifest anda.

Mengesahkan fungsi CDN

Selepas persediaan, periksa permintaan rangkaian untuk aset laman web anda. Anda harus memerhatikan protokol h2 . Memeriksa tajuk tindak balas; Anda akan mendapati data berkaitan Cloudfront yang mengesahkan penglibatan CDN.

Cache busting dengan Vite

Vite secara automatik mengendalikan cache yang menghancurkan melalui cap jari. Ia menambah kod hash ke nama fail aset (misalnya, home-abc123.js ). Apabila aset berubah, hash berubah, memaksa CDN untuk mengambil versi yang dikemas kini.

Memperluas caching CDN

Faedah caching CDN melangkaui JavaScript, CSS, dan fon. Jika menggunakan S3 untuk penyimpanan imej, pertimbangkan untuk mengkonfigurasi pengedaran Cloudfront untuknya. Ini bukan sahaja menyediakan caching kelebihan tetapi juga membolehkan sokongan HTTP/2, yang kekurangan S3.

Strategi CDN Lanjutan

Tutorial ini meliputi integrasi CDN asas. Untuk prestasi yang optimum, pertimbangkan untuk melayani seluruh tapak anda dari CDN, yang membolehkannya berinteraksi dengan pelayan asal anda hanya untuk kandungan dinamik.

Kesimpulan

CDN adalah alat yang berkuasa untuk meningkatkan prestasi laman web dengan menyediakan sokongan Caching dan HTTP/2. Panduan ini memudahkan proses menubuhkan CDN dan mengintegrasikannya dengan Vite, melengkapkan anda dengan teknik pengoptimuman prestasi yang berharga.

Atas ialah kandungan terperinci Menambah caching CDN ke binaan Vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!