search

easy-team / easywebpack

A Simple, Powerful Webpack Front-End Development Solution
https://easyjs.cn/easywebpack
MIT License
480 stars 51 forks source link

运行一段时间后内存溢出的问题 #26

Closed songyazhao closed 5 years ago

songyazhao commented 6 years ago

前端vue的东西修改发生热更新，过一段时间之后报错如下。 看网上的方案是在dev的时候加上node --max_old_space_size=4096。 但是只能延缓出现这个错误的时间。 暂时的解决方法就是重启dev。 感觉很繁琐，有没有更好的办法解决一下。 看了vue-cli生成的项目不会出现这个问题，所以是否可以借鉴下它的内部是如何运作热更新释放内存中的资源。

<--- Last few GCs --->

[9680:00000227BACCE0F0] 65343019 ms: Mark-sweep 4062.1 (4159.1)
-> 4062.1 (4159.6) MB, 387.6 / 0.0 ms  allocation failure GC in
old space requested
[9680:00000227BACCE0F0] 65343350 ms: Mark-sweep 4062.1 (4159.6)
-> 4062.0 (4126.6) MB, 330.4 / 0.0 ms  last resort GC in old space requested
[9680:00000227BACCE0F0] 65343678 ms: Mark-sweep 4062.0 (4126.6)
-> 4062.0 (4125.1) MB, 328.1 / 0.0 ms  last resort GC in old space requested

<--- JS stacktrace --->

==== JS stack trace =========================================

Security context: 00000069B2A257C1 <JSObject>
    1: stringSlice(aka stringSlice) [buffer.js:560] [bytecode=000001C5AA852929 offset=94](this=0000000D73E022D1 <undefined>,buf=0000013E51013641 <Uint8Array map = 000001BB71136601>,encoding=00000069B2A34EB1 <String[4]: utf8>,start=0,end=500637)
    2: toString [buffer.js:633] [bytecode=000001C5AA852579 offset=145](this=0000013E51013641 <Uint8Array map = 000001BB71136601>,encoding=00000069B2A34...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript
heap out of memory
 1: node_module_register
 2: v8::internal::FatalProcessOutOfMemory
 3: v8::internal::FatalProcessOutOfMemory
 4: v8::internal::Factory::NewRawTwoByteString
 5: v8::internal::Factory::NewStringFromUtf8
 6: v8::String::NewFromUtf8
 7: v8_inspector::V8InspectorClient::currentTimeMS
 8: node::Buffer::New
 9: v8::internal::wasm::SignatureMap::Find
10: v8::internal::Builtins::CallableFor
11: v8::internal::Builtins::CallableFor
12: v8::internal::Builtins::CallableFor
13: 000003D3A46843C1

package.json

...
{
  "scripts": {
    ...
    "dev":  "npm run tsc:w && node --max_old_space_size=4096 index.js"
    ...
  }
  "dependencies": {
    "axios": "^0.18.0",
    "countup": "^1.8.2",
    "egg": "^2.7.1",
    "egg-cors": "^2.0.0",
    "egg-logger": "^1.6.2",
    "egg-scripts": "^2.6.0",
    "egg-validate": "^1.0.0",
    "egg-view-vue-ssr": "^3.0.8",
    "extend": "~3.0.1",
    "iview": "^2.13.1",
    "iview-area": "^1.5.17",
    "js-cookie": "^2.2.0",
    "jsbarcode": "^3.9.0",
    "lodash": "^4.17.5",
    "moment": "^2.22.1",
    "mysql": "^2.15.0",
    "reflect-metadata": "^0.1.12",
    "server-side-render-resource": "^1.0.3",
    "tinymce": "^4.7.11",
    "typeorm": "^0.2.1",
    "vue": "^2.5.16",
    "vue-hot-reload-api": "^2.3.0",
    "vue-router": "^3.0.1",
    "vue-server-renderer": "^2.5.16",
    "vue-virtual-scroller": "^0.11.7",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "autod-egg": "^1.1.0",
    "autoprefixer": "^8.3.0",
    "babel-core": "^6.26.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-jsx-v-model": "^2.0.3",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.6.1",
    "canvas": "^1.6.10",
    "cross-env": "^5.1.4",
    "cz-conventional-changelog": "^2.1.0",
    "directory-named-webpack-plugin": "^2.3.0",
    "easywebpack-cli": "^3.11.1",
    "easywebpack-vue": "^4.0.4",
    "egg-logview": "^2.0.0",
    "egg-webpack": "^4.1.1",
    "egg-webpack-vue": "^2.0.1",
    "eslint": "^4.19.1",
    "eslint-config-standard": "^11.0.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-import": "^2.11.0",
    "eslint-plugin-node": "^6.0.1",
    "eslint-plugin-promise": "^3.7.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^2.1.0",
    "imagemin-webpack-plugin": "^2.1.1",
    "ip": "^1.1.5",
    "postcss-loader": "^2.1.4",
    "progress-bar-webpack-plugin": "^1.11.0",
    "pug": "^2.0.3",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "ts-loader": "^4.2.0",
    "tslint": "^5.9.1",
    "tslint-loader": "^3.6.0",
    "typescript": "^2.8.3",
    "uglifyjs-webpack-plugin": "^1.2.5",
    "vconsole": "^3.2.0",
    "vue-template-compiler": "^2.5.16",
    "webpack-manifest-resource-plugin": "^4.2.3"
  }
  ...
}
squallyan commented 6 years ago

dev下，热重启多几次就会js heap out of memory，作者赶紧解决下吧，开发时得不停的手动杀进程重启

hubcarl commented 6 years ago

这个估计是 ts-loader 有关，你这个项目构建的文件很大？

luo772435545 commented 6 years ago

遇到同样的问题，项目属于多页面后台系统 这个是日志 0 info it worked if it ends with ok 1 verbose cli [ 'C:\Program Files\nodejs\node.exe', 1 verbose cli 'C:\Users\luogan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'dev' ] 2 info using npm@6.0.0 3 info using node@v8.11.1 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 5 info lifecycle demo@1.0.0~predev: demo@1.0.0 6 info lifecycle demo@1.0.0~dev: demo@1.0.0 7 verbose lifecycle demo@1.0.0~dev: unsafe-perm in lifecycle true 8 verbose lifecycle demo@1.0.0~dev: PATH: C:\Users\luogan\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;D:\aishangCode\Supplier\Store\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Program Files\TortoiseSVN\bin;D:\installAll\Git\cmd;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin\;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;C:\Users\luogan\AppData\Roaming\npm;C:\Users\luogan\AppData\Local\Yarn\bin;C:\Program Files\Java\jdk1.8.0_131\bin;C:\Program Files\Java\jdk1.8.0_131\jre\bin 9 verbose lifecycle demo@1.0.0~dev: CWD: D:\aishangCode\Supplier\Store 10 silly lifecycle demo@1.0.0~dev: Args: [ '/d /s /c', 10 silly lifecycle 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js' ] 11 silly lifecycle demo@1.0.0~dev: Returned: code: 3 signal: null 12 info lifecycle demo@1.0.0~dev: Failed to exec dev script 13 verbose stack Error: demo@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 13 verbose stack Exit status 3 13 verbose stack at EventEmitter. (C:\Users\luogan\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:283:16) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at EventEmitter.emit (events.js:214:7) 13 verbose stack at ChildProcess. (C:\Users\luogan\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14) 13 verbose stack at emitTwo (events.js:126:13) 13 verbose stack at ChildProcess.emit (events.js:214:7) 13 verbose stack at maybeClose (internal/child_process.js:925:16) 13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5) 14 verbose pkgid demo@1.0.0 15 verbose cwd D:\aishangCode\Supplier\Store 16 verbose Windows_NT 6.1.7601 17 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users\luogan\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "dev" 18 verbose node v8.11.1 19 verbose npm v6.0.0 20 error code ELIFECYCLE 21 error errno 3 22 error demo@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 22 error Exit status 3 23 error Failed at the demo@1.0.0 dev script. 23 error This is probably not a problem with npm. There is likely additional logging output above. 24 verbose exit [ 3, true ]

luo772435545 commented 6 years ago

{ "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js" }, "dependencies": { "axios": "^0.18.0", "iviewxx": "^1.7.3", "node-sass": "^4.8.3", "qs": "^6.5.1", "sass-loader": "^7.0.1", "vue": "^2.5.2", "vue-awesome-swiper": "^3.1.3", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, "devDependencies": { "autoprefixer": "^7.1.2", "babel-core": "^6.22.1", "babel-eslint": "^8.2.1", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-vue-jsx": "^3.5.0", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "chalk": "^2.0.1", "copy-webpack-plugin": "^4.0.1", "css-loader": "^0.28.0", "eslint": "^4.15.0", "eslint-config-standard": "^10.2.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.7.1", "eslint-plugin-import": "^2.7.0", "eslint-plugin-node": "^5.2.0", "eslint-plugin-promise": "^3.4.0", "eslint-plugin-standard": "^3.0.1", "eslint-plugin-vue": "^4.5.0", "extract-text-webpack-plugin": "^3.0.0", "file-loader": "^1.1.4", "friendly-errors-webpack-plugin": "^1.6.1", "html-webpack-plugin": "^2.30.1", "iview": "^2.13.1", "node-notifier": "^5.1.2", "optimize-css-assets-webpack-plugin": "^3.2.0", "ora": "^1.2.0", "portfinder": "^1.0.13", "postcss-import": "^11.0.0", "postcss-loader": "^2.0.8", "postcss-url": "^7.2.1", "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^0.5.8", "vue-loader": "^13.3.0", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^3.6.0", "webpack-bundle-analyzer": "^2.9.0", "webpack-dev-server": "^2.9.1", "webpack-merge": "^4.1.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ] }

songyazhao commented 6 years ago

@hubcarl 不是因为 ts-loader，前端没有使用 ts ，整个项目架构是基于 egg-vue-typescript-boilerplate ，然后把项目的前端部分替换成了js实现 现在项目也不是很大，十来个页面的样子。目前看来是和前端的热更新有关，后端的代码怎么改也是没事的。

hubcarl commented 6 years ago

@songyazhao 你在看看， easywebpack4 最近修复了一个问题：https://github.com/hubcarl/easywebpack/compare/4.5.0...4.5.1 怀疑与这个有关

hubcarl commented 6 years ago

Webpack4 有反馈这个问题，目前需要查，Webpack3 暂没有人反馈

CoderKwong commented 5 years ago

在window 10 下，经常会碰到这个问题

SansaZhang commented 5 years ago

image

已使用内存超过10G就会自动重启

hubcarl commented 5 years ago

初步验证已修复，先关闭，如还有问题，再跟进！

xihadandan commented 1 month ago

还有内存溢出问题