Vue.js предварительно загружать CSS-файлы

Question

У меня есть проект Vue CLI 3 с отложенной загрузкой компонентов. При запуске npm run build и обслуживании папки dist я вижу, что файл CSS сначала предварительно выбирается, а затем загружается:

<link href="/css/article.70090a14.css" rel="prefetch"> а также <link rel="stylesheet" type="text/css" href="/css/article.70090a14.css">

Это поведение по умолчанию конфигурации Webpack при выполнении npm run build. В настоящее время Lighthouse (инструмент аудита Google) жалуется и советует мне следующее:

"Запросы ключей предварительной загрузки: /css/article.70090a14.css"

У меня вопрос: как я могу добавить / изменить это поведение, чтобы сделать preload вместо prefetch?

Answer 1

Вы можете использовать этот плагин для предварительной загрузки CSS-файлов: https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin

или

вы можете использовать style-loader для интеграции css в файл js, а затем предварительно выбрать файл js, используя webpackPrefetch магический комментарий:

import(/* webpackPrefetch: true */ "...")