Vue quaser 生产构建“网页正在减慢您的浏览器”答案

【问题标题】：Vue quaser production build "A web page is slowing down your browser"Vue quaser 生产构建“网页正在减慢您的浏览器”
【发布时间】：2021-03-21 12:39:00
【问题描述】：

我正在使用 Vue 和 Quaser 构建一个 Web 应用程序。我的开发环境运行良好，一切正常加载。我像其他人一样为开发服务：

npm run serve

但是，在构建时，应用程序会占用大量资源并冻结浏览器。我在 Firefox 上收到消息“网页正在降低您的浏览器速度”，而基于 chrome 的浏览器只需要很长时间。

npm run build
serve -s dist

我使用serve -s dist 来测试 netlify 没有在本地加载。我似乎无法理解为什么会发生这种情况。我的 package.json 看起来如下：

{
  "name": "friendly-chainsaw-sass-kit",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "apexcharts": "^3.26.0",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0",
    "vue": "^2.6.11",
    "vue-apexcharts": "^1.6.0",
    "vue-css-donut-chart": "^1.3.0",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/composition-api": "^1.0.0-rc.5",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^1.19.1",
    "vue-cli-plugin-quasar": "~3.0.1",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/prettier"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {},
    "overrides": [
      {
        "files": [
          "**/__tests__/*.{j,t}s?(x)",
          "**/tests/unit/**/*.spec.{j,t}s?(x)"
        ],
        "env": {
          "jest": true
        }
      }
    ]
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ],
  "jest": {
    "preset": "@vue/cli-plugin-unit-jest"
  }
}

是不是我做错了什么？

【问题讨论】：

它没有构建或者是否有占用大量空间的资源？您是否尝试过制作网络档案？检查某处是否存在内存泄漏
@larizzatg，它构建。它只是没有像预期的那样渲染，它需要的速度。就内存泄漏而言，我无法从正在服务的应用程序中获取消耗大量内存的部分。鉴于它是一个没有远程调用的 SPA（所有内容都是从 JSON 数据对象中获取的），这样的机会不应该更少吗？
视情况而定，有时您可能会遇到竞争条件或奇怪的无限循环，具体取决于您的代码结构，您可以附加页面的配置文件吗？ developers.google.com/web/tools/chrome-devtools/memory-problems vuedose.tips/measure-runtime-performance-in-vue-js-apps
你说得对@larizzatg，我在我的一个组件中看到了无限循环。检查一下我正在更新的答案？

标签： vue.js vue-cli quasar-framework quasar

【解决方案1】：

正如@larizzatg 所暗示的那样，此类消息的错误来自竞争条件，只是没有明确简洁的错误消息或我可以从弹出窗口中获得的方向。在我的一个组件中，我有一个 for 循环，我在其中进行切片。

<div v-for="task in allTasks.splice(0,3)" :key="task.name">

上面会循环遍历任务数组，但不是全部，确切地说是 3 个项目。它在开发中运行良好。但是，为了避免错误。

<div v-for="task in topTasks" :key="task.name">

其中topTasks 来自computed 属性。这应该只是在开发阶段失败了，而不是希望它可以工作。我已经对基于 Angular 的应用程序做了同样的实现。我没想到这会是 Vue 的问题。让您通过之前的代码实现感到好奇。

【讨论】：