Как предварительно загрузить контент с помощью rel = "preload" и хэшированных имен файлов Angular?

Question

В настоящее время инструмент для повышения производительности мобильных устройств показывает очень плохую оценку для моего веб-сайта, поскольку некоторые файлы шрифтов загружаются очень поздно после того, как сайт почти полностью инициализирован. Этот инструмент рекомендует мне использовать ссылку rel="preload" для предварительной загрузки этих файлов шрифтов. Проблема заключается в том, что в производственной среде имена файлов Angular содержат хэш содержимого, поэтому my-font.woff становится my-font.<some-hash>.woff.

Есть ли способ обойти это и предварительно загрузить my-font.<some-hash>.woff, не отключая хеширование файлов, поскольку файлхеширование дает некоторые преимущества при обнаружении устаревших файлов кэша.

Answer 1

В соответствии с вашим требованием, вы должны выбрать preload-webpack-plugin .

Следуйте документации, чтобы узнать больше о его работе.

В вашем сценарии,он может использоваться следующим образом -

plugins: [
  new HtmlWebpackPlugin(),
  new PreloadWebpackPlugin({
    rel: 'preload',
    as(entry) {         
      if (/\.woff$/.test(entry)) return 'font';         
    }
  })
]

Вы должны будете добавить этот плагин и этот код в приложения и конфиги Webpack соответственно. Надеюсь, это поможет !!