Nuxt js在开发环境中CPU使用率高

Question

自从几次更新后，我在docker容器中的应用前台部分不能很好地工作，它使用超过100%的Docker CPU，6070%的笔记本电脑CPU（风扇运行在100%）和HMR是非常缓慢的。

这个问题不会出现在生产和其他笔记本电脑上。

我尝试了很多东西，从不同的论坛类似的问题，但没有任何工作。

我将Docker重新设置为出厂默认值，允许更多的内存和CPUI更新我的依赖关系我删除并恢复了我的节点模块。

我不知道我应该检查什么来解决这个问题。

MacOS Catalina 10.15.4

Node v13.12.0

我的包.json

{
  "name": "front",
  "version": "1.0.1",
  "description": "My first-class Nuxt.js project",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "HOST=0.0.0.0 PORT=8080 nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue .",
    "precommit": "npm run lint"
  },
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "8080"
    }
  },
  "dependencies": {
    "@fullcalendar/core": "^4.3.1",
    "@fullcalendar/daygrid": "^4.3.0",
    "@fullcalendar/interaction": "^4.3.0",
    "@fullcalendar/timegrid": "^4.3.0",
    "@fullcalendar/vue": "^4.3.1",
    "@nuxt/webpack": "^2.11.0",
    "@nuxtjs/auth": "^4.5.3",
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/google-analytics": "^2.2.0",
    "@nuxtjs/google-tag-manager": "^2.1.4",
    "@nuxtjs/gtm": "^2.2.3",
    "@nuxtjs/pwa": "^2.6.0",
    "@nuxtjs/robots": "^2.0.0",
    "@nuxtjs/router": "^1.3.2",
    "@nuxtjs/sitemap": "^0.2.2",
    "algoliasearch": "^4.1.0",
    "cross-env": "^5.2.0",
    "cxlt-vue2-toastr": "^1.1.0",
    "date-fns": "^1.30.1",
    "debug": "^4.1.1",
    "gsap": "^2.1.3",
    "jquery": "^3.4.1",
    "libphonenumber-js": "^1.7.14",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "nuxt": "^2.11.0",
    "nuxt-facebook-pixel-module": "^1.3.0",
    "nuxt-google-maps-module": "^1.6.0",
    "nuxt-jsonld": "^1.4.5",
    "nuxt-token-auth": "^1.0.2",
    "nuxt-user-agent": "^1.2.2",
    "sass-loader": "^7.1.0",
    "vee-validate": "^2.2.0",
    "vue": "^2.6.11",
    "vue-gallery": "^2.0.0",
    "vue-i18n": "^8.10.0",
    "vue-infinite-scroll": "^2.0.2",
    "vue-instantsearch": "^2.7.0",
    "vue-js-modal": "^1.3.33",
    "vue-lazyload": "^1.2.6",
    "vue-mq": "^1.0.1",
    "vue-multiselect": "^2.1.6",
    "vue-read-more": "^1.1.1",
    "vue-scrollto": "^2.15.0",
    "vue-sticky": "^3.3.4",
    "vue-tawk": "^1.0.1",
    "vue-upload-component": "^2.8.20",
    "vue-wait": "^1.3.3",
    "vue2-dropzone": "^3.5.8",
    "vue2-leaflet": "^1.2.3",
    "vuedraggable": "^2.20.0",
    "vuejs-datepicker": "^1.5.4",
    "vuejs-paginate": "^2.1.0",
    "vueperslides": "^2.7.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^5.16.0",
    "eslint-config-standard": "^12.0.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-node": "^8.0.1",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^4.7.1",
    "nodemon": "^1.18.10"
  }
}

Answer 1

可能是webpack的watch模式的问题.如上所述。此处:

对于某些系统来说，观察许多文件系统会导致大量的CPU或内存消耗。可以排除像node_modules这样的大文件夹。

module.exports = {
  //...
  watchOptions: {
    ignored: /node_modules/
  }
};

在你的例子中（nuxt.js），只需在nuxt.config.js中添加以下内容即可

 watchers: {
    webpack: {
      ignored: /node_modules/
    }
  }