如何使用 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
    })
  ]
}