# 🐛 Vue Template Keeps Refreshing

[loilo]

🐛 Vue Template Keeps Refreshing

Description of the problem

Just opening the Vue default preset sends the browser into an infinite refresh loop in the preview.

I've used an incognito window, tried different browsers (Chrome, Firefox, Safari) but the behaviour is the same everywhere.

Console does not show anything, I've captured the screen including DevTools with the Network tab for some seconds, in case that's useful for anyone: https://cdn.rawgit.com/Loilo/repro-codesandbox-vue-infinite-refresh/5f78e8b8/codesandbox-vue-refresh.mp4.

Link to sandbox: Vue default preset

Your Environment

Software	Name/Version
Сodesandbox	PROD-1525812457-341660c
Browser	Latest versions of Chrome, FF, Safari
Operating System	macOS 10.13.2 (High Sierra)

[CompuIves]

Looking at this now!

[CompuIves]

It's fixed, I'll deploy something today to make sure it won't happen again!

[loilo]

Great, thanks!

[lbogdan]

@CompuIves Did you do anything about preventing this issue in the future? Can we close this?

[CompuIves]

Yup! Fixed this one by detecting errored caches and clearing them.

[dereks]

@CompuIves
@loilo
@lbogdan

This is not fixed for me. If I click on the "Preview in new tab" button (the box-arrow icon in the sandbox's preview viewport) then both the new preview tab, and the original sandbox preview viewport, continuously reload. @loilo, can you confirm this behavior? (I clicked the link in the bug report.)

Furthermore, I think the May 13 fix cited above may have introduced this as a new failure. Sometime in the past few weeks CodeSandbox.io Vue Template has become unusable, and preview only reloads forever.

See also bugs #995 (which I just filed) and #865. Those may be a duplicate of this bug -- maybe mark those as duplicates and re-open this original issue?

Thanks! I was loving CodeSandbox when it was working, and hope to use it again soon.

[loilo]

Nope, doesn't happen for me anymore, cannot reproduce.

[dereks]

@loilo

Thanks for checking! Could you please confirm that you also opened a full-size browser preview tab (or window), in addition to the developer IDE sandbox tab?

That is what now triggers the non-stop reloads for me. (This is different from your original bug report, which did not require opening a separate full-size preview tab.)

When I say "non-stop reloads", I mean it will briefly render the Vue Hello World page for 1 second, then show the "Transpiling Modules..." animation again for about 10 seconds, then repeat (forever). The same symptom happens inside the sandbox IDE preview viewport, but only when a 2nd window or tab is open.

Also, if possible, please tell us how much RAM your browser uses. I am seeing over 700 MB used by Chrome when I load any sandbox. Is that normal? I suspect that maybe my browser is just exceeding a timeout value when trying to reload in two windows, since I have an older laptop. (But this did not happen on my laptop a month ago!)

[loilo]

Oh, I'm sorry — apparently I didn't read your report properly.

• In full-size preview, I can indeed confirm the reload loop, your case seems to be completely valid.
• I can confirm that the reloading stops immediately when one of the Vue windows is closed.
• RAM usage does spike heavily for me. I'm seeing RAM usages oscillating around 450 to 500 MB for just the CodeSandbox tabs (according to Chrome's task manager).

[dereks]

In trying an Angular sandbox, it does not have the reload symtom mentioned above.

However:

1. It does have the high RAM usage, ~600 MB right from the beginning.
2. I made a trivial welcome text edit to the "App" file, and saw this:

My text edit was instantly rendered in the preview tab. But then, after seeing my edit nicely rendered for about one second, it went to the "Transpiling Modules..." animation and then ate 100% CPU for several seconds until it re-rendered.

It seemed like the "Transpiling Modules..." was unnecessary in my test. It also seems like unnecessary "Transpiling" may be causing the loop when trying it with Vue. Finally, note that unnecessary "Transpiling..." may have been introduced if there is a problem in "detecting errored caches and clearing them". Seem relevant.

[loilo]

Since the new issue is slightly different from the original one and maintainers often don't get to see comments in already closed issues, I'd suggest you open a new one for this problem.
That should bring a fresh amount of visibility and also re-opening this would not really be accurate IMO.

[CompuIves]

Heya! I think I fixed both issues with this commit: 3dc8935. The reason for the infinite refresh was because of an issue where we reset the cache on every run. Which results in a high memory usage and in the case of Vue in some weird behaviour because of the HMR module that relies on side effects and assumes caching.

Hopefully this isn't a problem anymore, I would be very happy if someone else could verify this as well. You might have to refresh twice to see the changes, because of the service worker.

[loilo]

Can confirm that the reloading issue is gone. RAM usage no longer fluctuaes but is still at almost 600 MB (other machine than my tests from yesterday).

However, that's not just the preview page but also the whole CodeSandbox IDE (Chrome's task manager automatically and inescapably groups both tabs, I assume they're connected somehow), so I guess the memory usage is not too strange.

[CompuIves]

That's great to hear! Yeah the memory can be a bit confusing, one way to test it is to open https://vue.codesandbox.io instead and look at that memory usage. Then you can sort of separate the amounts.

[loilo]

Yep, only 120 MB left for the isolated one. Not the least usage among my tabs, bot each GitHub tab on the other hand takes 60 MB as well, so it's not that far off. Also memory usually isn't a concern for me. 🙃

Thanks for taking another look at those problems!

[dereks]

@CompuIves I can confirm that the Vue Infinite Reload is fixed, thank you. However, the fix seems to have introduced a new bug. See Issue #996.

There is still a heavy 100% CPU hit whenever "Transpiling..." occurs (for about 5 seconds), but at least now it is usable. I recommend all devs have a CPU meter running during development.

[loilo]

Well, are 100% CPU necessarily a bad thing? I'm not familiar with the CodeSandbox internals but I guess the client gets some work to do. Also it should only be 100% load on one core.

[CompuIves]

Hmm yep that can be true. We do all transpiling and bundling in the browser, so during the transpilation phase the transpilers are probably using up a lot of CPU. This should happen on different threads though, if it happens on main thread it could be another thing of the bundling process.

[loilo]

For me it's definitely not on the main thread, since the transpiling animation runs completely smoothly. Seems Chrome is summing up CPU usage of all threads in an application.

[dereks]

Working on my slow laptop, I definitely feel the CPU load and battery usage of the Transpiling. (I also see it on my monitor graphs.)

The Transpiling process seems to be highly inefficient, for what is being accomplished. It doesn't seem like editing and then saving a single Javascript file should trigger several seconds of CPU churn. It stands in contrast with an edited C file re-compiled using "make". Make only compiles the one edited file and its dependents, not the whole project. Python also caches the previously built .pyc files, and will only re-interpret a the updated file(s).

Surely there is some low-hanging fruit to optimize the Transpiling process? Can we make the CPU churn be limited to only the edited files? (Both make and Python use the filesystem datestamp to decide whether or not a file needs a re-compile. Could we do something like that with the Transpiling step?)

[dereks]

Wow, something changed! I am now able to save .js and .vue files, and it does not trigger the "Transpiling..." animation anymore. It just immediatlely re-renders and shows my changes. It's awesome!

Consider my complaint about CPU voided.

[CompuIves]

Ah that's great to hear! I was already a bit confused because our bundler should only retranspile the changed file. It even goes as far that we cache evaluation so that we only evaluate the changed files and their inverse dependencies.