Vue.js 预取 CSS 文件

Posted 2023-02-22

【中文标题】Vue.js 预取 CSS 文件

【英文标题】：Vue.js prefetch CSS files

【发布时间】：2019-06-09 07:53:07

【问题描述】：

我有一个 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？

【参考方案1】：

你可以使用这个插件来预取 css 文件： https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin

或

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

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

【讨论】：

没有另一个依赖就没有办法做到这一点吗？是否有我缺少 atm 的 Vue 特定工具可用？

随着 webpack 构建你的静态，我不认为 Vue 有什么要说的。

但您可能想阅读以下内容：cli.vuejs.org/guide/html-and-static-assets.html