javascript heap explodes with vuetify 2 based custom theme

[jaunt]

• I confirm that this is an issue rather than a question.

Bug report

After the client and server are compiled successfully, during the "Rendering static HTML" phase, the rendering of pages gets slower and slower until a crash:

Steps to reproduce

Check out the repo below. Yarn install. vuepress build docs.

https://github.com/jaunt/vuepress-vuetify2

What is expected?

The speed of each page rendering should be constant (they are duplicated md files). Memory should not run out.

What is actually happening?

Rendering gets slower and slower until javascript runs out of heap memory:

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Other relevant information

• Output of npx vuepress info in my VuePress project:

Environment Info:

System:
OS: macOS High Sierra 10.13.6
CPU: (8) x64 Intel(R) Core(TM) i7 CPU 860 @ 2.80GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 69.0
Safari: 13.0
npmPackages:
@vuepress/core: 1.1.0
@vuepress/theme-default: 1.1.0
vuepress: ^1.1.0 => 1.1.0
npmGlobalPackages:
vuepress: Not Found

[ulivz]

Sorry but we would not help you solve the problem which is relative to the out-of-memory.

What we can do is to build a strategy of detecting build performance to help you to know the memory footprint for each stage.

[jaunt]

Hi, thank you for looking into it! Out of curiosity, do you suspect there is a bug in how I am using vuepress in the minimal example I posted above, or do you think there is a bug in Vuetify 2.0?

[richardcov]

Hi @jaunt, when using Vuetify 1.5, I found that trying to pre-render components would cause the error that you describe. E.g. if you have a top toolbar or footer on each page, try wrapping them in <ClientOnly> and see if that helps.

[meteorlxy]

Potential memory leak?

nuxt/nuxt#3465

[jaunt]

Thanks for the tips @richardcov & @meteorlxy

[meteorlxy]

Maybe related to #1560

[sunziping2016]

Hi @jaunt, when using Vuetify 1.5, I found that trying to pre-render components would cause the error that you describe. E.g. if you have a top toolbar or footer on each page, try wrapping them in <ClientOnly> and see if that helps.

I have encountered the same problem when using vuepress with vuetify theme. And adding <ClientOnly> to the header and drawer components successfully solve this problem. Thanks a lot.

[th0r]

You can try --max-concurrency option - it helped me reduce memory usage during a build from ~8G to ~3.5G.