Memory Leak with Vuex store #86
Description
Hello guys, I have a problem with ssr
I receive data in vuex on the server in advance from the api and give the ready html to the user. To store data I use vuex and get data in serverPrefetch. Everything works fine, as time passes on production, errors of such a plan appear
<--- Last few GCs --->
[24:0x561eb1912cc0] 19808637 ms: Scavenge 486.7 (490.7) -> 486.7 (490.9) MB, 93.5 / 0.0 ms (average mu = 0.313, current mu = 0.230) allocation failure
[24:0x561eb1912cc0] 19809941 ms: Mark-sweep 487.2 (491.5) -> 484.5 (490.3) MB, 1302.7 / 0.0 ms (+ 46.1 ms in 10 steps since start of marking, biggest step 21.6 ms, walltime since start of marking 1599 ms) (average mu = 0.330, current mu = 0.348) allocati
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 0x561eafc37b39]
Security context: 0x19a07d6c08d1 <JSObject>
1: add [0x19a07d6d4509](this=0x12e575cf05c1 <Set map = 0x2f02599c2509>,0x259a14a09bf1 <JSFunction reactiveEffect (sfi = 0x3767de807db1)>)
2: /* anonymous */(aka /* anonymous */) [0x12e575cf0619] [/usr/src/app/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js:~113] [pc=0x6023cc12637](this=0x236589ac04b1 <undefined>,0x259a14a09bf1 <JSFunction re...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] server:prod: `cross-env --max_old_space_size=8192 NODE_ENV=production node ./server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] server:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2021-06-04T02_17_19_362Z-debug.log
Please help me figure it out, it seems that Vieks caches and when you receive other data, the previous ones are saved and, accordingly, the memory is full
serverPrefetch() {
this.setHi()
}
import { renderToString } from '@vue/server-renderer'
import { html } from 'vite-plugin-ssr'
import { createApp } from '../src/main'
import meta from './meta'
export { render }
export { addContextProps }
export { setPageProps }
async function render({ contextProps }) {
const { appHtml, INITIAL_STATE } = contextProps
let metaTag = null
metaTag = meta(contextProps)
return html`<!DOCTYPE html>
<html lang="ru">
<head>
<title>${metaTag ? metaTag.title : ''}</title>
<link href="/loading.min.css" rel="stylesheet">
<link rel="icon" type="image/ico" href="/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=5.0">
<link rel="canonical" href="${metaTag.canonical}" />
<meta name="description" content="${metaTag ? metaTag.description : ''}" />
<meta name="keywords" content="${metaTag ? metaTag.keywords : ''}">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>*{font-family: 'Nunito', 'Arial', sans-serif;}</style>
</head>
<body>
<div id="app">${html.dangerouslySetHtml(appHtml)}</div>
</body>
</html>`
}
async function addContextProps({ Page, contextProps }) {
const { app, store, router } = createApp({ Page })
router.push(contextProps.url)
await router.isReady()
app.provide('contextProps', contextProps)
const appHtml = await renderToString(app)
const INITIAL_STATE = store.state
return {
INITIAL_STATE,
appHtml
}
}
function setPageProps({ contextProps }) {
const { INITIAL_STATE } = contextProps
return { INITIAL_STATE }
}