Запобігати вимогамJS від кешування необхідних сценаріїв

Схоже, RequireJS робить щось внутрішнє, що кешує необхідні файли javascript. Якщо я вношу зміни до одного з необхідних файлів, я повинен перейменувати файл, щоб зміни були застосовані.

Загальний трюк додавання номера версії як параметр запиту до кінця імені файлу не працює з Requjs <script src="jsfile.js?v2"></script>

Що я шукаю, це спосіб запобігти це внутрішнє кешування необхідних скриптів RequireJS без необхідності перейменувати мої файли сценаріїв щоразу, коли вони оновлюються.

Міжплатформене рішення:

Зараз я використовую urlArgs: "bust=" + (new Date()).getTime()для автоматичного перетворення кешу під час розробки та urlArgs: "bust=v2"для виробництва, де я збільшую номер жорсткої версії версії після розгортання оновленого необхідного сценарію.

Примітка:

@Dustin Getz в нещодавній відповіді згадував, що Інструменти для розробників Chrome опускатимуть точки проходу під час налагодження, коли файли Javascript постійно оновлюються таким чином. Одним із варіантів вирішення проблеми є написання debugger;коду для запуску точки перелому у більшості налагоджувачів JavaScript.

Рішення для сервера:

Конкретні рішення, які можуть працювати краще для вашого серверного середовища, таких як 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>, це означає, що запит виглядає так само, як будь-який старий актив завантажується.)

Обслуговуйте свої активи JavaScript за допомогою відповідних заголовків HTTP, щоб відключити кешування під час розробки.

Використовуючи urlArgs Require означає, що будь-які встановлені точки перерви не зберігатимуться під час оновлення; вам в кінцевому підсумку потрібно вставити debuggerзаяви у свій код. Поганий. Я використовую urlArgsдля активізації кеш-пам'яті під час модернізації виробництва за допомогою git sha; тоді я можу встановити, що мої активи будуть кешовані назавжди і гарантуються, що ніколи не матимуть застарілих активів.

У процесі розробки я знущаюся над усіма запитами ajax зі складною конфігурацією mockjax , тоді я можу обслуговувати свою програму в режимі javascript, лише з 10-ти рядковим http-сервером python з вимкненим кешуванням . Це призвело до масштабу для мене досить великого «корпоративного» додатка із сотнями спокійних кінцевих точок веб-сервісу. У нас навіть є контрактний дизайнер, який може працювати з нашою реальною кодовою базою даних, не надаючи йому доступу до нашого резервного коду.

Рішення urlArgs має проблеми. На жаль, ви не можете контролювати всі проксі-сервери, які можуть бути між вами та веб-браузером користувача. Деякі з цих проксі-серверів, на жаль, можуть бути налаштовані на ігнорування параметрів URL-адреси під час кешування файлів. Якщо це трапиться, неправильна версія файлу JS буде доставлена ​​вашому користувачеві.

Нарешті я відмовився і застосував власне виправлення безпосередньо у Requ.js. Якщо ви готові змінити свою версію бібліотеки Requjs, це рішення може працювати для вас.

Ви можете побачити виправлення тут:

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-файли.

Це добре підходить для мого середовища, але я розумію, що деякі користувачі вважають за краще префікс, а не суфікс. Можливо змінити мою комісію відповідно до ваших потреб.

Оновлення:

У обговоренні запиту про те, що вимагає, автор вимагає, щоб це могло працювати як рішення для префіксації ревізійного номера:

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

Я цього не пробував, але мається на увазі, що це вимагатиме наступної URL-адреси:

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

Що може працювати дуже добре для багатьох людей, які можуть використовувати префікс.

Ось кілька можливих повторюваних питань:

Потрібно кешування JS та кешування проксі

Requ.js - Як я можу встановити версію для необхідних модулів як частину URL-адреси?

Натхненний кеш-пам’яті Expire у data.js main.js, ми оновили сценарій розгортання із таким завданням:

<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 може спричинити проблеми!

Головний автор Requjs вважає за краще не використовуватиurlArgs :

Для розгорнутих активів я вважаю за краще розмістити версію або хеш для всієї збірки як каталог збірки, а потім просто змінити baseUrlконфігурацію, яка використовується для проекту, щоб використовувати цей версійний каталог як baseUrl. Тоді жодні інші файли не змінюються, і це допомагає уникнути деяких проблем з проксі, де вони можуть не кешувати URL із рядком запиту на ньому.

[Стильна шахта.]

Я дотримуюся цієї поради.

У розвитку

Я вважаю за краще використовувати сервер, який інтелектуально кешує файли, які можуть часто змінюватися: сервер, який видає Last-Modifiedта відповідає на If-Modified-Since304, коли це доречно. Навіть сервер, заснований на експрес- наборі Node для обслуговування статичних файлів, робить це прямо з вікна. Він не вимагає нічого робити з моїм браузером і не псує точки прориву.

Я взяв цей фрагмент з 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 для розробки веб-сайтів ). Відключення кешу відбувається лише в тому випадку, якщо відкрито діалогове вікно інструментів розробників, тому вам не потрібно турбуватися про перемикання цієї опції щоразу, коли ви регулярно переглядаєте.

Примітка. Використання ' urlArgs ' є правильним рішенням у виробництві, щоб користувачі отримували останній код. Але це ускладнює налагодження, оскільки хром приводить до втрати точок переривання при кожному оновленні (тому що його "новий" файл подається кожен раз).

Я не рекомендую використовувати ' urlArgs ' для кеш-пам'яті, що розривається з RequireJS. Оскільки це не вирішує проблему повною мірою. Оновлення версії no не призведе до завантаження всіх ресурсів, навіть якщо ви просто змінили один ресурс.

Для вирішення цієї проблеми я рекомендую використовувати модулі 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)

Існує просте рішення цієї проблеми, щоб ви могли завантажити унікальний номер редакції для кожного модуля.

Ви можете зберегти оригінальну функцію Requjs.load, перезаписати її власною функцією та знову проаналізувати модифікований URL на початковий файл Requjs.load:

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

У нашому процесі побудови я використав "gulp-rev" для створення файлу маніфесту з усією редакцією всіх модулів, які використовуються. Спрощена версія мого завдання з глотком:

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-модуль з номерами версій для модуля NameNames, який включений як 'oRevision' в main.js, де ви перезапишете функцію Requjs.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:

Створений файл:

Зберігати в змінній перед завантаженням Require.config.js:

Посилання в Requ.config.js:

У моєму випадку я хотів завантажувати одну і ту ж форму щоразу, коли клацнув, я не хотів, щоб зміни, внесені у файл, залишалися. Це може не стосуватися цієї публікації точно, але це може бути потенційним рішенням на стороні клієнта без встановлення конфігурації для вимоги. Замість того, щоб безпосередньо надсилати вміст, ви можете зробити копію потрібного файлу та зберегти недоторканий фактичний файл.

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