Memuat javascript utama di setiap halaman? Atau memecahnya ke halaman yang relevan?

13

Saya memiliki 700kbfile JS terekompresi yang dimuat pada setiap halaman. Sebelum saya punya 12file javascript di setiap halaman tetapi untuk mengurangi permintaan http saya mengompres semuanya menjadi 1 file.

File ini sedang ~130kb gzippeddan dilayani gzip. Namun pada komputer lokal masih membongkar dan dimuat di setiap halaman. Apakah ini masalah kinerja?

Saya telah membuat profil javascript dengan profil pembakar tetapi tidak melihat masalah. Masalah / ilusi yang saya hadapi adalah ada pustaka jquery yang dikompres dalam file itu yang terkadang tidak digunakan pada halaman saat ini.

Misalnya jquery datatablesdikompresi 200kb dan itu hanya dimuat pada 2 halaman situs web saya. Yang lain jqplotdan yang lain 200kb.

Saya sekarang memiliki 400kbkode berlebih yang tidak dieksekusi pada 80%halaman.

Haruskah saya meninggalkan semuanya dalam 1 file?

Haruskah saya mengeluarkan perpustakaan jquery dan memuat JS yang relevan saja di halaman saat ini?

— Kyle
sumber

Jika memiliki 700kb kode JS, Anda benar-benar harus membaginya kembali dan hanya menyertakan skrip yang benar-benar Anda butuhkan. Juga, menggunakan jQuery ("... menulis lebih sedikit, berbuat lebih banyak ...") tampaknya agak kebesaran untuk memiliki file JS yang sangat besar. Apa yang kamu lakukan dengan massa JS?

— feeela

@feeela lihatlah jquery-ui, jquery.datatables. Itu saja 400kb bersama. Saya punya plugin lain yang saya gunakan juga seperti jquery.validate, jquery.uniform - hal ini bertambah. xD

— Kyle

Dalam hal itu - seperti yang dikatakan di bawah ini - Anda benar-benar harus membagi skrip dan memuat hanya apa yang dibutuhkan ...

— feeela

6

Anda dapat menggunakan diperlukan untuk memuat perpustakaan secara dinamis yang Anda butuhkan hanya pada halaman itu. Maka Anda hanya perlu memuat requirejs (yaitu sekitar 14k) di semua halaman, menghemat sekitar 385kb.

Integrasi juga sangat mudah: cukup "bungkus" kode yang Anda miliki dengan item yang perlu disertakan:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

— Michael
sumber

1

Saya sangat suka desain situs web itu. Saya belum pernah mendengar tentang needsejs. Bagaimana Anda menilai ini dari permintaan http? Bukankah ini menempatkan lebih banyak permintaan http pada halaman? (bukankah itu buruk?) Maaf untuk pertanyaan konyol saya.

— Kyle

Memiliki lebih sedikit permintaan tentu saja lebih baik, tetapi menghemat> 350k juga tidak terlalu buruk. Ya, situs Anda akan membuat satu permintaan lagi jika Anda memasukkan pustaka lain pada halaman itu. Jika ada datatablesdi satu situs dan jqplotdi situs lain, itu tidak masalah. Memuat lima lib lebih dari 50% halaman akan membuat keuntungan menghilang, saya setuju. Tetapi dalam kasus Anda, saya menganggapnya sebagai solusi yang sangat baik (dengan asumsi, bahwa Anda semua masih menyimpan satu file gzip).

— Michael

Terima kasih Michael. Solusi ini agak brilian. Sebelum saya akan membagi semuanya pada satu halaman tapi ini ... Ini lebih baik daripada apa yang ada dalam pikiran saya. Terima kasih atas saran ini. Karena Anda terbiasa dengan requirejs, menurut Anda apakah requirejs sudah cukup? Saya melihat di beberapa situs web mereka menggunakan google untuk memuat jquery dan pustaka lainnya google.load('...'),.

— Kyle

1

Saya sangat menyarankan untuk memuat perpustakaan umum dari Google (atau situs lain yang menawarkannya). Ini memiliki 2 keuntungan: a) file lib di-cache di antara situs yang berbeda. Kemungkinannya adalah bahwa pengguna mengunjungi situs sebelumnya, yang juga menggunakan jquery yang dimuat dari Google. File ini kemudian diambil dari cache, bukan lagi dari server! b) Bahkan jika memiliki akan dimuat, itu akan jauh lebih cepat untuk memuatnya dari Google CDN, daripada dari server web Anda sendiri.

— Michael

8

Jika kerangka / CMS / apa pun Anda memiliki fungsi yang sesuai, Anda dapat memasukkan skrip secara kondisional seperti yang disarankan @Michael, tetapi tanpa pustaka tambahan.

Contohnya, mengambil kasus dataat Anda, WordPress mungkin menangani situasi melalui sesuatu seperti:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

Tidak ada yang salah dengan RequireJS; Anda hanya perlu mengevaluasi apakah tingkat kerumitan tambahan yang ditambahkannya (plus belajar menggunakannya di tempat pertama) mengimbangi apa yang dapat dilakukan alat yang lebih mudah tersedia untuk Anda. Jika Anda hanya memiliki dua kasus yang Anda sebutkan di atas, ini mungkin pilihan yang lebih baik. Jika Anda memiliki banyak hal yang terjadi, maka RequireJS mungkin merupakan pendekatan yang lebih baik secara keseluruhan.

— Su '
sumber

Saya memiliki situs web khusus yang saya buat dari template html yang saya beli dari hutan hujan. Satu-satunya masalah adalah dude punya seperti 6 file JS yang tersebar di sekitar dan itu berantakan. Jadi saya memasukkannya ke dalam satu file dan itu termasuk beberapa librari jqplot, datatables, jquery-ui. Mereka semua menambahkan hingga sekitar 550-600kb. 100kb adalah JS saya menggunakan perpustakaan itu. Saya merasa saya harus memperbaikinya alih-alih memuat begitu banyak lib JS yang tidak relevan pada setiap halaman. Terima kasih atas saranmu! =)

— Kyle

5

700kb JavaScript adalah masalah kinerja, karena itu harus diuraikan setelah memuat halaman. Karena itu, Anda harus berhati-hati, bahwa hanya skrip itu, yang diperlukan, yang dimuat. Satu JavaScript besar mungkin OK di situs AJAX penuh, seperti GMail, ketika navigasi ditangani secara internal tanpa meninggalkan halaman tunggal. Namun, bahkan situs AJAX penuh melakukan pemuatan JS dinamis untuk mencegah pemuatan JS yang tidak perlu saat start (memori dan kecepatan dikeluarkan).

Anda telah mengatakan Anda ingin mengurangi lalu lintas http. Anda harus bermain dengan caching HTTP . Masalahnya adalah, bahwa perubahan pada JS mungkin tidak terlihat sampai cache berakhir, jika Anda mengatur waktu kedaluwarsa terlalu tinggi.

Namun ada trik yang tidak Anda rujuk myscript.js, tetapi myscript.js?version={myversion}. Setelah pembaruan aplikasi, Anda mengubah {myversion}dan Anda memaksa memuat ulang JavaScript.

— Pelaut Danubia
sumber

Yap, dengan ukuran JS ini, ditambah dengan fakta bahwa itu adalah perpustakaan yang cukup umum, penggunaan CDN akan menjadi manfaat besar.

— Zhaph - Ben Duguid

1

~ 700kb JavaScript adalah masalah kinerja dan jika dikompresi dan kita harus melihat Aturan yang harus diikuti saat berurusan untuk mengoptimalkan Kode adalah:

Minify Javascripts - Cukup Anda mengompresi dan mendekompresi, yang tidak mengurangi kode, Pertama-tama gunakan alat Minify JS yang baik dan Minify kode Anda. Anda adalah 12 File dan setiap file akan diperkecil secara terpisah sebelum dipukul untuk kinerja terbaik.
Menggunakan pemuatan javascript asinkron , dengan Menggunakan pemuatan asinkron menghasilkan waktu pemuatan dan rendering halaman yang sangat cepat. Dampak pengguna sangat kuat karena pemuatan asinkron yang baik tidak akan memblokir proses rendering dan waktu pemuatan halaman yang dirasakan sangat berkurang. Gambar dan item yang ditampilkan lainnya akan ditampilkan sebagai tidak ada javascript dimuat.
Gunakan GOOGLE cdn untuk JQUERY ; Saya pikir Anda menggunakan JQUERY dan memuatnya dari situs web Anda sendiri yang juga merupakan keuntungan tambahan, silakan gunakan GOOGLE CDN (gratis) untuk memuat JQUERY. Karena sedang digunakan oleh hampir setiap situs web ke-3 dan dengan demikian sudah tersedia di komputer klien dalam cache.
Header Panjang Kedaluwarsa khusus : Beberapa cara situs web dimuat dengan masalah waktu pemuatan maka Anda harus memberikan Long Expires untuk File HTTP JS, sehingga tidak dapat diunduh setiap kali, yang akan mengurangi permintaan untuk kedua kalinya. Menurut penelitian saya, waktu pemuatan yang diambil di halaman kedua memiliki lebih banyak jalan keluar dibandingkan dengan kunjungan halaman pertama kali.
Periksa dengan Kecepatan Halaman : Beberapa kali sumber daya lain juga mempengaruhi kecepatan pemuatan halaman silang periksa dan juga mencoba untuk mengoptimalkan sumber daya lain juga. Dengan melakukan sedikit langkah pada setiap sumber daya, berikan waktu ekstra untuk pemuatan JS kami.

— Vineet1982
sumber