How to correct "preload key requests" performance problem on lighthouse with vue-cli and vue.config.js

Question

I use Vue-CLI to build my vue.js project.

When I use lighthouse, I see big opportunities of performance: "Preload Key requests" with these warnings:

• A preload was found for ".../js/chunk-vendors.505a9ffc.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
• A preload was found for ".../js/app.a1661204.js" but was not used by the browser. Check that you are using the crossorigin attribute properly.
• A preload was found for ".../css/chunk-vendors.89b73702.css" but was not used by the browser. Check that you are using the crossorigin attribute properly.
• A preload was found for ".../css/app.9ea691b0.css" but was not used by the browser. Check that you are using the crossorigin attribute properly.

Does anyone have a solution to fix it with Vue-CLI and vue.config.js to modify the webpack config?

And can you explain the problem?

Answer 1

You should be able to configure crossOriginLoading in webpack config file.

module.exports = {
  //...
  output: {
    crossOriginLoading: 'anonymous'
  }
};

Not sure if you have a separate webpack config file or not, but if you are using default vue.config.js file, you can use configureWebpack option for the same:

module.exports = {
  configureWebpack: {
    output: {
        crossOriginLoading: 'anonymous'
    },
    ...
  }
}

Answer 2

I've used preload-webpack-plugin ( https://www.npmjs.com/package/preload-webpack-plugin )

const PreloadWebpackPlugin = require('preload-webpack-plugin');

// adds <style> tag with preload
module.exports = {
  ...,
  plugins: [
    ...,
    new PreloadWebpackPlugin({
        rel: 'preload',
        as: 'style',
        include: ['main', 'profile', 'search'], // can be 'allChunks' or 'initial' or see more on npm page
        fileBlacklist: [/\.map|.js/], // here may be chunks that you don't want to have preloaded
    })
  ]
}