使用webpack-dev-server时NodeJS可用内存配置调整

使用webpack-dev-server时NodeJS可用内存配置调整

现象

使用webpack-dev-server开发时内存可能占用比较多,导致部分场景下内存溢出而退出.

<--- Last few GCs --->                                                                                                                                                             
[29268:01873668]   185036 ms: Mark-sweep 677.4 (717.1) -> 677.4 (717.1) MB, 272.1 / 0.0 ms  allocation failure GC in old space requested                                         
[29268:01873668]   185311 ms: Mark-sweep 677.4 (717.1) -> 673.3 (711.8) MB, 274.7 / 0.0 ms  last resort GC in old space requested                                                
[29268:01873668]   185591 ms: Mark-sweep 673.3 (711.8) -> 673.3 (711.8) MB, 280.1 / 0.0 ms  last resort GC in old space requested                                                                                                                                                
<--- JS stacktrace --->                                                                                                                                                          
                                                                                                                                                                                 
==== JS stack trace =========================================                                                                                                                                                         
Security context: 03C961D9 <JSObject>                                                                                                                                            
    2: replace(this=132AEB25 <Very long string[2481434]>,23B9B665 <String[32]: var HTML_WEBPACK_PLUGIN_RESULT =>,39E84255 <String[0]: >)                                         
    3: evaluateCompilationResult [E:\xxxxxxxxxxx\node_modules\html-webpack-plugin\index.js:240] [bytecode=23B9B859 offset=40](this=044A0B41 <HtmlWebpackPlugin map = 2F
DDBB81>,compilation=18568E7D <Tapable map = 2FDC4C8D>,source=132AEB25 <Very long string[24...                                                                                    
                                                                                                                                                                                 
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory                                                                                               
 1: node_module_register                                                                                                                                                         
 2: v8::internal::Factory::NewRawTwoByteString                                                                                                                                   

原因分析

Node的运行期内存大小有限制(指V8的内存管理,使用new Buffer()等方式直接开辟的内存不在这个范畴内). V8内存限制(默认值)为: 64位环境1.4G, 32位环境0.7G。这个限制是V8决定的，如果使用的Node的版本是32位，操作系统为64位，则按照32位处理。
内存溢出主要是V8管理的内存不足导致。内存在做回收时有新旧space拷贝交换，期间内存占用会比较大。

webpack-dev-server在打包过程中会将部分文件解析到内存，造成内存使用量大。且任意文件变化均会触发相关受影响模块的编译，在此期间会有大量的内存回收进行，如果回收不及时，会造成内存溢出而退出。

处理方法

由于webpack-dev-server是开发期间使用的，暂不考虑内存使用优化等方面的改进，简单粗暴采用配置Node内存的方式进行。

配置old-space内存大小为2G,格式如下

node --max-old-space-size=2000 test.js

对于项目上,由于采用webpack-dev-server,直接在package.json的对应启动项中增加参数即可

{//package.json
    ......
	"scripts": {
    "server": "webpack-dev-server --env.server --max-old-space-size=2000"
    }
}

另外,使用的Node要采用64位版本.
查看当前Node的版本的脚本如下

node -p "process.arch"

如果输出结果为x64,说明node为64位版本;如果是ia32,说明是32位版本

其他说明

使用较大内存时,需要排查下是否使用的webpack插件本身有问题,建议在允许的前提下尽量使用较新版本,或基于较新版本进行测试来排查问题.