如何使用 vue-cli 和 vue.config.js 纠正灯塔上的 "preload key requests" 性能问题

Question

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

当我使用 lighthouse 时，我看到了巨大的性能机会：“Preload Key requests”和这些警告：

• 已找到“.../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
    })
  ]
}