碎碎念ZWS

在使用最新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 serve或yarn 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 serve或yarn serve即可。