RequireJS'nin Gerekli Komut Dosyalarını Önbelleğe Almasını Engelleme

RequireJS, javascript dosyalarını önbelleğe alan dahili bir şey yapıyor gibi görünüyor. Gerekli dosyalardan birinde değişiklik yaparsam değişikliklerin uygulanabilmesi için dosyayı yeniden adlandırmam gerekir.

Dosya adının sonuna sorgu dizesi parametresi olarak bir sürüm numarası eklemenin yaygın hilesi requirjs ile çalışmaz <script src="jsfile.js?v2"></script>

Ne aradığımı, her güncellendiğinde komut dosyalarımı yeniden adlandırmak zorunda kalmadan RequireJS gerekli komut dosyalarının bu iç önbelleklemesini önlemek için bir yoldur.

Platformlar Arası Çözüm:

Şimdi urlArgs: "bust=" + (new Date()).getTime()geliştirme sırasında otomatik önbellek bozma ve urlArgs: "bust=v2"güncellenmiş gerekli bir komut dosyası yayınlandıktan sonra sabit kodlu sürüm numarasını artırdığım üretim için kullanıyorum.

Not:

@Dustin Getz, son bir cevapta, Javascript dosyaları bu şekilde sürekli yenilendiğinde hata ayıklama sırasında kesme noktaları bırakacağından bahsetti. Bir geçici çözüm, debugger;çoğu Javascript hata ayıklayıcısında bir kesme noktasını tetiklemek için kod yazmaktır .

Sunucuya Özgü Çözümler:

Düğüm veya Apache gibi sunucu ortamınız için daha iyi çalışabilecek belirli çözümler için aşağıdaki yanıtlardan bazılarına bakın.

RequireJS, önbellek bozma için kod URL'lerinin her birine bir değer eklemek üzere yapılandırılabilir.

RequireJS belgelerinden ( http://requirejs.org/docs/api.html#config ):

urlArgs : RequireJS'nin kaynakları almak için kullandığı URL'lere eklenen fazladan sorgu dizesi bağımsız değişkenleri. Tarayıcı veya sunucu doğru yapılandırılmadığında büstü önbelleklemek için en kullanışlıdır.

Tüm komut dosyalarına "v2" ekleme örneği:

require.config({
    urlArgs: "bust=v2"
});

Geliştirme amacıyla, bir zaman damgası ekleyerek RequireJS'yi önbelleği atlamaya zorlayabilirsiniz:

require.config({
    urlArgs: "bust=" + (new Date()).getTime()
});

Bunun için urlArgs kullanmayın!

Komut dosyası yüklerini http önbellek başlıklarına saygı göstermeyi gerektirir. (Komut dosyaları dinamik olarak eklenmiş olarak yüklenir <script>, yani istek eski varlıkların yüklenmesi gibi görünür.)

Geliştirme sırasında önbelleğe almayı devre dışı bırakmak için javascript varlıklarınızı uygun HTTP üstbilgileriyle sunun.

Require's urlArgs kullanmak, ayarladığınız kesme noktalarının yenilemeler arasında korunmayacağı anlamına gelir; debuggerkodunuzun her yerine ifadeler koymanız gerekir. Kötü. urlArgsGit sha ile üretim yükseltmeleri sırasında önbellek bozan varlıklar için kullanıyorum ; varlıklarımı sonsuza kadar önbelleğe alınacak şekilde ayarlayabilir ve hiçbir zaman eski varlıkları olmayacağı garanti edilebilir.

Geliştirmede, tüm ajax isteklerini karmaşık bir mockjax yapılandırmasıyla alay ediyorum , daha sonra tüm önbellekleme kapalı bir 10 satır python http sunucusu ile uygulamamı sadece javascript modunda sunabilirim . Bu benim için yüzlerce dinlendirici web servis uç noktaları ile oldukça büyük bir "girişim" uygulaması için ölçeklendirdi. Hatta, arka uç kodumuza erişmesine izin vermeden gerçek üretim kod tabanımızla çalışabilen sözleşmeli bir tasarımcımız var.

UrlArgs çözümünde sorunlar var. Maalesef, sizinle web tarayıcınız arasında olabilecek tüm proxy sunucularını denetleyemezsiniz. Bu proxy sunucularının bazıları maalesef dosyaları önbelleğe alırken URL parametrelerini yok sayacak şekilde yapılandırılabilir. Bu durumda, JS dosyanızın yanlış sürümü kullanıcılarınıza teslim edilir.

Sonunda vazgeçtim ve doğrudan fix.js'ye kendi düzeltmelerimi uyguladım. Requijs kütüphanesinin sürümünüzü değiştirmek isterseniz, bu çözüm sizin için işe yarayabilir.

Yamayı burada görebilirsiniz:

https://github.com/jbcpollak/requirejs/commit/589ee0cdfe6f719cd761eee631ce68eee09a5a67

Eklendikten sonra, gerekli yapılandırmanızda böyle bir şey yapabilirsiniz:

var require = {
    baseUrl: "/scripts/",
    cacheSuffix: ".buildNumber"
}

buildNumberBir revizyon kimliği / yazılım sürümü / favori renkle değiştirmek için derleme sisteminizi veya sunucu ortamınızı kullanın .

Kullanmak şöyle gerektirir:

require(["myModule"], function() {
    // no-op;
});

Bu dosyayı talep etmenizi gerektirecek:

http://yourserver.com/scripts/myModule.buildNumber.js

Sunucu ortamımızda, buildNumber'ı ayıklamak ve doğru JS dosyasını sunmak için url yeniden yazma kurallarını kullanırız. Bu şekilde tüm JS dosyalarımızı yeniden adlandırmak konusunda endişelenmemize gerek kalmaz.

Düzeltme eki, bir protokol belirten herhangi bir komut dosyasını yoksayar ve JS olmayan dosyaları etkilemez.

Bu, ortamım için iyi çalışıyor, ancak bazı kullanıcıların bir sonek yerine bir önek tercih edeceğini anlıyorum, taahhüdümü ihtiyaçlarınıza uyacak şekilde değiştirmek kolay olmalı.

Güncelleme:

Çekme isteği tartışmasında, talepler yazarı, bunun düzeltme numarasını öneklemek için bir çözüm olarak çalışabileceğini önermektedir:

var require = {
    baseUrl: "/scripts/buildNumber."
};

Ben bunu denemedim, ama ima bu aşağıdaki URL isteyecektir:

http://yourserver.com/scripts/buildNumber.myModule.js

Bir önek kullanabilen birçok insan için çok iyi sonuç verebilir.

Bazı olası yinelenen sorular:

JS ve proxy önbellekleme gerektirir

URL'nin bir parçası olarak gerekli modüllerde nasıl sürüm ayarlayabilirim?

Require data-main üzerinde Expire önbelleğinden esinlenerek, dağıtım komut dosyamızı aşağıdaki karınca göreviyle güncelledik:

<target name="deployWebsite">
    <untar src="${temp.dir}/website.tar.gz" dest="${website.dir}" compression="gzip" />       
    <!-- fetch latest buildNumber from build agent -->
    <replace file="${website.dir}/js/main.js" token="@Revision@" value="${buildNumber}" />
</target>

Main.js'nin başlangıcı aşağıdaki gibi:

require.config({
    baseUrl: '/js',
    urlArgs: 'bust=@Revision@',
    ...
});

Üretimde

urlArgs sorunlara neden olabilir!

Requijs'in baş yazarı şunları kullanmamayı tercih ederurlArgs :

Konuşlandırılmış varlıklar için, tüm derleme için sürüm veya karmayı bir derleme dizini olarak koymayı tercih ediyorum, sonra sadece baseUrlbu sürüm dizini baseUrl. Daha sonra başka hiçbir dosya değişmez ve üzerinde bir sorgu dizesi bulunan bir URL'yi önbelleğe alamayacakları bazı proxy sorunlarının önlenmesine yardımcı olur .

[Madeni şekillendir.]

Bu tavsiyeye uyuyorum.

Geliştirilmekte

Sık sık değişebilen dosyaları akıllıca önbelleğe alan bir sunucu kullanmayı tercih ederim: uygun olduğunda 304 ile yayan Last-Modifiedve yanıt veren bir sunucu If-Modified-Since. Düğümün statik dosyaları sunmak için ifade kümesine dayanan bir sunucu bile bunu kutudan çıkarır. Tarayıcım için hiçbir şey yapmayı gerektirmez ve kesme noktalarını bozmaz.

Bu parçacığı AskApache'den aldım ve yerel Apache web sunucumun ayrı bir .conf dosyasına koydum (benim durumumda /etc/apache2/others/preventcaching.conf):

<FilesMatch "\.(html|htm|js|css)$">
FileETag None
<ifModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</ifModule>
</FilesMatch>

Geliştirme için bu kodu değiştirmek gerek kalmadan iyi çalışır. Prodüksiyona gelince, @ dvtoever yaklaşımını kullanabilirim.

Geliştirme için Hızlı Düzeltme

Geliştirme için yalnızca Chrome Geliştirme Araçları'nda ( Web sitesi geliştirme için Chrome önbelleğini devre dışı bırakma) önbelleği devre dışı bırakabilirsiniz . Önbellek devre dışı bırakma yalnızca geliştirici araçları iletişim kutusu açıksa gerçekleşir, bu nedenle düzenli tarama yaptığınızda bu seçeneği değiştirmek konusunda endişelenmenize gerek yoktur.

Not: Kullanıcıların en son kodu almaları için üretimde ' urlArgs ' kullanmak doğru çözümdür. Ancak hata ayıklamayı zorlaştırır, çünkü krom her yenilemede kesme noktalarını geçersiz kılar (çünkü her seferinde 'yeni' bir dosya sunuluyor).

RequireJS ile önbellek patlaması için ' urlArgs ' kullanılmasını önermiyorum. Bu sorunu tam olarak çözmediği için. Sürüm no'yu güncellemek, tek bir kaynağı değiştirmiş olmanıza rağmen tüm kaynakların indirilmesine neden olur.

Bu sorunu çözmek için revizyon no. Oluşturmak için 'filerev' gibi Grunt modüllerini kullanmanızı tavsiye ederim. Bunun üzerine, gerekli olan her yerde revizyonu güncellemek için Gruntfile'da özel bir görev yazdım.

Gerekirse bu görev için kod snippet'ini paylaşabilirim.

Django / Flask (ben diğer diller / VCS sistemlerine kolayca adapte edilebilir) bunu nasıl yaparım:

Reklamlara config.py(eğer python2 içinde kodlamayı değişiklikler yapmanızı gerektirecek yüzden python3 bu kullanın)

import subprocess
GIT_HASH = subprocess.check_output(['git', 'rev-parse', 'HEAD']).strip().decode('utf-8')

Ardından şablonunuzda:

{% if config.DEBUG %}
     require.config({urlArgs: "bust=" + (new Date().getTime())});
{% else %}
    require.config({urlArgs: "bust=" + {{ config.GIT_HASH|tojson }}});
{% endif %}

• Manuel oluşturma işlemi gerektirmez
• git rev-parse HEADUygulama başlatıldığında yalnızca bir kez çalışır ve confignesnede saklar

Dinamik çözüm (urlArgs olmadan)

Her modül için benzersiz bir revizyon numarası yükleyebilmeniz için bu sorunun basit bir çözümü vardır.

Orijinal requirjs.load işlevini kaydedebilir, kendi işlevinizle üzerine yazabilir ve değiştirilmiş URL'nizi orijinal requirjs.load ile tekrar ayrıştırabilirsiniz:

var load = requirejs.load;
requirejs.load = function (context, moduleId, url) {
    url += "?v=" + oRevision[moduleId];
    load(context, moduleId, url);
};

Yapım sürecimizde "gulp-rev" i kullandığımız tüm modüllerin tüm revizyonlarıyla bir manifesto dosyası oluşturmak için kullandım. Benim yutkunma görevimin basitleştirilmiş versiyonu:

gulp.task('gulp-revision', function() {
    var sManifestFileName = 'revision.js';

    return gulp.src(aGulpPaths)
        .pipe(rev())
        .pipe(rev.manifest(sManifestFileName, {
        transformer: {
            stringify: function(a) {
                var oAssetHashes = {};

                for(var k in a) {
                    var key = (k.substr(0, k.length - 3));

                    var sHash = a[k].substr(a[k].indexOf(".") - 10, 10);
                    oAssetHashes[key] = sHash;
                }

                return "define([], function() { return " + JSON.stringify(oAssetHashes) + "; });"
            }
        }
    }))
    .pipe(gulp.dest('./'));
});

bu, main.js içinde 'oRevision' olarak eklenen ve daha önce gösterildiği gibi requirjs.load işlevinin üzerine yazdığınız moduleNames için revizyon numaralarına sahip bir AMD modülü oluşturur.

Bu @phil mccull'un kabul ettiği cevaba ek olarak.

Ben onun yöntemini kullanmak ama aynı zamanda önceden inşa çalıştırmak için bir T4 şablonu oluşturarak süreci otomatikleştirmek.

Yapım Öncesi Komutlar:

set textTemplatingPath="%CommonProgramFiles(x86)%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
if %textTemplatingPath%=="\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe" set textTemplatingPath="%CommonProgramFiles%\Microsoft Shared\TextTemplating\$(VisualStudioVersion)\texttransform.exe"
%textTemplatingPath% "$(ProjectDir)CacheBuster.tt"

T4 şablonu:

Oluşturulan Dosya:

Requir.config.js yüklenmeden önce değişkeni saklayın:

Requir.config.js dosyasında referans:

Benim durumumda, her tıkladığımda aynı formu yüklemek istedim, dosyada yaptığım değişikliklerin kalmasını istemedim. Bu gönderiyle tam olarak ilgili olmayabilir, ancak bu istek için yapılandırılmadan istemci tarafında potansiyel bir çözüm olabilir. İçeriği doğrudan göndermek yerine, gerekli dosyanın bir kopyasını oluşturabilir ve asıl dosyayı olduğu gibi bırakabilirsiniz.

LoadFile(filePath){
    const file = require(filePath);
    const result = angular.copy(file);
    return result;
}