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

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?

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();
    });
})

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.

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.

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

1. 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.

2. 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.

3. 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.

4. 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.

5. 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.