ป้องกัน RequireJS จากการแคชสคริปต์ที่จำเป็น

RequireJS ดูเหมือนว่าจะทำอะไรบางอย่างภายในว่าแคชจำเป็นต้องใช้ไฟล์จาวาสคริปต์ หากฉันทำการเปลี่ยนแปลงหนึ่งในไฟล์ที่ต้องการฉันจะต้องเปลี่ยนชื่อไฟล์เพื่อให้การเปลี่ยนแปลงมีผล

เคล็ดลับทั่วไปของการต่อท้ายหมายเลขรุ่นเป็นพารามิเตอร์การสอบถามถึงจุดสิ้นสุดของชื่อไฟล์ไม่สามารถทำงานกับ requirejs <script src="jsfile.js?v2"></script>

สิ่งที่ฉันกำลังมองหาคือวิธีป้องกันการแคชภายในสคริปต์ที่ต้องการของ RequireJS โดยไม่ต้องเปลี่ยนชื่อไฟล์สคริปต์ของฉันทุกครั้งที่มีการอัปเดต

โซลูชันข้ามแพลตฟอร์ม:

ตอนนี้ฉันกำลังใช้urlArgs: "bust=" + (new Date()).getTime()สำหรับแคชอัตโนมัติในระหว่างการพัฒนาและurlArgs: "bust=v2"สำหรับการผลิตที่ฉันเพิ่มเวอร์ชันที่มีรหัสฮาร์ดโค้ดหลังจากเผยแพร่สคริปต์ที่ต้องการที่อัปเดตแล้ว

บันทึก:

@Dustin Getz พูดถึงในคำตอบล่าสุดว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome จะวางจุดพักระหว่างการดีบักเมื่อไฟล์ Javascript มีการรีเฟรชอย่างต่อเนื่องเช่นนี้ วิธีแก้ปัญหาหนึ่งคือการเขียนdebugger;โค้ดเพื่อทริกเกอร์เบรกพอยต์ในตัวแก้ไขข้อบกพร่องจาวาสคริปต์ส่วนใหญ่

โซลูชันเฉพาะเซิร์ฟเวอร์:

สำหรับวิธีแก้ปัญหาเฉพาะที่อาจทำงานได้ดีขึ้นสำหรับสภาพแวดล้อมเซิร์ฟเวอร์ของคุณเช่น Node หรือ Apache ดูคำตอบด้านล่าง

RequireJS สามารถกำหนดค่าให้ต่อท้ายค่ากับแต่ละ URL ของสคริปต์สำหรับการใช้แคช

จากเอกสาร RequireJS ( http://requirejs.org/docs/api.html#config ):

urlArgs : อาร์กิวเมนต์สตริงข้อความค้นหาพิเศษผนวกเข้ากับ URL ที่ RequireJS ใช้เพื่อดึงข้อมูลทรัพยากร มีประโยชน์มากที่สุดในการหยุดการแคชเมื่อเบราว์เซอร์หรือเซิร์ฟเวอร์ไม่ได้กำหนดค่าอย่างถูกต้อง

ตัวอย่างต่อท้าย "v2" กับสคริปต์ทั้งหมด:

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

เพื่อจุดประสงค์ในการพัฒนาคุณสามารถบังคับให้ RequireJS เลี่ยงผ่านแคชได้โดยการต่อเวลาประทับ:

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

อย่าใช้ urlArgs สำหรับสิ่งนี้!

ต้องการโหลดสคริปต์ที่เกี่ยวข้องกับส่วนหัวแคช http (สคริปต์โหลดเต็มไปด้วยการแทรกแบบไดนามิก<script>ซึ่งหมายความว่าคำขอมีลักษณะเหมือนกับการโหลดเนื้อหาเก่า ๆ )

แสดงเนื้อหาจาวาสคริปต์ของคุณด้วยส่วนหัว HTTP ที่เหมาะสมเพื่อปิดใช้งานการแคชระหว่างการพัฒนา

urlArgs ของการใช้ require หมายถึงเบรกพอยต์ใด ๆ ที่คุณตั้งค่าไว้จะไม่ถูกสงวนไว้ตลอดการรีเฟรช ท้ายที่สุดคุณจำเป็นต้องวางdebuggerคำสั่งทุกที่ในรหัสของคุณ ไม่ดี ฉันใช้urlArgsสำหรับสินทรัพย์ที่แคชในระหว่างการอัพเกรดการผลิตด้วย git sha; จากนั้นฉันสามารถกำหนดให้สินทรัพย์ของฉันถูกเก็บถาวรตลอดไปและรับประกันได้ว่าจะไม่มีสินทรัพย์เก่า

ในการพัฒนาผมเยาะเย้ยร้องขออาแจ็กซ์ทั้งหมดที่มีความซับซ้อนmockjaxกำหนดค่าแล้วฉันสามารถใช้ app ของฉันในโหมดจาวาสคริปต์เท่านั้นมี10 บรรทัดเซิร์ฟเวอร์หลามแคช http กับทุกปิด สิ่งนี้ทำให้ฉันมีขนาดใหญ่ขึ้นสำหรับแอปพลิเคชั่น "enterprisey" ที่มีจุดสิ้นสุดเว็บเซอร์ที่สงบนับร้อย เรายังมีนักออกแบบตามสัญญาที่สามารถทำงานกับฐานการผลิตจริงของเราโดยไม่ให้เขาเข้าถึงรหัสแบ็กเอนด์ของเรา

วิธีแก้ปัญหา urlArgs มีปัญหา น่าเสียดายที่คุณไม่สามารถควบคุมพร็อกซีเซิร์ฟเวอร์ทั้งหมดที่อาจอยู่ระหว่างคุณกับเว็บเบราว์เซอร์ของผู้ใช้ ขออภัยพร็อกซีเซิร์ฟเวอร์เหล่านี้บางตัวสามารถกำหนดค่าให้ละเว้นพารามิเตอร์ URL เมื่อแคชไฟล์ หากสิ่งนี้เกิดขึ้นไฟล์ JS ของคุณเวอร์ชันผิดจะถูกส่งไปยังผู้ใช้ของคุณ

ในที่สุดฉันก็ยอมแพ้และนำการแก้ไขของฉันไปใช้กับ หากคุณยินดีแก้ไขไลบรารี requirejs เวอร์ชันของคุณโซลูชันนี้อาจใช้งานได้สำหรับคุณ

คุณสามารถดูแพทช์ได้ที่นี่:

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

เมื่อเพิ่มแล้วคุณสามารถทำสิ่งนี้ในการกำหนดค่าของคุณ:

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

ใช้ระบบการสร้างหรือสภาพแวดล้อมเซิร์ฟเวอร์ของคุณเพื่อแทนที่buildNumberด้วยรหัสการแก้ไข / รุ่นซอฟต์แวร์ / สีที่ชื่นชอบ

การใช้ต้องมีดังนี้:

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

จะทำให้ต้องมีการร้องขอไฟล์นี้:

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

ในสภาพแวดล้อมเซิร์ฟเวอร์ของเราเราใช้กฎการเขียน url ใหม่เพื่อแยก buildNumber และให้บริการไฟล์ JS ที่ถูกต้อง วิธีนี้เราไม่ต้องกังวลกับการเปลี่ยนชื่อไฟล์ JS ทั้งหมดของเรา

แพตช์จะไม่สนใจสคริปต์ใด ๆ ที่ระบุโปรโตคอลและจะไม่มีผลกับไฟล์ที่ไม่ใช่ JS

สิ่งนี้ทำงานได้ดีสำหรับสภาพแวดล้อมของฉัน แต่ฉันรู้ว่าผู้ใช้บางคนอาจต้องการคำนำหน้ามากกว่าคำต่อท้ายมันควรจะง่ายต่อการปรับเปลี่ยนคอมมิทของฉันให้เหมาะกับความต้องการของคุณ

ปรับปรุง:

ในการสนทนาคำขอดึงผู้เขียน requirejs แนะนำสิ่งนี้อาจทำงานเป็นวิธีแก้ไขปัญหาหมายเลขนำหน้าการแก้ไข

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

ฉันไม่ได้ลองสิ่งนี้ แต่ความหมายก็คือว่าจะขอ URL ต่อไปนี้:

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

ซึ่งอาจทำงานได้ดีมากสำหรับคนจำนวนมากที่สามารถใช้ส่วนนำ

ต่อไปนี้เป็นคำถามที่ซ้ำกันที่เป็นไปได้:

ต้องการแคช JS และพร็อกซี

require.js - ฉันจะตั้งค่าเวอร์ชันในโมดูลที่ต้องการเป็นส่วนหนึ่งของ URL ได้อย่างไร

ได้รับแรงบันดาลใจจากExpire cache บน require.js data-mainเราอัพเดตสคริปต์การปรับใช้ของเราด้วยภารกิจ ant ต่อไปนี้:

<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 มีลักษณะอย่างไร:

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

ในการผลิต

urlArgs อาจทำให้เกิดปัญหา!

ผู้เขียนหลักของ requirejs ไม่ต้องการใช้urlArgs :

สินทรัพย์ที่นำไปใช้ผมชอบที่จะนำรุ่นหรือแฮสำหรับการสร้างทั้งหมดเป็นสร้างไดเรกทอรีแล้วเพียงแค่ปรับเปลี่ยนbaseUrlการตั้งค่าที่ใช้สำหรับโครงการเพื่อการใช้งานที่ versioned baseUrlไดเรกทอรีเป็น จากนั้นจะไม่มีการเปลี่ยนแปลงไฟล์อื่น ๆ และจะช่วยหลีกเลี่ยงปัญหาพร็อกซีบางอย่างซึ่งอาจไม่ได้แคช URL ที่มีสตริงข้อความค้นหา

[เหมืองใส่สไตล์]

ฉันทำตามคำแนะนำนี้

ในการพัฒนา

ฉันชอบที่จะใช้เซิร์ฟเวอร์ที่เก็บไฟล์อย่างชาญฉลาดซึ่งอาจมีการเปลี่ยนแปลงบ่อยครั้ง: เซิร์ฟเวอร์ที่ปล่อยLast-ModifiedและตอบสนองIf-Modified-Sinceด้วย 304 เมื่อเหมาะสม แม้แต่เซิร์ฟเวอร์ที่อยู่บนพื้นฐานของการตั้งค่าด่วนของโหนดที่ให้บริการไฟล์แบบคงที่ก็สามารถทำได้ทันที มันไม่จำเป็นต้องทำอะไรกับเบราว์เซอร์ของฉันและไม่ทำให้เบรกพอยต์เสียหาย

ฉันนำตัวอย่างนี้จากAskApacheและใส่ลงในไฟล์. conf แยกจากเว็บเซิร์ฟเวอร์ Apache ในเครื่อง (ในกรณีของฉัน /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>

สำหรับการพัฒนาสิ่งนี้ใช้ได้ดีโดยไม่จำเป็นต้องเปลี่ยนรหัส สำหรับการผลิตฉันอาจใช้วิธีของ @ dvtoever

แก้ไขด่วนสำหรับการพัฒนา

สำหรับการพัฒนาคุณสามารถปิดการใช้งานแคชใน Chrome Dev Tools ( ปิดใช้งานแคช Chrome สำหรับการพัฒนาเว็บไซต์ ) การปิดใช้งานแคชจะเกิดขึ้นเฉพาะเมื่อกล่องโต้ตอบเครื่องมือ dev เปิดอยู่ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับการสลับตัวเลือกนี้ทุกครั้งที่คุณเรียกดูเป็นประจำ

หมายเหตุ: การใช้ ' urlArgs ' เป็นโซลูชันที่เหมาะสมในการผลิตเพื่อให้ผู้ใช้ได้รับรหัสล่าสุด แต่มันทำให้การแก้จุดบกพร่องยากเพราะ Chrome ทำให้จุดพักหยุดใช้งานไม่ได้กับการรีเฟรชทุกครั้ง (เพราะเป็นไฟล์ 'ใหม่' ที่ให้บริการในแต่ละครั้ง)

ฉันไม่แนะนำให้ใช้ ' urlArgs ' สำหรับแคชที่เต็มไปด้วย RequireJS เช่นนี้ไม่สามารถแก้ปัญหาได้อย่างเต็มที่ การอัปเดตเวอร์ชันจะไม่ส่งผลให้ดาวน์โหลดทรัพยากรทั้งหมดแม้ว่าคุณจะเปลี่ยนทรัพยากรเพียงครั้งเดียวก็ตาม

เพื่อจัดการปัญหานี้ฉันแนะนำให้ใช้โมดูล Grunt เช่น 'filerev' สำหรับการสร้างหมายเลขการแก้ไข ด้านบนของนี้ฉันได้เขียนงานที่กำหนดเองใน Gruntfile เพื่อปรับปรุงการแก้ไขไม่จำเป็นต้องมีทุกที่

หากจำเป็นฉันสามารถแบ่งปันข้อมูลโค้ดสำหรับงานนี้

นี่คือวิธีที่ฉันทำใน Django / Flask (สามารถปรับให้เข้ากับระบบภาษา VCS อื่น ๆ ได้อย่างง่ายดาย):

ในของคุณconfig.py(ฉันใช้สิ่งนี้ใน python3 ดังนั้นคุณอาจต้องปรับแต่งการเข้ารหัสใน python2)

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

จากนั้นในเทมเพลตของคุณ:

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

• ไม่ต้องการกระบวนการสร้างด้วยตนเอง
• ทำงานเพียงgit rev-parse HEADครั้งเดียวเมื่อแอปเริ่มต้นและเก็บไว้ในconfigวัตถุ

โซลูชันแบบไดนามิก (ไม่มี urlArgs)

มีวิธีแก้ไขปัญหาอย่างง่ายสำหรับปัญหานี้เพื่อให้คุณสามารถโหลดหมายเลขการแก้ไขเฉพาะสำหรับทุกโมดูลได้

คุณสามารถบันทึกฟังก์ชั่น requirejs.load ต้นฉบับเขียนทับมันด้วยฟังก์ชั่นของคุณเองและแยกวิเคราะห์ url ที่แก้ไขแล้วของคุณไปที่ requirejs.load ดั้งเดิมอีกครั้ง:

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

ในกระบวนการสร้างของเราฉันใช้ "gulp-rev" เพื่อสร้างไฟล์รายการที่มีการแก้ไขทั้งหมดของโมดูลทั้งหมดที่ใช้ beeing รุ่นที่ง่ายของงานอึกของฉัน:

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

สิ่งนี้จะสร้างโมดูล AMD ที่มีหมายเลขการแก้ไขไปยัง moduleNames ซึ่งรวมอยู่ใน 'oRevision' ใน main.js ซึ่งคุณเขียนทับฟังก์ชั่น requirejs.load ดังที่แสดงไว้ก่อนหน้านี้

นี่คือนอกเหนือไปจากคำตอบที่ยอมรับของ @phil mccull

ฉันใช้วิธีการของเขา แต่ฉันก็ทำให้กระบวนการโดยอัตโนมัติด้วยการสร้างเทมเพลต T4 เพื่อให้ทำงานก่อนสร้าง

คำสั่งสร้างล่วงหน้า:

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:

ไฟล์ที่สร้าง:

เก็บในตัวแปรก่อนที่จะต้องโหลดไฟล์ config:

การอ้างอิงใน require.config.js:

ในกรณีของฉันฉันต้องการโหลดแบบฟอร์มเดียวกันทุกครั้งที่ฉันคลิกฉันไม่ต้องการให้การเปลี่ยนแปลงที่ทำกับไฟล์ยังคงอยู่ อาจไม่เกี่ยวข้องกับการโพสต์นี้ แต่อาจเป็นวิธีแก้ปัญหาที่อาจเกิดขึ้นในฝั่งไคลเอ็นต์โดยไม่ต้องตั้งค่าการกำหนดค่าสำหรับความต้องการ แทนที่จะส่งเนื้อหาโดยตรงคุณสามารถทำสำเนาไฟล์ที่ต้องการและเก็บไฟล์จริงไว้

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