it-swarm.dev

caching file JavaScript

Yang merupakan metode terbaik untuk membuat browser menggunakan versi file js yang di-cache (dari sisi server)?

50
Vasil
23
powtac

atau dalam file .htaccess

AddOutputFilter DEFLATE css js
ExpiresActive On
ExpiresByType application/x-javascript A2592000
23

Dari PHP:

function OutputJs($Content) 
{   
    ob_start();
    echo $Content;
    $expires = DAY_IN_S; // 60 * 60 * 24 ... defined elsewhere
    header("Content-type: x-javascript");
    header('Content-Length: ' . ob_get_length());
    header('Cache-Control: max-age='.$expires.', must-revalidate');
    header('Pragma: public');
    header('Expires: '. gmdate('D, d M Y H:i:s', time()+$expires).'GMT');
    ob_end_flush();
    return; 
}   

bekerja untuk saya.

Sebagai seorang pengembang, Anda mungkin akan dengan cepat mengalami situasi di mana Anda tidak ingin file di-cache, dalam hal ini lihat Bantuan dengan caching JavaScript agresif

7
Ken

Saya baru saja menyelesaikan proyek akhir pekan saya cached-webpgr.js yang menggunakan penyimpanan lokal/penyimpanan web untuk cache file JavaScript. Pendekatan ini sangat cepat. Tes kecil saya menunjukkan 

  • Memuat jQuery dari CDN: Chrome 268ms, FireFox: 200ms
  • Memuat jQuery dari localStorage: Chrome 47ms, FireFox 14ms

Kode untuk mencapai itu kecil, Anda dapat memeriksanya di proyek Github saya https://github.com/webpgr/cached-webpgr.js

Berikut ini adalah contoh lengkap cara menggunakannya.

Perpustakaan lengkap:

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

Memanggil perpustakaan

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});
7
select

Di file .htaccess Apache Anda:

#Create filter to match files you want to cache 
<Files *.js>
Header add "Cache-Control" "max-age=604800"
</Files>

Saya menulis tentang itu di sini juga:

http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

5
Kalid
2
Kent Fredric

Saya memiliki sistem sederhana yaitu JavaScript murni. Ia memeriksa perubahan dalam file teks sederhana yang tidak pernah di-cache. Saat Anda mengunggah versi baru file ini diubah. Masukkan saja JS berikut di bagian atas halaman.

        (function(url, storageName) {
            var fromStorage = localStorage.getItem(storageName);
            var fullUrl = url + "?rand=" + (Math.floor(Math.random() * 100000000));
            getUrl(function(fromUrl) {
//                   first load
                if (!fromStorage) {
                    localStorage.setItem(storageName, fromUrl);
                    return;
                }
//                    old file
                if (fromStorage === fromUrl) {
                    return;
                }
                // files updated
                localStorage.setItem(storageName, fromUrl);
                location.reload(true);
            });
            function getUrl(fn) {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", fullUrl, true);
                xmlhttp.send();
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState === XMLHttpRequest.DONE) {
                        if (xmlhttp.status === 200 || xmlhttp.status === 2) {
                            fn(xmlhttp.responseText);
                        }
                        else if (xmlhttp.status === 400) {
                            throw 'unable to load file for cache check ' +  url;
                        }
                        else {
                           throw 'unable to load file for cache check ' +  url;
                        }
                    }
                };
            }
            ;
        })("version.txt", "version");

ganti saja "version.txt" dengan file Anda yang selalu berjalan dan "versi" dengan nama yang ingin Anda gunakan untuk penyimpanan lokal Anda.

0
joel Moses

Metode terbaik (dan satu-satunya) adalah mengatur tajuk HTTP yang benar, khususnya yang ini: "Kedaluwarsa", "Dimodifikasi Terakhir", dan "Kontrol Tembolok". Cara melakukannya tergantung pada perangkat lunak server yang Anda gunakan.

Dalam Meningkatkan kinerja ... cari "Optimasi di sisi server" untuk pertimbangan umum dan tautan yang relevan dan untuk "Tembolok sisi klien" untuk saran khusus Apache.

Jika Anda penggemar nginx (atau nginx dalam bahasa Inggris polos ) seperti saya, Anda dapat dengan mudah mengonfigurasinya juga:

location /images {
  ...
  expires 4h;
}

Dalam contoh di atas, file apa pun dari/gambar/akan di-cache pada klien selama 4 jam.

Sekarang ketika Anda mengetahui kata-kata yang tepat untuk dicari (tajuk HTTP "Kedaluwarsa", "Terakhir Dimodifikasi", dan "Kontrol Tembolok"), cukup teliti dokumentasi server web yang Anda gunakan.

0
Eugene Lazutkin