search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.76k stars 6.33k forks source link

New Vue App created using CLI3 is slowing down Chrome and Saari #3134

Closed Shreerang closed 5 years ago

Shreerang commented 5 years ago

Version

3.2.1

Reproduction link

https://github.com/Shreerang/Vue-Nuggets

Environment info

  System:
    OS: macOS Sierra 10.12.6
    CPU: (8) x64 Intel(R) Core(TM) i7-6920HQ CPU @ 2.90GHz
  Binaries:
    Node: 10.12.0 - ~/.nvm/versions/node/v10.12.0/bin/node
    Yarn: Not Found
    npm: 6.4.1 - ~/.nvm/versions/node/v10.12.0/bin/npm
  Browsers:
    Chrome: 71.0.3578.98
    Firefox: 64.0
    Safari: 12.0
  npmPackages:
    @vue/babel-preset-app:  3.2.0 
    @vue/cli-overlay:  3.2.0 
    @vue/cli-plugin-babel: ^3.2.0 => 3.2.0 
    @vue/cli-plugin-eslint: ^3.2.0 => 3.2.1 
    @vue/cli-plugin-unit-jest: ^3.2.0 => 3.2.0 
    @vue/cli-service: ^3.2.0 => 3.2.0 
    @vue/cli-shared-utils:  3.2.0 
    @vue/component-compiler-utils:  2.3.1 
    @vue/eslint-config-prettier: ^4.0.0 => 4.0.1 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/test-utils: ^1.0.0-beta.20 => 1.0.0-beta.27 
    @vue/web-component-wrapper:  1.2.0 
    babel-helper-vue-jsx-merge-props:  2.0.3 
    babel-plugin-transform-vue-jsx:  4.0.1 
    eslint-plugin-vue: ^5.0.0-0 => 5.0.0 
    jest-serializer-vue:  2.0.2 
    vue: ^2.5.17 => 2.5.21 
    vue-eslint-parser:  2.0.3 
    vue-hot-reload-api:  2.3.1 
    vue-jest:  3.0.2 
    vue-loader:  15.4.2 
    vue-router: ^3.0.1 => 3.0.2 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.17 => 2.5.21 
    vue-template-es2015-compiler:  1.6.0 
    vuex: ^3.0.1 => 3.0.1 
  npmGlobalPackages:
    @vue/cli: 3.2.1

Steps to reproduce

Scaffold a new app using Vue CLI with any combination and do npm serve. Open localhost:8080 in Chrome. Open another tab or go to other existing tabs in the browser. You will notice slowness!

This same issue is reproducible on previously scaffolded apps too! :(

What is expected?

The Browser should not slow down!

What is actually happening?

The Browser is slowing down! If you kill the execution in terminal, the browser is back to original state!

LinusBorg commented 5 years ago

Can't reproduce, and I'm on a machine with less than power yours.

Can you be more specific?

Shreerang commented 5 years ago

This is as specific as I can get.

  1. Scaffold a new Vue app from CLI or use an existing scaffolded app.
  2. do npm run serve
  3. Go to chrome open up localhost:8080
  4. Do Cmd+Shift+R to refresh the page. You will notice that the page takes more time to reload than a local site should take. You can see the lag.
  5. If you have other tabs in the browser, switching to those will also be sloooowww.
  6. Now kill the execution in the terminal with Cmd+C
  7. Get back to the browser, and everything is as fast as it should be or previously was!
haoqunjiang commented 5 years ago

Possible related: https://github.com/webpack/webpack-dev-server/issues/172

Shreerang commented 5 years ago

I have tried that!

  1. Nuked all node_modules (rm -rf node_modules)
  2. npm install
  3. npm install fsevents (I think, this made it worse 😢Not a 100% sure)
Shreerang commented 5 years ago

I have created a screen recording to show the issue, so that it give clarity to what am seeing. Here is the dropbox URL - https://www.dropbox.com/s/4g23dgzoxejef1p/Vue_Issue.mov?dl=0

Shreerang commented 5 years ago

Is websocket from sockjs.js causing the issue? 😕 Am still struggling to figure out the root cause!

LinusBorg commented 5 years ago

Unfortunately, I can't reproduce any of the things you seem to experience with a freshly created project or any existing project I have. Local reloads are instant, other tabs perform fine, CPU load is minimal.

Shreerang commented 5 years ago

Can you think of something that might be causing this issue then? I have been trying different things to resolve this for the last 2 days and nothing seems to work 😢

haoqunjiang commented 5 years ago
  1. Clean npm cache and rerun
  2. Though we have not received any similar issue, I guess it may be a file system issue since macOS has switched to APFS by default since High Sierra and you are still using Sierra. The OS version is the only uncommon thing that I can tell from your environment info.
LinusBorg commented 5 years ago

Also try deactivating all browser extensions

Shreerang commented 5 years ago

This is super annoying! 😠 I did nothing and everything just works as good as before!!!!

LinusBorg commented 5 years ago

Well, on the bright side you're fine again.

I'll close this as you seem to have been the only one experiencing it

jkzing commented 5 years ago

@Shreerang Could you try it in an incognito window? This is likely caused by some extensions (which I have experienced before).

Akryum commented 5 years ago

Sometimes MacOS does strange things with background processes that eats up all the resources of the computer. Disabling things like Calendar sync can help.

LinusBorg commented 5 years ago

This issue is

  1. about 3.2.1 while you are using 3.3.0
  2. never been reproduced
  3. closed

Please open an issue with a real project repository that we can reproduce this with.

Shreerang commented 5 years ago

@jkzing I had tried that, but does not help!

@Akryum I tried that as well. Made sure nothing was running except my terminal and Chrome. But still happens.

@LinusBorg - I have a few more observations about the issue. This slowness does not happen at my work place or when I am on my office network via VPN. The issue is reproducible when I am on my home network, friend's home network (both Xfinity), Starbucks Google network, T-Mobile hotspot from my phone or basically ay other network that I could connect too.

Would this give any insights into why this could happen? Btw, I still see the slowness again 😞

nimataplaw commented 5 years ago

I'm having the same issue. App runs slower progressively. Speeds on initial reload and slows down progressively.

andreytsariuk commented 4 years ago

@Shreerang I had the same problem and fixed it by changing a configuration file vue.config.js So, I've just changed the configurations of devServer to this:

  devServer: {
    host: 'localhost',
    port: '3000'
  }

And everything works as expected. I'm not sure that this is a problem exactly with MacOs, but I've checked the Node Versions and plugins of vue-cli in different combinations and the result is the same... Also, I checked the NodeJS processes list, memory and CPU usage...

mrcod3r-ir commented 3 years ago

This is as specific as I can get.

  1. Scaffold a new Vue app from CLI or use an existing scaffolded app.
  2. do npm run serve
  3. Go to chrome open up localhost:8080
  4. Do Cmd+Shift+R to refresh the page. You will notice that the page takes more time to reload than a local site should take. You can see the lag.
  5. If you have other tabs in the browser, switching to those will also be sloooowww.
  6. Now kill the execution in the terminal with Cmd+C
  7. Get back to the browser, and everything is as fast as it should be or previously was!

I have same Issue in SPA by Vue.js

can anyone help ?