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