[英]How to correct "preload key requests" performance problem on lighthouse with vue-cli and vue.config.js
I use Vue-CLI to build my vue.js project.我使用 Vue-CLI 来构建我的 vue.js 项目。
When I use lighthouse, I see big opportunities of performance: "Preload Key requests" with these warnings:当我使用 lighthouse 时,我看到了很大的性能机会:带有以下警告的“预加载密钥请求”:
crossorigin
attribute properly.crossorigin
属性。crossorigin
attribute properly.crossorigin
属性。crossorigin
attribute properly.crossorigin
属性。crossorigin
attribute properly.crossorigin
属性。 Does anyone have a solution to fix it with Vue-CLI and vue.config.js to modify the webpack config?有没有人有解决方案可以使用 Vue-CLI 和 vue.config.js 来修改 webpack 配置?
And can you explain the problem?你能解释一下这个问题吗?
You should be able to configure crossOriginLoading in webpack config file.您应该能够在 webpack 配置文件中配置crossOriginLoading 。
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:不确定你是否有单独的 webpack 配置文件,但如果你使用默认的vue.config.js文件,你可以使用
configureWebpack
选项:
module.exports = {
configureWebpack: {
output: {
crossOriginLoading: 'anonymous'
},
...
}
}
I've used preload-webpack-plugin ( https://www.npmjs.com/package/preload-webpack-plugin )我使用了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
})
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.