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

[Shreerang]

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]

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

Can you be more specific?

[Shreerang]

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]

Possible related: webpack/webpack-dev-server#172

[Shreerang]

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]

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]

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

[LinusBorg]

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]

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]

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]

Also try deactivating all browser extensions

[Shreerang]

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

[LinusBorg]

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]

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