Vue.js 预取 CSS 文件

Posted

技术标签:

【中文标题】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

以上是关于Vue.js 预取 CSS 文件的主要内容,如果未能解决你的问题,请参考以下文章

Vue JS 构建不导入 CSS 文件

vue.js 过渡 css 类不能放入​​单个文件组件中

Laravel 和 Vue.js 看不到 css 和 js 文件

是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件?

vue+js动态切换element-ui生成的主题css文件

在vue.js里引入bootstrap.css文件报错怎么办