Когда мы создадим наше приложение 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 },
Я надеюсь, что это поможет, и мы будем тепло приветствовать все отзывы!