Ngăn chặn RequireJS khỏi bộ đệm yêu cầu

RequireJS dường như làm một cái gì đó bên trong mà lưu trữ các tệp javascript cần thiết. Nếu tôi thực hiện thay đổi đối với một trong các tệp bắt buộc, tôi phải đổi tên tệp để thay đổi được áp dụng.

Thủ thuật phổ biến của việc nối thêm số phiên bản dưới dạng tham số chuỗi truy vấn vào cuối tên tệp không hoạt động với requestjs <script src="jsfile.js?v2"></script>

Những gì tôi đang tìm kiếm là một cách để ngăn chặn bộ đệm nội bộ này của các tập lệnh được yêu cầu RequireJS mà không phải đổi tên các tập tin tập lệnh của tôi mỗi khi chúng được cập nhật.

Giải pháp đa nền tảng:

Bây giờ tôi đang sử dụng urlArgs: "bust=" + (new Date()).getTime()để tự động lưu trữ bộ đệm trong quá trình phát triển và urlArgs: "bust=v2"để sản xuất khi tôi tăng số num phiên bản được mã hóa cứng sau khi đưa ra một tập lệnh được yêu cầu cập nhật.

Ghi chú:

@Dustin Getz đã đề cập trong một câu trả lời gần đây rằng Công cụ dành cho nhà phát triển Chrome sẽ bỏ các điểm dừng trong quá trình gỡ lỗi khi các tệp Javascript được làm mới liên tục như thế này. Một cách giải quyết khác là viết debugger;mã để kích hoạt điểm dừng trong hầu hết các trình gỡ lỗi Javascript.

Giải pháp dành riêng cho máy chủ:

Để biết các giải pháp cụ thể có thể hoạt động tốt hơn cho môi trường máy chủ của bạn như Node hoặc Apache, hãy xem một số câu trả lời dưới đây.

RequireJS có thể được cấu hình để nối thêm một giá trị cho mỗi url của tập lệnh để xóa bộ đệm.

Từ tài liệu RequireJS ( http://requirejs.org/docs/api.html#config ):

urlArss : Đối số chuỗi truy vấn bổ sung được thêm vào các URL mà RequireJS sử dụng để tìm nạp tài nguyên. Hữu ích nhất để lưu trữ bộ đệm khi trình duyệt hoặc máy chủ không được cấu hình đúng.

Ví dụ, nối thêm "v2" cho tất cả các tập lệnh:

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

Đối với mục đích phát triển, bạn có thể buộc RequireJS bỏ qua bộ đệm bằng cách nối thêm dấu thời gian:

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

Không sử dụng urlArss cho việc này!

Yêu cầu tải tập lệnh tôn trọng tiêu đề bộ đệm http. (Tập lệnh được tải tự động chèn <script>, có nghĩa là yêu cầu trông giống như bất kỳ tài sản cũ nào được tải.)

Phục vụ tài sản javascript của bạn với các tiêu đề HTTP thích hợp để vô hiệu hóa bộ đệm trong quá trình phát triển.

Sử dụng urlArss của request có nghĩa là bất kỳ điểm dừng nào bạn đặt sẽ không được bảo toàn trong các lần làm mới; cuối cùng bạn cần đặt các debuggercâu lệnh ở mọi nơi trong mã của bạn. Xấu. Tôi sử dụng urlArgscho các tài sản phá bộ nhớ cache trong quá trình nâng cấp sản xuất với git sha; sau đó tôi có thể đặt tài sản của mình được lưu trữ vĩnh viễn và được đảm bảo không bao giờ có tài sản cũ.

Trong quá trình phát triển, tôi giả định tất cả các yêu cầu ajax với cấu hình mockjax phức tạp , sau đó tôi có thể phục vụ ứng dụng của mình ở chế độ chỉ javascript với máy chủ http python 10 dòng với tất cả bộ nhớ đệm đã tắt . Điều này đã mở rộng cho tôi một ứng dụng "enterprisey" khá lớn với hàng trăm điểm cuối dịch vụ web yên tĩnh. Chúng tôi thậm chí có một nhà thiết kế hợp đồng có thể làm việc với cơ sở sản xuất thực tế của chúng tôi mà không cho anh ta truy cập vào mã phụ trợ của chúng tôi.

Giải pháp urlArss có vấn đề. Thật không may, bạn không thể kiểm soát tất cả các máy chủ proxy có thể nằm giữa bạn và trình duyệt web của người dùng. Một số máy chủ proxy có thể không may được cấu hình để bỏ qua các tham số URL khi lưu trữ tệp. Nếu điều này xảy ra, phiên bản sai của tệp JS của bạn sẽ được gửi đến người dùng của bạn.

Cuối cùng tôi đã từ bỏ và thực hiện sửa lỗi của riêng tôi trực tiếp vào allow.js. Nếu bạn sẵn sàng sửa đổi phiên bản thư viện của bạn, giải pháp này có thể phù hợp với bạn.

Bạn có thể xem bản vá ở đây:

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

Sau khi thêm, bạn có thể làm một cái gì đó như thế này trong cấu hình yêu cầu của bạn:

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

Sử dụng hệ thống xây dựng hoặc môi trường máy chủ của bạn để thay thế buildNumberbằng id sửa đổi / phiên bản phần mềm / màu yêu thích.

Sử dụng yêu cầu như thế này:

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

Sẽ gây ra yêu cầu yêu cầu tập tin này:

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

Trên môi trường máy chủ của chúng tôi, chúng tôi sử dụng các quy tắc viết lại url để loại bỏ buildNumber và cung cấp tệp JS chính xác. Bằng cách này, chúng tôi thực sự không phải lo lắng về việc đổi tên tất cả các tệp JS của mình.

Bản vá sẽ bỏ qua bất kỳ tập lệnh nào chỉ định một giao thức và nó sẽ không ảnh hưởng đến bất kỳ tệp không phải là JS.

Điều này hoạt động tốt cho môi trường của tôi, nhưng tôi nhận ra một số người dùng sẽ thích tiền tố hơn là hậu tố, nên dễ dàng sửa đổi cam kết của tôi cho phù hợp với nhu cầu của bạn.

Cập nhật:

Trong cuộc thảo luận về yêu cầu kéo, tác giả requestjs cho rằng điều này có thể hoạt động như một giải pháp để thêm tiền tố vào số sửa đổi:

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

Tôi chưa thử điều này, nhưng hàm ý là điều này sẽ yêu cầu URL sau:

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

Điều này có thể hoạt động rất tốt cho nhiều người có thể sử dụng tiền tố.

Dưới đây là một số câu hỏi trùng lặp có thể có:

RequireJS và bộ nhớ cache proxy

Yêu cầu - Làm cách nào tôi có thể đặt phiên bản trên các mô-đun được yêu cầu làm một phần của URL?

Lấy cảm hứng từ bộ nhớ cache hết hạn trên data.js chính, chúng tôi đã cập nhật tập lệnh triển khai của chúng tôi với tác vụ ant sau:

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

Nơi bắt đầu của main.js trông như sau:

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

Trong sản xuất

urlArgs có thể gây ra vấn đề!

Tác giả chính của allowjs không thích sử dụngurlArgs :

Đối với các tài sản được triển khai, tôi thích đặt phiên bản hoặc hàm băm cho toàn bộ bản dựng dưới dạng thư mục bản dựng, sau đó chỉ cần sửa đổi baseUrlcấu hình được sử dụng cho dự án để sử dụng thư mục được phiên bản đó làm baseUrl. Sau đó, không có tệp nào khác thay đổi và nó giúp tránh một số vấn đề về proxy khi chúng không thể lưu trữ URL với chuỗi truy vấn trên đó.

[Tạo kiểu của tôi.]

Tôi làm theo lời khuyên này.

Trong giai đoạn phát triển

Tôi thích sử dụng một máy chủ lưu trữ thông minh các tệp có thể thay đổi thường xuyên: một máy chủ phát ra Last-Modifiedvà phản hồi If-Modified-Sincevới 304 khi thích hợp. Ngay cả một máy chủ dựa trên bộ chuyển phát nhanh của Node để phục vụ các tệp tĩnh cũng thực hiện ngay việc này. Nó không yêu cầu làm bất cứ điều gì với trình duyệt của tôi và không làm rối các điểm dừng.

Tôi đã lấy đoạn mã này từ AskApache và đặt nó vào một tệp .conf riêng biệt của máy chủ web Apache cục bộ của tôi (trong trường hợp của tôi /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>

Để phát triển, nó hoạt động tốt mà không cần thay đổi mã. Đối với sản xuất, tôi có thể sử dụng phương pháp của @ dvtoever.

Sửa chữa nhanh để phát triển

Để phát triển, bạn chỉ có thể tắt bộ đệm trong Công cụ phát triển Chrome ( Tắt bộ đệm Chrome để phát triển trang web ). Việc vô hiệu hóa bộ đệm chỉ xảy ra nếu hộp thoại dev tools mở, vì vậy bạn không cần phải lo lắng về việc bật tùy chọn này mỗi khi bạn duyệt web thông thường.

Lưu ý: Sử dụng ' urlArss ' là giải pháp phù hợp trong sản xuất để người dùng có được mã mới nhất. Nhưng nó làm cho việc gỡ lỗi trở nên khó khăn vì chrome vô hiệu hóa các điểm dừng với mỗi lần làm mới (vì tệp 'mới' của nó được phục vụ mỗi lần).

Tôi không khuyên bạn nên sử dụng ' urlArss ' cho bộ đệm cache với RequireJS. Vì điều này không giải quyết vấn đề đầy đủ. Cập nhật một phiên bản sẽ không dẫn đến việc tải xuống tất cả các tài nguyên, mặc dù bạn chỉ thay đổi một tài nguyên.

Để xử lý vấn đề này, tôi khuyên bạn nên sử dụng các mô-đun Grunt như 'filerev' để tạo bản sửa đổi số. Trên hết, tôi đã viết một tác vụ tùy chỉnh trong Gruntfile để cập nhật bản sửa đổi bất cứ nơi nào cần thiết.

Nếu cần tôi có thể chia sẻ đoạn mã cho nhiệm vụ này.

Đây là cách tôi thực hiện trong Django / Flask (có thể dễ dàng thích nghi với các ngôn ngữ / hệ thống VCS khác):

Trong của bạn config.py(tôi sử dụng điều này trong python3, vì vậy bạn có thể cần phải điều chỉnh mã hóa trong python2)

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

Sau đó, trong mẫu của bạn:

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

• Không yêu cầu quá trình xây dựng thủ công
• Chỉ chạy git rev-parse HEADmột lần khi ứng dụng khởi động và lưu trữ nó trong configđối tượng

Giải pháp động (không có urlArss)

Có một giải pháp đơn giản cho vấn đề này, để bạn có thể tải một số sửa đổi duy nhất cho mỗi mô-đun.

Bạn có thể lưu chức năng requestjs.load ban đầu, ghi đè lên chức năng của chính bạn và phân tích url đã sửa đổi của bạn thành yêu cầu ban đầu.

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

Trong quá trình xây dựng của chúng tôi, tôi đã sử dụng "gulp-rev" để xây dựng một tệp kê khai với tất cả các sửa đổi của tất cả các mô-đun đang sử dụng. Phiên bản đơn giản hóa của nhiệm vụ gulp của tôi:

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

điều này sẽ tạo ra một mô-đun AMD với các số sửa đổi thành moduleNames, được bao gồm dưới dạng 'oRevision' trong tệp main.js, nơi bạn ghi đè lên hàm requestjs.load như được hiển thị trước đó.

Đây là câu trả lời được chấp nhận của @phil mccull.

Tôi sử dụng phương pháp của anh ấy nhưng tôi cũng tự động hóa quy trình bằng cách tạo mẫu T4 để chạy trước khi xây dựng.

Các lệnh trước khi xây dựng:

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"

Mẫu T4:

Tạo tệp:

Lưu trữ trong biến trước khi request.config.js được tải:

Tham chiếu trong allow.config.js:

Trong trường hợp của tôi, tôi muốn tải cùng một hình thức mỗi lần tôi nhấp, tôi không muốn những thay đổi tôi đã thực hiện trên tệp. Nó có thể không liên quan đến bài đăng này một cách chính xác, nhưng đây có thể là một giải pháp tiềm năng ở phía máy khách mà không cần thiết lập cấu hình cho yêu cầu. Thay vì gửi nội dung trực tiếp, bạn có thể tạo một bản sao của tệp yêu cầu và giữ nguyên tệp thực tế.

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