Когда мы создадим наше приложение Ember, рано или поздно нам придется развернуть его в производственной среде. Одна из проблем, которые могут возникнуть, будет связана с активами.

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

У Ember-cli, благодаря broccoli-asset-rev, есть хорошее решение - просто включите дактилоскопию в конфиге:

Как вы, наверное, заметили, мы добавили generateAssetMap: true, который дает команду broccoli-asset-rev создать assetMap.json в каталоге assets /.

Этот файл будет иметь исходное имя файла актива и его отпечатанный эквивалент, например:

Все красиво - в чем проблема?

Проблема возникнет в ближайшее время, так как мы будем динамически генерировать имя актива. Брокколи соответствует тому, что есть в assetMap слева, и заменяет его тем, что находится справа. Если, например, мы сгенерировали изображение как вычисляемое свойство:

Теперь у нас нет возможности сопоставить его как статическое имя, поскольку у `skin` может быть любое значение, что делать? У нас есть несколько вариантов:

Решение №1 (самое простое)

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

Как можно проще - сделайте путь к своему активу статичным.

Если вы думаете, что это решение может вам не подойти, продолжим.

Решение # 2 (не серебряная пуля)

Если у вас много активов, например, у вас есть флаги стран, и вам нужно динамически сопоставить их. Во-первых, если вам не лень - попробуйте реализовать Решение №1. Если нет, давайте вернемся к файлу assetMap.json, который мы видели ранее.

Зная, что assetMap.json преобразует все статические файлы в эквивалент отпечатков пальцев, мы можем попытаться загрузить его до запуска приложения и создать специальный сервис для его разрешения. Для этого мы должны создать инициализаторы / asset-map.js и services / asset-map.js.

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

Одно предостережение в отношении этого решения - assetMap.json будет кэширован в клиентском браузере. Если вы можете избежать хранения этого файла в CDN и / или можете настроить его так, чтобы избежать кеширования (например, отправлять заголовки без кеширования), то это решение может сработать для вас. Если нет, давайте посмотрим, что еще мы можем сделать

Решение # 3

Отпечаток assetMap.json и вставьте его в свое приложение.

Если мы объединим все предыдущие решения и снятие отпечатков пальцев assetMap.json, мы получим многообещающие результаты. Готовое решение оказалось в аддоне ember - RuslanZavacky / ember-cli-ifa.

Аддон обеспечивает автоматическое внедрение assetMap-HASH.json в ваше приложение. Также он предоставляет инициализатор, службу и помощник для получения ссылки в вашем приложении на активы с отпечатками пальцев.

Просто включите его в своем environment.js как

ifa: { enabled: true }

и настройте блок отпечатков пальцев в вашем ember-cli-build.js

fingerprint: {
  enabled: EmberApp.env() === 'production',
  prepend: '', // can be a link to your CDN
  generateAssetMap: true,
  fingerprintAssetMap: true
},

Я надеюсь, что это поможет, и мы будем тепло приветствовать все отзывы!