如何使用 vue-cli 和 vue.config.js 在灯塔上纠正“预加载密钥请求”性能问题

Question

我使用 Vue-CLI 来构建我的 vue.js 项目。

当我使用 lighthouse 时，我看到了很大的性能机会：带有以下警告的“预加载密钥请求”：

• 找到了“.../js/chunk-vendors.505a9ffc.js”的预加载，但浏览器未使用。 检查您是否正确使用了crossorigin属性。
• 找到了“.../js/app.a1661204.js”的预加载，但浏览器未使用。 检查您是否正确使用了crossorigin属性。
• 找到了“.../css/chunk-vendors.89b73702.css”的预加载，但浏览器未使用。 检查您是否正确使用了crossorigin属性。
• 找到了“.../css/app.9ea691b0.css”的预加载，但浏览器未使用。 检查您是否正确使用了crossorigin属性。

有没有人有解决方案可以使用 Vue-CLI 和 vue.config.js 来修改 webpack 配置？

你能解释一下这个问题吗？

Answer 1

您应该能够在 webpack 配置文件中配置crossOriginLoading 。

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

不确定你是否有单独的 webpack 配置文件，但如果你使用默认的vue.config.js文件，你可以使用configureWebpack选项：

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

Answer 2

我使用了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
    })
  ]
}