基於node的前端項目編譯時內存溢出問題

前段時間公司有個基於vue的項目在運行npm run build的時候會報內存溢出，今天在某個技術流交羣也有位小夥伴基於angular的項目也出現了這個問題，因此查了一些相關的資料總結了一下，下面會詳細說明前端三大框架編譯時遇到這個問題具體怎麼解決。首先看我模擬出的報錯內容

具體截圖以下

裏面有句關鍵的話，CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆內存不足，這裏說的 JavaScript 其實就是 Node，咱們都知道 Node 是基於V8引擎，在通常的後端開發語言中，在基本的內存使用上沒有什麼限制，可是我去查閱了相關的資料才發現，在 Node 中經過 JavaScript 使用內存時只能使用部份內存（64位系統下約爲1.4 GB，32位系統下約爲0.7 GB），這就是咱們編譯項目時爲何會出現內存泄露了，由於前端項目若是很是的龐大，webpack 編譯時就會佔用不少的系統資源，若是超出了V8對 Node 默認的內存限制大小就會出現剛剛我截圖的那個錯誤了，那怎麼解決呢？V8依然提供了選項讓咱們使用更多的內存。Node 在啓動時能夠傳遞 --max-old-space-size 或 --max-new-space-size 來調整內存大小的使用限制，示例以下

node --max-old-space-size=1700 test.js // 單位爲MB
// 或者
node --max-new-space-size=1024 test.js // 單位爲KB

上述參數在V8初始化時生效，一旦生效就不能再動態改變。若是遇到 Node 沒法分配足夠內存給 JavaScript 的狀況，能夠用這個辦法來放寬V8默認的內存限制，避免在執行過程當中稍微多用了一些內存就輕易崩潰，既然知道了解決辦法那就好辦了，下面來分別詳細說明三大框架下的具體操做。

Vue

先說vue，由於vue是最簡單的，由於基於 vue-cli 生成的項目，vue沒有把 package.json 裏面 scripts 字段的腳本命令的node命令隱藏起來，咱們直接把上面v8提供的選項參數直接寫入scripts 字段的 node 命令後就行了，示例以下

"build": "node --max_old_space_size=4096 build/build.js"

直接在 node 後面寫上 --max_old_space_size=4096 就行了，我這裏設置的內存大小是4G,這個具體的大小能夠根據本身的項目狀況來設置就行了。而後再從新運行 npm run build 就能夠正常打包構建了。

React

下面來講說 react ，首先若是本身的 react 項目的開發打包環境是本身搭建的話，那解決方法就和上面的 vue 同樣，在 node 命令後面加上 --max_old_space_size=4096 就行了，若是是基於 react-cli 生成的項目那就接着看吧，基於react-cli 生成的項目咱們發現package.json 裏面 scripts 字段的內容以下

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
}

這個就和 vue-cli 不同了，運行npm run build的時候跑的實際代碼是 react-scripts build, 這個腳本是來源於哪裏呢，咱們打開項目根目錄mode_modeles文件夾，會看到一個.bin的目錄，react-scripts腳本就定義在這裏，在.bin目錄下能夠找到一個叫react-scripts的文件，打開這個文件，咱們發現裏面就是一些javascript代碼，這個代碼的首行有些特殊，咱們能夠看到#!/usr/bin/env node一行這樣的代碼，它的意思就是，用當前電腦/usr/bin/env目錄下的node來運行該文件裏面的javascript代碼，看到這裏咱們都明白了，回到咱們最初要解決的問題，咱們能夠把--max_old_space_size=4096這行代碼寫在#!/usr/bin/env node後面，#!/usr/bin/env node --max_old_space_size=4096，這樣就行了，咱們的內存溢出問題也就解決了。

Angular

最後開始說 angular ，固然這裏說的 angular 是 angular 的最新版本不是angularjs，寫angular應用咱們通常也都會用angular-cli來搭建項目，若是是本身搭建的開發編譯環境那解決辦法和上面的vue是同樣的了。用angular-cli來生成的項目也和react同樣，cli把node命令也隱藏起來了，package.json 裏面 scripts 字段的內容以下

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

這裏的ng命令也和react同樣，定義在項目根目錄mode_modeles文件夾下的.bin目錄裏面，.bin目錄下咱們能找到一個叫ng的文件，在該文件的首行寫上#!/usr/bin/env node --max_old_space_size=4096，這樣也就能夠解除v8對node的內存使用限制了。

參考

https://book.douban.com/subje...