Beberapa file di CDN vs. satu file secara lokal


93

Situs web saya menggunakan sekitar 10 pustaka javascript pihak ketiga seperti jQuery, jQuery UI, prefixfree, beberapa plugin jQuery dan juga kode javascript saya sendiri. Saat ini saya menarik perpustakaan eksternal dari CDN seperti Google CDN dan cloudflare. Saya bertanya-tanya apa pendekatan yang lebih baik:

  1. Menarik perpustakaan eksternal dari CDN (seperti yang saya lakukan hari ini).
  2. Menggabungkan semua file ke satu js dan satu file css dan menyimpannya secara lokal.

Pendapat apapun diterima selama mereka dijelaskan. Terima kasih :)

Jawaban:


139

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.


4
Jawaban yang sangat bagus. Biarkan cache browser bekerja untuk Anda. Saya suka ide memisahkan perpustakaan populer dari file yang digabungkan.
Jon

3
Analisis yang sangat membantu
pengguna

8
Jawaban yang sangat bagus. Juga perlu disebutkan, adalah bahwa CDN akan memungkinkan pengguna untuk menarik file dari server "lokal" atau setidaknya lebih dekat (ke pengguna). Jadi jika server Anda berada di Eropa, pengguna dari Amerika Selatan atau Rusia, misalnya, masih akan mendapatkan file dengan relatif cepat.
H. Wolper
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.