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

     2023-03-08     181

关键词:

【中文标题】Nuxt js开发环境中CPU使用率高【英文标题】:Nuxt js high CPU usage in dev environment 【发布时间】:2020-09-06 16:13:14 【问题描述】:

由于更新很少,我在 docker 容器中的应用程序前端部分无法正常工作 它使用了 100% 以上的 Docker CPU,我的笔记本电脑 CPU 的 60/70%(风扇以 100% 运行) 而且 HMR 很慢

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

我在不同论坛尝试了很多类似问题的东西,但没有任何效果

我将 Docker 重置为出厂默认设置,允许更多内存和 CPU 我更新了我的依赖项 我删除并恢复了我的节点模块

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

MacOS Catalina 10.15.4

Node v13.12.0

我的 package.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"
  

【问题讨论】:

在 Mac 的 Docker Desktop 上有带有主机目录绑定挂载的 known performance issues。对于基于浏览器的应用程序,安装原生 Node 可能比尝试使用 Docker 模拟原生开发环境效果更好。 【参考方案1】:

可能是 webpack 的 watch 模式有问题。 如here所述:

对于某些系统,查看多个文件系统可能会导致大量 CPU 或内存使用。可以排除像 node_modules 这样的巨大文件夹

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

在你的情况下(nuxt.js),只需添加到 nuxt.config.js

 watchers: 
    webpack: 
      ignored: /node_modules/
    
  

【讨论】:

谢谢,PC 风扇快把我逼疯了(声音很大)。 nuxt.js 选项拯救了我的一天

在 nuxt.config.js 中使用环境变量

】在nuxt.config.js中使用环境变量【英文标题】:UsingEnvironmentVariablesinnuxt.config.js【发布时间】:2020-05-1508:12:04【问题描述】:我正在使用Nuxt和Axios,但在从我的本地计算机构建应用程序时使用环境变量时遇到问题。我已安装@nuxtjs/... 查看详情

nuxt.config.js文件

...理。前提是你安装了对应的预处理器。配置Nuxt.js应用是开发模式还是生产模式。dev属性的值会被nuxt命令覆盖:在server.js中:然后可在package.json中添加脚本配置如下:注意:要运行上面的示例,你需要运行npminstall--save-devcross-env... 查看详情

开发经验java服务生产环境cpu使用过高解决思路

...器可能有多个java服务。通过top命令可查看是哪个服务cpu使用率较高。记住CPU使用率较高 查看详情

开发经验java服务生产环境cpu使用过高解决思路(代码片段)

...器可能有多个java服务。通过top命令可查看是哪个服务cpu使用率较高。记住CPU使用率较高 查看详情

如何在 Nuxt 中使用 webpack 开发代理

】如何在Nuxt中使用webpack开发代理【英文标题】:HowtousewebpackdevproxywithNuxt【发布时间】:2019-02-1306:36:45【问题描述】:使用Nuxt开发通用JS应用程序,我正在尝试配置webpack\'sdevproxy,以便仅在开发中,对/api的请求被代理到http://127.... 查看详情

nuxt.config.js 中的条件属性

...fig.js【发布时间】:2019-08-1615:13:30【问题描述】:我正在开发一个使用nuxt.js的网站,并且希望有条件地在nuxt.config.js中有一个配置选项:我想更改路由器我运行npmrungenerate时的基础(构建静态)这是开发环境的完整配置文件(npmr... 查看详情

如何在实际服务中运行 nuxt.js?

...】:我在中使用了vue-clivueinitnuxt/expressmyProject和,npm运行开发开发。但是,npm运行构建之后,创建了dist文件。如何在pm2中运行真实服务?(我将在AWSEC中使用ubuntu。)【问题讨论】:【参考方案1】:您只需要像这样启 查看详情

使用 Nuxt.js 进行开发和生产的不同 baseURL

】使用Nuxt.js进行开发和生产的不同baseURL【英文标题】:DifferentbaseURLfordevelopmentandproductionwithNuxt.js【发布时间】:2019-06-2805:10:14【问题描述】:如何为开发和生产添加不同的baseURL?这是目前我的nuxt.config.jsmodule.exports=mode:\'universal... 查看详情

如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading

...时间】:2017-10-2807:01:42【问题描述】:我在Nuxt.js(Vue.js)中开发网络应用程序首先,vueinitnuxt/expressMyProject~page/help.vue<template><div 查看详情

如何使用环境变量在 Nuxt 中动态导入 SCSS 样式表

】如何使用环境变量在Nuxt中动态导入SCSS样式表【英文标题】:HowtoDynamicallyImportSCSSStylesheetsinNuxtusinganEnvironmentVariable【发布时间】:2020-10-2201:58:13【问题描述】:我们在monorepo中运行Nuxt,一切运行良好。我们正在使用包含可重用... 查看详情

使用 nuxt-mail 在 Nuxt.js 中发送邮件

】使用nuxt-mail在Nuxt.js中发送邮件【英文标题】:SendingmailinNuxt.jswithnuxt-mail【发布时间】:2021-07-1011:05:47【问题描述】:我是Nuxt.js/Vue.js的新手,所以这里有一些新手问题:D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。... 查看详情

nuxt.js服务端渲染实践,从开发到部署

...很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队。解决的问题路由鉴权第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地。官方使用express-ses 查看详情

Nuxt .env 并将 js 导入商店

...有一个名为environment的变量,我用它来确定我是在本地、开发、阶段还是产品上。在我的config.js文件中,我使用它 查看详情

在 Nuxt 中使用 chess.js 模块

】在Nuxt中使用chess.js模块【英文标题】:Usingthechess.jsmoduleinNuxt【发布时间】:2021-11-1210:57:21【问题描述】:我正在尝试在Nuxt应用中使用chess.js模块,但安装说明似乎不适用于Nuxt。constChess=require(\'chess.js\')constchess=newChess()上面的... 查看详情

vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)

前言分享一下自己的ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下... 查看详情

vue和ssr+nuxt.js配置环境变量以及pm2进行服务部署(代码片段)

前言vue-ssr+nuxt.js开发的跨境电商的配置的项目环境变量。nuxt.js配置环境变量第一步:安装cross-env插件npminstallcross-env--save第二步:根目录下创建env.js文件第三步:env.js文件配置环境变量配置各个环境下的接口地址和... 查看详情

rk3399平台开发系列讲解(内核调试篇)9.35cpu利用率中softirq飙高情况分析

平台内核版本安卓版本RK3399Linux4.4Android7.1 查看详情

rk3399平台开发系列讲解(内核调试篇)9.35cpu利用率中softirq飙高情况分析

平台内核版本安卓版本RK3399Linux4.4Android7.1 查看详情