vuepress
vuepress copied to clipboard
vuejs
javascript heap explodes with vuetify 2 based custom theme
- [x] 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 infoin 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
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.
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?
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.
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.
You can try --max-concurrency option - it helped me reduce memory usage during a build from ~8G to ~3.5G.
