Answer the question
In order to leave comments, you need to log in
Nuxt js(SSR) - javascript heap out of memory? how to check where the load on the server comes from?
Hello!
Not long ago I launched my (SSR) project and faced such problems as lack of memory.
I googled and I see many had this ... but still I have not found a solution yet.
So the site is running on Nuxt Js in SSR mode. and Backend (API) in Yii2 and database in MySQL
Nuxt js - v2.10.2
Node Js - v12.13.1
NPM - v6.12.1
@nuxtjs/axios - v5.8.0(Axios - v0.19.0)
@nuxtjs/proxy - v1.3.3
Ubuntu 18.04 - Nginx, php7.2-fpm MySQL
// nuxt.config.js
const path = require('path')
const webpack = require("webpack")
module.exports = {
mode: 'universal',
version: 1.09,
head: {
title: 'My title',
},
css: [
'vuetify/dist/vuetify.min.css',
'noty/lib/noty.css',
'noty/lib/themes/metroui.css',
'vue-croppa/dist/vue-croppa.css',
'@/assets/css/app.styl'
],
server: {
port: 4444
},
router: {
linkActiveClass: 'active',
linkExactActiveClass: 'exact-active'
},
render:{
resourceHints: false
},
buildModules: [
'@nuxtjs/eslint-module',
['@nuxtjs/router', {
path: './router'
}],
['@nuxtjs/google-analytics', {
id: 'UA-154127242-1'
}]
],
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy',
'cookie-universal-nuxt',
'@nuxtjs/pwa',
'nuxt-ssr-cache'
],
axios: {
baseURL: 'http://SERVER_IP_ADDRESS_FOR_API/webapi',
browserBaseURL: '/api',
proxy: true,
proxyHeaders: false
},
proxy: {
'/api': {
target: 'http://SERVER_IP_ADDRESS_FOR_API/webapi',
secure: false,
pathRewrite: { '^/api': '' }
},
'/uploads': {
target: 'http://SERVER_IP_ADDRESS_FOR_API',
secure: false
},
'/applive': {
target: 'https://SERVER_IP_ADDRESS_FOR_MOBILE_API/api-live',
secure: false,
pathRewrite: { '^/applive': '' }
}
},
cache: {
useHostPrefix: false,
pages: [
'/'
],
store: {
type: 'memory',
max: 100,
ttl: 3600
}
},
plugins: [
{ src: '~/plugins/vue-i18n'},
{ src: '~/plugins/mixins'},
{ src: '~/plugins/mixins-client', ssr: false },
{ src: '~/plugins/vuetify'},
{ src: '~/plugins/components'},
{ src: '~/plugins/components-client', ssr: false },
{ src: '~/plugins/axios'}
],
loading: {
color: '#5ec900',
failedColor: '#ff0000',
height: '3px'
},
build: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery"
})
],
extend (config, { isDev, isClient }) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
config.module.rules.push({
test: /\.i18n$/,
loader: `@kazupon/vue-i18n-loader?${JSON.stringify({
includePaths: [path.resolve(__dirname), 'node_modules']
})}`
});
}
}
}
// package.json
{
"name": "My title",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "dilikpulatov <[email protected]>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"live": "pm2 start npm --name 'prod-app' -- run start",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"@nuxtjs/axios": "^5.4.1",
"@nuxtjs/proxy": "^1.3.3",
"@nuxtjs/pwa": "^3.0.0-0",
"cookie-universal-nuxt": "^2.0.14",
"nuxt": "^2.10.1",
"nuxt-ssr-cache": "^1.5.0",
"vue-i18n": "^8.9.0"
},
"devDependencies": {
"@nuxtjs/eslint-config": "^1.0.1",
"@nuxtjs/eslint-module": "^1.0.0",
"@nuxtjs/google-analytics": "^2.2.2",
"@nuxtjs/router": "^1.5.0",
"babel-eslint": "^10.0.1",
"eslint": "^6.1.0",
"eslint-plugin-nuxt": ">=0.4.2",
"jquery": "^3.3.1",
"noty": "^3.2.0-beta",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-content-loader": "^0.2.1",
"vue-croppa": "^1.3.8",
"vue-owl-carousel": "^2.0.3",
"vuetify": "^1.5.6"
}
}
Answer the question
In order to leave comments, you need to log in
вообщем проблему решил вот так
суть исправление: Возвращаю все файлы js css jpeg и т.д через nginx, а не node js(смотрите ниже есть ссылка nginx config)
обновил Nuxt до версия 2,14
// nuxt.config.js
ssr: true,
target: 'server'
nuxt generate
Аналогичный стек и у меня, но подобные проблемы возникают лишь при выкатке фронта. Создание билда сжирает огромное кол-во ресурсов, просто тупо потому что js собирает js. Мы просто увеличили мощности, иного выхода так и не нашли. До этого решение было простым, делать билд пока не собирётся, иногда с 5го раза собирался
У меня однажды на проекте была такая проблема, регулярно падал сайт. Затем нашел где-то в хуке created setTimeout() или setInterval(). В created нельзя вызывать их, потому что этот хук вызывается и на клиенте и на сервере, а таймеры запускаются с каждым новым запросом и накапливаются на сервере, вскоре он падает от перегрузки.
А вообще еще слишком много зависимостей, билду очень тяжело.
P.S. jquery зачем?
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question