Как я могу использовать AttributeRewriter для кэширования встроенных фоновых изображений CSS с использованием Cloudflare workers?

#shopify #cloudflare #cloudflare-workers

#Shopify #cloudflare #cloudflare-workers

Вопрос:

Я использую worker в Cloudflare для перезаписи атрибутов для кэширования

 const OLD_URL = 'cdn.MYDOMAIN.com';
const NEW_URL = 'cdn-uk.MYDOMAIN.com';
class AttributeRewriter {
  constructor(attributeName) {
    this.attributeName = attributeName
  }

  element(element) {
    const attribute = element.getAttribute(this.attributeName)
    if (attribute) {
      element.setAttribute(
        this.attributeName,
        attribute.replace(OLD_URL,NEW_URL),
      )
    }
  }
}

const rewriter = new HTMLRewriter()
.on('a', new AttributeRewriter('href'))
.on('img', new AttributeRewriter('src'));

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

/**
 * Respond to the request
 * @param {Request} request
 */
async function handleRequest(request) {
  let response = await fetch(request); 
  return rewriter.transform(response)
}
  

Проблема в том, что я все еще вижу много файлов «Не cloudflare», использующих расширение Dr.Flare Chrome. Проверка этого показывает мне, что изображения внедряются во встроенный стиль в Shopify. Как я могу использовать rewriter, чтобы убедиться, что я получаю все изображения?

Комментарии:

1. Похоже, вам также нужно переписать таблицу стилей CSS. К сожалению, нет API CSS rewriter, поэтому вам, вероятно, придется использовать замену строки во всем файле CSS сразу.

2. @KentonVarda Грустное лицо спасибо за ваш ответ. Я посмотрю, что я могу сделать с точки зрения замены строк.