Vue.js prefetch CSS files

Question

I have a Vue CLI 3 project, with lazy loading for the components. When running npm run build and serving the dist folder, I see that a CSS file is first prefetched and then loaded:

and

This is the default behaviour of the Webpack config when executing npm run build. At the moment Lighthouse (Google's audit tool) is complaining and advises me the following:

"Preload key requests: /css/article.70090a14.css"

My question is, how can I add to / change this behaviour to do a preload instead of a prefetch?

user_10880993 · Answer

You can use this plugin to prefetch css files: https://github.com/MarvelSQ/html-prefetch-css-webpack-plugin

or

you can use style-loader to integrate css into js file and then prefetch js file using webpackPrefetch magic comment:

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

Vue.js prefetch CSS files

1 Answers