Vue-cli搭建的项目出现内存溢出(JavaScript heap out of memory)错误?别慌!

在使用最新Vue脚手架vue-cli搭建的项目开发时,因为频繁修改代码,导致内存溢出,出现:

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

出错信息

运行时出现的完整错误提示如下:

<--- Last few GCs --->
[10904:00000000003246C0] 2612551 ms: Mark-sweep 1387.0 (1422.2) -> 1384.9 (1423.2) MB, 657.4 / 0.0 ms (average mu = 0.116, current mu = 0.056) allocation failure scavenge might not succeed
[10904:00000000003246C0] 2613450 ms: Mark-sweep 1387.8 (1423.2) -> 1383.7 (1422.2) MB, 861.2 / 0.0 ms (average mu = 0.075, current mu = 0.041) allocation failure scavenge might not succeed
<--- JS stacktrace --->
==== JS stack trace =========================================
0: ExitFrame [pc: 000003A6514841C1]
Security context: 0000029C1299E589 <JSObject>
1: add [0000029C12993B41](this=000002409B488D29 <Set map = 000003A58D804CF9>,0000029969405E61 <DependenciesBlock map = 00000126DBF4B059>)
2: new Set(aka Set) [0000029C12993809](this=000003D45A602321 <the_hole>,000002409B487549 <Set map = 000003A58D804CF9>)
3: ConstructFrame [pc: 000003A65148F09D]
4: handler(aka handler) [000003166EAF2459]...
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
1: node::DecodeWrite
2: node_module_register
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::FatalProcessOutOfMemory
5: v8::internal::Heap::MaxHeapGrowingFactor
6: v8::internal::ScavengeJob::operator=
7: v8::internal::ScavengeJob::operator=
8: v8::internal::Heap::MaxHeapGrowingFactor
9: v8::internal::Factory::AllocateRawArray
10: v8::internal::Factory::NewFixedArrayWithFiller
11: v8::internal::HashTable<v8::internal::SimpleNumberDictionary,v8::internal::SimpleNumberDictionaryShape>::ToKey
12: v8::internal::Dictionary<v8::internal::NumberDictionary,v8::internal::NumberDictionaryShape>::AtPut
13: v8::internal::Compiler::PostInstantiation
14: 000003A6514841C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! wechat-finance@0.1.0 dev: `vue-cli-service serve`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the wechat-finance@0.1.0 dev 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! C:\Users\nooldey\AppData\Roaming\npm-cache\_logs\2018-06-26T09_11_38_139Z-debug.log

注意:这并不是Vue-cli脚手架的问题,而是webpack4的配置,从根源上讲,是nodejs运行时内存大小限制的问题。

查看原因:WEBPACK-ISSUES

解决方法

解决方法很简单,就是重设nodejs运行时的缓存大小。

一、直接覆盖

  • 简单粗暴,直接在package.json替换scripts下的serve指令内容:
  • "serve" : "node --max_old_space_size=4096 node_modules/.bin/vue-cli-service serve --open"
  • 开发时运行npm run serveyarn serve即可。

二、优雅的覆盖

和以上的方法唯一的不同,就是不需要编写vue-cli-service包的路径,代码更优雅,也不受包地址的影响。

  • 全局安装npx: npm i -g npx
  • 直接在package.json替换scripts下的serve指令内容:
  • "serve": "npx --max_old_space_size=4096 vue-cli-service serve"
  • 开发时运行npm run serveyarn serve即可。
NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/framework/vue-cli-leap-out/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!