RequireJS tampaknya melakukan sesuatu secara internal yang membuat cache file javascript diperlukan. Jika saya membuat perubahan ke salah satu file yang diperlukan, saya harus mengganti nama file agar perubahan diterapkan.
Trik umum menambahkan nomor versi sebagai parameter querystring ke akhir nama file tidak bekerja dengan requireejs <script src="jsfile.js?v2"></script>
Apa yang saya cari adalah cara untuk mencegah cache internal dari skrip yang diperlukan ini tanpa harus mengganti nama file skrip saya setiap kali diperbarui.
Solusi Lintas Platform:
Saya sekarang menggunakan urlArgs: "bust=" + (new Date()).getTime()
untuk penghilang cache otomatis selama pengembangan dan urlArgs: "bust=v2"
untuk produksi di mana saya menambah num versi hard-kode setelah meluncurkan skrip yang diperlukan diperbarui.
catatan:
@Dustin Getz disebutkan dalam jawaban baru-baru ini bahwa Alat Pengembang Chrome akan melepaskan breakpoints saat debugging ketika file Javascript terus disegarkan seperti ini. Salah satu solusinya adalah menulis debugger;
dalam kode untuk memicu breakpoint di sebagian besar debugger Javascript.
Solusi Khusus Server:
Untuk solusi spesifik yang mungkin berfungsi lebih baik untuk lingkungan server Anda seperti Node atau Apache, lihat beberapa jawaban di bawah ini.
sumber
Jawaban:
RequireJS dapat dikonfigurasikan untuk menambahkan nilai ke setiap url skrip untuk penghentian cache.
Dari dokumentasi RequireJS ( http://requirejs.org/docs/api.html#config ):
Contoh, menambahkan "v2" ke semua skrip:
Untuk tujuan pengembangan, Anda dapat memaksa RequireJS untuk mem-bypass cache dengan menambahkan stempel waktu:
sumber
urlArgs: "bust=" + (new Date()).getTime()
penghilang cache secara otomatis selama pengembangan danurlArgs: "bust=v2"
untuk produksi di mana saya menambah num versi hard-code setelah meluncurkan skrip yang diperlukan yang diperbarui.urlArgs: "bust=" + (+new Date)
urlArgs
.Jangan gunakan urlArgs untuk ini!
Memerlukan banyak skrip untuk menghormati header caching http. (Skrip dimuat dengan dimasukkan secara dinamis
<script>
, yang berarti permintaan tampak seperti aset lama mana pun yang dimuat).Sajikan aset javascript Anda dengan tajuk HTTP yang tepat untuk menonaktifkan caching selama pengembangan.
Menggunakan urlArgs yang diperlukan itu berarti setiap breakpoint yang Anda atur tidak akan disimpan di seluruh refresh; Anda akhirnya harus meletakkan
debugger
pernyataan di mana-mana dalam kode Anda. Buruk. Saya menggunakanurlArgs
aset penghilang cache selama peningkatan produksi dengan git sha; maka saya dapat mengatur aset saya untuk di-cache selamanya dan dijamin tidak pernah memiliki aset basi.Dalam pengembangan, saya mengolok-olok semua permintaan ajax dengan konfigurasi mockjax yang kompleks , maka saya dapat melayani aplikasi saya dalam mode hanya-javascript dengan server 10 baris python http dengan semua cache dimatikan . Ini telah meningkatkan bagi saya untuk aplikasi "perusahaan" yang cukup besar dengan ratusan titik akhir layanan web yang tenang. Kami bahkan memiliki desainer yang dikontrak yang dapat bekerja dengan basis kode produksi nyata kami tanpa memberinya akses ke kode backend kami.
sumber
debugger;
kode Anda di mana pun Anda ingin breakpoint bertahan.Solusi urlArgs memiliki masalah. Sayangnya Anda tidak dapat mengontrol semua server proxy yang mungkin berada di antara Anda dan browser web pengguna Anda. Beberapa dari server proxy ini sayangnya dapat dikonfigurasi untuk mengabaikan parameter URL saat menyimpan file. Jika ini terjadi, versi file JS Anda yang salah akan dikirimkan ke pengguna Anda.
Saya akhirnya menyerah dan menerapkan perbaikan saya sendiri langsung ke require.js. Jika Anda ingin mengubah versi Anda dari perpustakaan Requirejs, solusi ini mungkin cocok untuk Anda.
Anda dapat melihat tambalan di sini:
https://github.com/jbcpollak/requirejs/commit/589ee0cdfe6f719cd761eee631ce68eee09a5a67
Setelah ditambahkan, Anda dapat melakukan sesuatu seperti ini di config:
Gunakan sistem bangunan atau lingkungan server Anda untuk menggantinya
buildNumber
dengan id revisi / versi perangkat lunak / warna favorit.Menggunakan memerlukan seperti ini:
Akan menyebabkan harus meminta file ini:
Di lingkungan server kami, kami menggunakan aturan penulisan ulang url untuk menghapus buildNumber, dan menyajikan file JS yang benar. Dengan cara ini kita sebenarnya tidak perlu khawatir mengganti nama semua file JS kita.
Patch akan mengabaikan skrip apa pun yang menentukan protokol, dan itu tidak akan memengaruhi file non-JS.
Ini berfungsi baik untuk lingkungan saya, tetapi saya menyadari beberapa pengguna lebih memilih awalan daripada akhiran, seharusnya mudah untuk memodifikasi komit saya sesuai dengan kebutuhan Anda.
Memperbarui:
Dalam diskusi permintaan tarik, penulis yang membutuhkan menyarankan ini mungkin berfungsi sebagai solusi untuk awalan nomor revisi:
Saya belum mencoba ini, tetapi implikasinya adalah ini akan meminta URL berikut:
Yang mungkin bekerja sangat baik bagi banyak orang yang dapat menggunakan awalan.
Berikut beberapa kemungkinan pertanyaan rangkap:
Membutuhkan JSS dan caching proxy
require.js - Bagaimana saya bisa mengatur versi pada modul yang diperlukan sebagai bagian dari URL?
sumber
/scripts/myLib/v1.1/
. Saya mencoba menambahkan postfix (atau awalan) ke nama file saya, mungkin karena itulah yang dilakukan jquery, tetapi setelah beberapa saat saya [mulai malas dan] mulai menambah nomor versi di folder induk. Saya pikir itu membuat pemeliharaan lebih mudah bagi saya di situs web besar tetapi, sekarang Anda membuat saya khawatir tentang URL menulis ulang mimpi buruk.<script data-main="${pageContext.request.contextPath}/resources/scripts/main" src="${pageContext.request.contextPath}/resources/scripts/require.js"> <jsp:text/> </script> <script> require([ 'dev/module' ]); </script>
Terinspirasi oleh Kedaluwarsa cache pada data-diperlukan. Kami memperbarui skrip penerapan kami dengan tugas semut berikut:
Di mana awal main.js terlihat seperti:
sumber
Dalam produksi
urlArgs
dapat menyebabkan masalah!Penulis utama requirejs memilih untuk tidak menggunakan
urlArgs
:[Styling milikku.]
Saya mengikuti saran ini.
Dalam pengembangan
Saya lebih suka menggunakan server yang secara cerdas menyimpan file yang mungkin sering berubah: server yang memancarkan
Last-Modified
dan meresponsIf-Modified-Since
dengan 304 jika perlu. Bahkan server yang didasarkan pada Node's express set untuk melayani file-file statis melakukan hal ini. Itu tidak perlu melakukan apa pun ke browser saya, dan tidak mengacaukan breakpoints.sumber
Saya mengambil cuplikan ini dari AskApache dan memasukkannya ke dalam file .conf terpisah dari server web Apache lokal saya (dalam kasus saya /etc/apache2/others/preventcaching.conf):
Untuk pengembangan ini berfungsi dengan baik tanpa perlu mengubah kode. Sedangkan untuk produksi, saya mungkin menggunakan pendekatan @ dvtoever.
sumber
Perbaikan Cepat untuk Pengembangan
Untuk pengembangan, Anda bisa menonaktifkan cache di Alat Dev Chrome ( Menonaktifkan cache Chrome untuk pengembangan situs web ). Penonaktifan cache hanya terjadi jika dialog dev tools terbuka, jadi Anda tidak perlu khawatir untuk mengaktifkan opsi ini setiap kali Anda melakukan penelusuran biasa.
Catatan: Menggunakan ' urlArgs ' adalah solusi yang tepat dalam produksi sehingga pengguna mendapatkan kode terbaru. Tetapi itu membuat debugging sulit karena chrome membatalkan breakpoints dengan setiap refresh (karena file 'baru' dilayani setiap kali).
sumber
Saya tidak merekomendasikan menggunakan ' urlArgs ' untuk cache yang meledak dengan RequireJS. Karena ini tidak menyelesaikan masalah sepenuhnya. Memperbarui versi no akan menghasilkan pengunduhan semua sumber daya, meskipun Anda baru saja mengubah satu sumber daya.
Untuk menangani masalah ini saya sarankan menggunakan modul Grunt seperti 'filerev' untuk membuat revisi no. Yang paling penting, saya telah menulis tugas khusus di Gruntfile untuk memperbarui revisi ini, kapan pun diperlukan.
Jika perlu saya dapat membagikan potongan kode untuk tugas ini.
sumber
Ini adalah bagaimana saya melakukannya di Django / Flask (dapat dengan mudah disesuaikan dengan sistem bahasa / VCS lainnya):
Di Anda
config.py
(saya menggunakan ini di python3, jadi Anda mungkin perlu men-tweak encoding di python2)Kemudian di templat Anda:
git rev-parse HEAD
sekali ketika aplikasi dimulai, dan menyimpannya diconfig
objeksumber
Solusi dinamis (tanpa urlArgs)
Ada solusi sederhana untuk masalah ini, sehingga Anda dapat memuat nomor revisi unik untuk setiap modul.
Anda dapat menyimpan fungsi requireejs.load yang asli, menimpa dengan fungsi Anda sendiri dan mem-parsing url Anda yang telah dimodifikasi ke yang asli needsejs.load lagi:
Dalam proses pembangunan kami, saya menggunakan "gulp-rev" untuk membangun file manifes dengan semua revisi dari semua modul yang digunakan. Versi sederhana dari tugas teguk saya:
ini akan menghasilkan AMD-module dengan angka revisi ke moduleNames, yang dimasukkan sebagai 'oRevision' di main.js, di mana Anda menimpa fungsi needsejs.load seperti yang ditunjukkan sebelumnya.
sumber
Ini sebagai tambahan untuk jawaban yang diterima @phil mccull.
Saya menggunakan metodenya tetapi saya juga mengotomatiskan proses dengan membuat template T4 untuk menjalankan pra-membangun.
Perintah Pra-Bangun:
Templat T4:
File yang Dihasilkan:
Simpan dalam variabel sebelum require.config.js dimuat:
Referensi di require.config.js:
sumber
Dalam kasus saya, saya ingin memuat formulir yang sama setiap kali saya mengklik, saya tidak ingin perubahan yang saya buat pada file tetap. Ini mungkin tidak relevan dengan postingan ini secara tepat, tetapi ini bisa menjadi solusi potensial di sisi klien tanpa menetapkan konfigurasi yang diperlukan. Alih-alih mengirim konten secara langsung, Anda dapat membuat salinan file yang diperlukan dan mempertahankan file yang sebenarnya tetap utuh.
sumber