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">

这是执行npm run build时Webpack配置的默认行为。目前，Lighthouse（Google的审核工具）在抱怨，并向我提出以下建议：

“预载密钥请求：/css/article.70090a14.css”

我的问题是，如何添加/更改此行为以执行preload而不是prefetch？

Answer 1

您可以使用此插件预取CSS文件： https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin

或

您可以使用style-loader将CSS集成到js文件中，然后使用webpackPrefetch魔术注释预取js文件：

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