Mac 环境 Vue 开发 CPU 占用率高 问题

Mac开发Vue应用时,发现CPU风扇转的老高。

htop查看一下:

问题找到了,就是这个dev-server.js,node起的进程。

然后就是 dtruss -p 1230(进程ID) 命名跟踪一下这个进程,发现一直在读取应用下的每个js文件。

ps aux | grep node | grep -v grep | awk '{print $2}' | xargs sudo dtruss -p

 

然后借用同事的ubuntu系统,问题并没有出现。这让我一度很沮丧。

然后联想到是不是热更新出的问题,然后就是跟踪webpack源码,当然也是一无所获。

 

后面不知咋地,使用如下命令 竟然修复了CPU占有率高的问题:

npm install

> fsevents@1.1.2 install /Users/phpdragon/SourceCode/phpdragon.com/front/node_modules/fsevents
> node install

[fsevents] Success: "/Users/phpdragon/SourceCode/phpdragon.com/front/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
added 115 packages in 5.919s

 

用git工具对比了一下,发现多增加了如下文件:

 

再重启应用

npm run dev

htop一下:

 

现在世界终于清静了!

 

 

同样的命令在window下执行:

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

报当前系统不支持,类库只支持MacOS。

 

总结:

原因就是webpack的热更新用到了fsevent 类库,所以当找不到的时候,程序不会报错,但会不停扫描项目下的所有js文件。导致CPU使用率很高。

具体原因还得深入到webpack的源码进行查看了。

 

有句话说的好,喜欢就买、不喜就分、多喝热水、重启试试!

所以你没事就 npm install 试试,说不定就好了!雾

 

PS:  

Webpack-源码 

Native Access to Mac OS-X FSEvents

FSevents on Wiki

Linux和Mac OS X 中监视文件变化  

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
离线环境下搭建Vue开发环境的步骤 1. 下载并安装Node.js:在离线环境中,需要事先准备好Node.js的安装包。首先,将安装包复制到离线环境中,并运行安装程序,按照指示完成Node.js的安装。 2. 安装npm:Node.js的安装包中已经集成了npm(Node Package Manager),因此在安装Node.js的过程中也会自动安装npm。 3. 下载Vue CLI脚手架:在离线环境中,需要提前下载Vue CLI的安装包。可以从Vue CLI的官方GitHub页面上下载对应的版本的安装包,并将其复制到离线环境中的合适目录下。 4. 安装Vue CLI:在离线环境中,可以使用本地已下载的Vue CLI安装包来安装Vue CLI。打开命令行工具,进入到Vue CLI安装包所在的目录,使用以下命令安装Vue CLI: ``` npm install -g @vue/cli-4.5.9.tgz ``` 安装完成后,可以通过以下命令验证Vue CLI是否安装成功: ``` vue --version ``` 5. 创建Vue项目:在离线环境中,可以使用Vue CLI创建一个新的Vue项目。在命令行工具中,进入到项目所在的目录,使用以下命令创建一个新的Vue项目: ``` vue create my-app ``` 其中,`my-app`为项目的名称,可以根据实际需要自行设置。 6. 运行项目:创建完成后,进入到项目的目录中,使用以下命令运行项目: ``` cd my-app npm run serve ``` 运行成功后,可以通过浏览器访问`http://localhost:8080`查看项目运行效果。 通过以上步骤,在离线环境中就可以成功搭建Vue开发环境,并创建和运行一个Vue项目

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值