Версіонування ресурсів з Webpack Encore

Дата оновлення перекладу 2024-05-29

Версіонування ресурсів з Webpack Encore

Набридло розгортати та зберігати в кеші браузера стару версію ваших ресурсів? Викликавши enableVersioning(), кожне ім'я файлу тепер буде містити хеш, який змінюється щоразу, коли змінюється зміст цього файлу (наприклад, app.123abc.js замість app.js). Це дозволяє використовувати агресивні стратегії кешування (наприклад, далеке майбутнє Expires), оскільки щоразу, коли файл змінюється, змінюється і його хеш, ігноруючи будь-який існуючий кеш:

1
2
3
4
5
6
7
// webpack.config.js

  // ...
  Encore
      .setOutputPath('public/build/')
      // ...
+     .enableVersioning()

Щоб зв'язати ці ресурси, Encore створює два файли entrypoints.json і manifest.json.

Завантаження ресурсів з entrypoints.json та manifest.json

Щоразу, коли ви запускаєте Encore, у вашій папці виведення створюються два файли конфігурації (розташуваеея за замовчуванням: public/build/): entrypoints.json і manifest.json. Кожен файл схожий і містить мапу до остаточних, версіонованих імен файлів.

Перший файл - entrypoints.json - використовується функціями encore_entry_script_tags() і encore_entry_link_tags(), помічниками Twig. Якщо ви використовуєте їх, то ваші CSS і JavaScript файли будуть відображатися з новим, версіонованим ім'ям файлу. Якщо ви не використовуєте Symfony, вашому додатку потрібно буде прочитати цей файл аналогічним чином.

Файл manifest.json потрібен лише для того, щоб отримати версіоноване ім'я файлу інших файлів, таких як файли шрифтів або зображень (хоча він також містить інформацію про файли CSS та JavaScript):

1
2
3
4
5
{
    "build/app.js": "/build/app.123abc.js",
    "build/dashboard.css": "/build/dashboard.a4bf2d.css",
    "build/images/logo.png": "/build/images/logo.3eed42.png"
}

У вашому додатку вам потрібно прочитати цей файл, якщо ви хочете мати можливість посилатися (наприклад, через тег img) на певні ресурси. Якщо ви використовуєте Symfony, просто активуйте стратегію версіонування json_manifest_file:

1
2
3
4
5
# цей файл додається автоматично під час установки Encore з Symfony Flex
# config/packages/assets.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'

Це все! Не забудьте огорнути кожний шлях в функцію Twig asset(), як зазвичай:

1
<img src="{{ asset('build/images/logo.png') }}" alt="ACME logo">

Усунення несправностей

Версіонування ресурсів та розгортання

Під час розгортання нової версії вашого додатку, версіоновані ресурси міститимуть новий хеш, що робить попередні ресурси недоступними. Зазвичай це не є проблемою при розгортанні програм за допомогою стратегій rolling update, blue/green або або symlink.

Однак, навіть при застосуванні цих технік, може виникнути проміжок часу коли деякі публічні/приватні кешовані відповіді запитують попередню версію ресурсів. Якщо ваш додаток не може дозволити собі обслуговувати непрацюючі ресурси, найкращим рішенням є використання CDN (або спеціального користувацького сервісу), який зберігає всі старі ресурси в кеші на деякий час.

Дізнайтеся більше