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

热南支气管

我使用 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 配置?

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

迪彭沙

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

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

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

指定vue-cli vue.config.js位置

Vue CLI | vue.config.js,如何将资产放置在root dist中?

Vue js CLI 2 导入和使用javascript插件

Vue.js:在vue.config.js中定义计算的环境变量(Vue CLI 3)

Vue CLI 3 vue.config.js与webpack.config.js的插件

在vue-cli 3.0中如何生成完整的webpack.config.js

如何使用 Vue js 和 Laravel 基于 id 加载数据?

在Vue-CLI中使用PleaseWait.js加载屏幕

具有Sentry的Vue CLI 3-如何使用Vue的config.errorHandler?

如何集成 vue.config.js

vue / cli中/vue.config.js的有效格式

Vue CLI 3 vue.config.js 编译“未知词”错误

当@vue/cli-service - vue.config.js 需要时,defineConfig 未定义

如何使用Jest和vue-cli更新快照

如何在Vue CLI中使用静态JS?

如何使用webpack性能对象将js文件分成vue cli 3中的块?

使用 Vue.js 和 Vue CLI 3 处理一些处理后通过道具渲染项目

使用Vue CLI项目设置时,如何在Vue.js中使用$ emit?

Vue.js 和 Vue.min.JS 是如何编译的?

如何使用 vue-cli 和 vue 3 在 antdesign 中应用组件?

vue.js Webpack问题:无法使用configureWebpack将插件添加到vue.config.js

如何在vue-cli Webpack项目(vue.js)中使用Greensock插件

如何在 Vue 中加载 CSS 和 js 资源

导入Vue.js库和通过Vue-CLI安装它有什么区别?

使用vue.js和Airtable的多个axios请求

无法使用Webpack和Vue.js加载字体

无法使用 PreloadJS 和 Vue.js 多次加载资产

使用Laravel和Vue.js的CRUD问题

为什么对Babel和ESLint使用Vue CLI?