Nilai CDN terletak pada kemungkinan pengguna telah mengunjungi situs lain yang memanggil file yang sama dari CDN itu, dan menjadi semakin berharga bergantung pada ukuran file. Kemungkinan kasus ini meningkat seiring dengan banyaknya file yang diminta dan popularitas CDN.
Dengan pemikiran ini, menarik file yang relatif besar dan populer dari CDN populer sangatlah masuk akal. jQuery, dan, pada tingkat yang lebih rendah, jQuery UI, sesuai dengan tagihan ini.
Sementara itu, file yang digabungkan masuk akal untuk file yang lebih kecil yang tidak mungkin banyak berubah - plugin Anda yang biasa digunakan akan sesuai dengan tagihan ini, tetapi kode khusus aplikasi inti Anda mungkin tidak: mungkin berubah dari minggu ke minggu, dan jika Anda ' menggabungkannya kembali dengan semua file Anda yang lain, Anda harus memaksa pengguna untuk mengunduh semuanya lagi.
Boilerplate HTML5 melakukan pekerjaan yang cukup baik dalam menyediakan solusi umum untuk ini:
- Modernizr dimuat dari lokal di head: itu sangat kecil dan cukup banyak berbeda dari satu contoh ke contoh lainnya, jadi tidak masuk akal untuk mengambilnya dari CDN dan tidak akan terlalu merugikan pengguna untuk memuatnya dari Anda server. Itu diletakkan di kepala karena CSS mungkin memanfaatkannya, jadi Anda ingin efeknya diketahui sebelum tubuh merender. Segala sesuatu yang lain masuk ke bawah, untuk menghentikan skrip Anda yang lebih berat memblokir rendering saat mereka memuat dan mengeksekusi.
- jQuery dari CDN, karena hampir semua orang menggunakannya dan ini cukup berat. Pengguna mungkin sudah memiliki cache ini sebelum mengunjungi situs Anda, dalam hal ini mereka akan memuatnya dari cache secara instan.
- Semua dependensi pihak ketiga yang lebih kecil dan cuplikan kode yang tidak mungkin berubah banyak akan digabungkan menjadi
plugins.js
file yang dimuat dari server Anda sendiri. Ini akan disimpan dalam cache dengan tajuk kedaluwarsa yang jauh saat pertama kali pengguna mengunjungi dan dimuat dari cache pada kunjungan berikutnya.
- Kode inti Anda masuk
main.js, dengan tajuk kedaluwarsa yang lebih dekat untuk memperhitungkan fakta bahwa logika aplikasi Anda dapat berubah dari minggu ke minggu atau bulan ke bulan. Dengan cara ini saat Anda memperbaiki bug atau memperkenalkan fungsionalitas baru saat pengguna mengunjungi dua minggu dari sekarang, ini bisa dimuat segar sementara semua konten di atas dapat dibawa masuk dari cache.
Untuk pustaka utama Anda yang lain, Anda harus melihatnya satu per satu dan bertanya pada diri Anda sendiri apakah mereka harus mengikuti petunjuk jQuery, dimuat secara individual dari server Anda sendiri, atau digabungkan. Contoh bagaimana Anda bisa mengambil keputusan itu:
- Angular sangat populer, dan sangat besar. Dapatkan dari CDN.
- Twitter Bootstrap berada pada tingkat popularitas yang sama, tetapi Anda memiliki pilihan komponen yang relatif sedikit, dan jika pengguna belum memilikinya, mungkin tidak ada gunanya meminta mereka mengunduh semuanya. Karena itu, cara itu cocok dengan kode Anda lainnya cukup intrinsik, dan Anda tidak mungkin mengubahnya tanpa membangun kembali seluruh situs - jadi Anda mungkin ingin menyimpannya secara lokal tetapi menyimpan file itu terpisah dari Anda. utama
plugins.js. Dengan cara ini Anda selalu dapat memperbarui Anda plugins.jsdengan ekstensi Bootstrap tanpa memaksa pengguna untuk mengunduh semua inti Bootstrap.
Tetapi tidak ada keharusan - jarak tempuh Anda mungkin berbeda.