Фильтрация URL-адресов/Агрессивное кэширование с помощью NGINX + Express

Каков рекомендуемый метод обработки агрессивного кэширования и отпечатка URL-адресов в NGINX (прокси) и Node/Express stack?

Google рекомендует использовать отпечатки пальцев для динамического включения кеширования. в своих рекомендациях по лучшей практике, и именно этого я и пытаюсь достичь.

Я рассмотрел несколько разных подходов к отпечаткам пальцев, но я изо всех сил пытаюсь понять, в каком сценарии они будут генерировать новый отпечаток пальца и какую часть конвейера разработки лучше всего сидеть. Ранее я предполагал, что если в файле изменится "Last-Modified", тогда сервер будет генерировать еще один отпечаток, но пока это не так. (Если я неправильно сконфигурировал)

Вот несколько разных подходов:

Отпечаток времени выполнения

Создание отпечатков пальцев

Фингерпринт CI

Итак, пару вопросов, на которые я надеюсь, кто-то может ответить:

  • Является ли отпечаток пальца даже требованием с помощью ETags или слишком много отверстий в кросс-браузерной поддержке?

  • Активы должны располагаться на CDN, так что эта проблема в значительной степени отложена поставщику CDN (если да, то как вы обновляете ссылки без участия руководства)?

  • Как создать новый отпечаток пальца без ручного кеша?

  • Каково предположение о том, где эта отпечатка пальца будет сидеть в конвейере разработчиков? Я хочу избежать зависимости от подобных Grunt.js

Я чувствую, что мне не хватает чего-то ослепительно очевидного, поэтому, если вы можете ответить только на один из этих вопросов, я был бы очень благодарен.

Ответы

Ответ 1

Отпечатки пальцев и Etags являются отдельными функциями для уменьшения времени загрузки.

Etags избегают повторной передачи актива, если браузер кэшировал его, и этот актив не изменился. Но для обозревателя по-прежнему требуется отдельный HTTP-обратный маршрут, чтобы отправить сообщение "Нет-Матч" и вернуться обратно 304 "Не изменено".

Лучший способ ускорить HTTP-обратную связь - не делать этого вообще. Когда на второй странице веб-сайта используются те же активы, что и на первой странице, и эти активы имеют далеко идущий кеш будущего, заканчиваются заголовки, тогда нет необходимости даже совершать одну поездку туда-обратно для этих активов, когда они запрашиваются после первого раза.

Фингерпринт - это метод предоставления каждому активу уникального имени, которое получено из его содержимого. Затем, когда изменяется один бит в актив (например, пакет CSS), его имя изменяется, и поэтому браузер будет получать обновленный актив. И поскольку для отпечатка пальца используется криптографический хэш содержимого, уникальное имя вычисляется одинаково на нескольких серверах, если актив идентичен. Кэши везде (CDN, у интернет-провайдеров, в сетевом оборудовании или в веб-браузерах) могут хранить копию каждого актива, но поскольку HTML ссылается на уникальное имя каждого актива, будет использоваться только правильная версия этого актива из кеша.

Оба этига и отпечатки пальцев поддерживаются каждым браузером.

  • Отпечатки пальцев не требуются, это оптимизация. Если вы используете такие технологии, как Stylus, Browserify и AngularTemplateCaches, которые уже требуют шага сборки, то добавление отпечатков пальцев не требует затрат.

  • Ваши страницы HTML будут иметь имена типа /aboutus вместо /aboutus-sfghjs3646dhs73shwsbby3, которые они получат с помощью отпечатка пальца. Все решения, на которые вы ссылаетесь, поддерживают отпечатки пальцев Javascript, CSS и изображений, а также способ динамически подменять имя отпечатка пальцем на HTML. Таким образом, HTML будет ссылаться на /css-hs6hd73ydhs7d7shsh7w, пока вы не измените байт в CSS, а затем они будут ссылаться на /css-37r7dhsh373hd73 (другой файл).

  • Отпечатки пальцев нужно генерировать только при изменении файла, который обычно должен быть перезапущен или создан сервером.

  • Я рекомендую Asset Rack, который поддерживает множество типов активов и может обслуживать отпечатки пальцев из оперативной памяти или нажимать их на CDN. Он генерирует все отпечатки пальцев при каждом запуске Express.