Механизм доставки для JavaScript-пакета, потребляемого несколькими клиентами

Question

Сценарий:

Общий компонент, реализованный в виде микро-интерфейса и размещенный на S3...

• Пакет JS, содержащий все приложение (в веб-упаковке), размещенное на S3
• Пакет JS содержит хэш с последним коммитом, например component.{Hash}.js

Вопрос:

Когда мы отправляем новый пакет, какова лучшая стратегия для обеспечения того, чтобы новый пакет использовался всеми клиентами после выпуска, принимая во внимание кэширование браузера /CDN? Важное примечание: мы бы хотели, чтобы клиенты получали обновления немедленно (внутренние).

Примеры

1. При выпуске создайте файл component.html, который извлекает пакет (тег script) на основе последнего хеша. Отправьте новый файл component.html на S3. Клиенты используют <link rel-'import' href='somedomain.com/component.html'> всегда давая им последнюю поставленную версию.

Проблема. Пакет все еще может использовать преимущества кэширования на CD/ в браузере, но HTML-файл не может быть кэширован, так как нам нужно, чтобы он был горячим для любого выпуска. Также кажется странным, что нам нужно сделать две загрузки, чтобы просто попасть в один пакет.

2. Поставляется в качестве модуля NPM, который может использоваться клиентом во время сборки.

Проблема: если у нас есть 10 клиентов, все 10 необходимо собрать и отправить с новым компонентом. Предполагая, что package.lock не вызовет проблем с подстановочными знаками (недостаточно хорошо это знаю).

Примечание: внутренний компонент; могут подвергаться частым изменениям, например, тестирование AB и т. д.

Answer 1

Как правило, важно, чтобы страница / приложение, использующее ваш компонент, тестировалась и обновлялась с помощью любой новой версии вашего компонента. Поэтому ваша идея использовать NPM хороша. Как правило, желательно иметь это время задержки, чтобы разработчики страниц / приложений могли проверять функциональность, а также обрабатывать любые изменения API, которые могли произойти (преднамеренные или иные).

Для NPM Semantic Versioning (SemVer) является стандартом де-факто. Идея состоит в том, что вы нумеруете свои версии таким образом, чтобы исправления (без изменений API) могли быть немедленно обновлены в приложениях. Некоторые разработчики согласны с установкой последней версии патча вашего модуля. Многие предпочитают заблокировать определенную версию и выпустят ее только после тестирования, как и любое другое обновление.

Помимо NPM, в прошлом я использовал хешированные или версионные URL-адреса для библиотеки. Я также держал latest URL, который перенаправляет на последнюю версию. Для тех, кто интегрирует мою библиотеку, которым все равно, какая у них версия, они всегда получат последнюю версию таким образом. Кроме того, браузеры могут кэшировать цель перенаправления и делиться этим кэшем с другими страницами, которые могут указывать точную версию.

Важное примечание: мы бы хотели, чтобы клиенты получали обновления немедленно (внутренние).

Это не совсем возможно во всех случаях. В большинстве случаев использование правильных заголовков ответов для кэширования решит эту проблему. Хотя есть крайние случаи. Например, что вы будете делать, если пользователь загружает страницу, а затем отключается до загрузки JavaScript?

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