快捷導(dǎo)航

詳解基于node的前端項(xiàng)目編譯時(shí)內(nèi)存溢出問題

更新時(shí)間：2017年08月01日 15:32:20 作者：weiwei

本篇文章主要介紹了基于node的前端項(xiàng)目編譯時(shí)內(nèi)存溢出問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前段時(shí)間公司有個(gè)基于vue的項(xiàng)目在運(yùn)行npm run build的時(shí)候會(huì)報(bào)內(nèi)存溢出，今天在某個(gè)技術(shù)流交群也有位小伙伴基于angular的項(xiàng)目也出現(xiàn)了這個(gè)問題，所以查了一些相關(guān)的資料總結(jié)了一下，下面會(huì)詳細(xì)說明前端三大框架編譯時(shí)遇到這個(gè)問題具體怎么解決。首先看我模擬出的報(bào)錯(cuò)內(nèi)容

具體截圖如下

里面有句關(guān)鍵的話，CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory JavaScript堆內(nèi)存不足，這里說的 JavaScript 其實(shí)就是 Node，我們都知道 Node 是基于V8引擎，在一般的后端開發(fā)語言中，在基本的內(nèi)存使用上沒有什么限制，但是我去查閱了相關(guān)的資料才發(fā)現(xiàn)，在 Node 中通過 JavaScript 使用內(nèi)存時(shí)只能使用部分內(nèi)存（64位系統(tǒng)下約為1.4 GB，32位系統(tǒng)下約為0.7 GB），這就是我們編譯項(xiàng)目時(shí)為什么會(huì)出現(xiàn)內(nèi)存泄露了，因?yàn)榍岸隧?xiàng)目如果非常的龐大，webpack 編譯時(shí)就會(huì)占用很多的系統(tǒng)資源，如果超出了V8對(duì) Node 默認(rèn)的內(nèi)存限制大小就會(huì)出現(xiàn)剛剛我截圖的那個(gè)錯(cuò)誤了，那怎么解決呢？V8依然提供了選項(xiàng)讓我們使用更多的內(nèi)存。Node 在啟動(dòng)時(shí)可以傳遞 --max-old-space-size 或 --max-new-space-size 來調(diào)整內(nèi)存大小的使用限制，示例如下

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

上述參數(shù)在V8初始化時(shí)生效，一旦生效就不能再動(dòng)態(tài)改變。如果遇到 Node 無法分配足夠內(nèi)存給 JavaScript 的情況，可以用這個(gè)辦法來放寬V8默認(rèn)的內(nèi)存限制，避免在執(zhí)行過程中稍微多用了一些內(nèi)存就輕易崩潰，既然知道了解決辦法那就好辦了，下面來分別詳細(xì)說明三大框架下的具體操作。

Vue

先說vue，因?yàn)関ue是最簡單的，因?yàn)榛?vue-cli 生成的項(xiàng)目，vue沒有把 package.json 里面 scripts 字段的腳本命令的node命令隱藏起來，我們直接把上面v8提供的選項(xiàng)參數(shù)直接寫入scripts 字段的 node 命令后就好了，示例如下

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

直接在 node 后面寫上 --max_old_space_size=4096 就好了，我這里設(shè)置的內(nèi)存大小是4G,這個(gè)具體的大小可以根據(jù)自己的項(xiàng)目情況來設(shè)置就好了。然后再重新運(yùn)行 npm run build 就可以正常打包構(gòu)建了。

React

下面來說說 react ，首先如果自己的 react 項(xiàng)目的開發(fā)打包環(huán)境是自己搭建的話，那解決方法就和上面的 vue 一樣，在 node 命令后面加上 --max_old_space_size=4096 就好了，如果是基于 react-cli 生成的項(xiàng)目那就接著看吧，基于react-cli 生成的項(xiàng)目我們發(fā)現(xiàn)package.json 里面 scripts 字段的內(nèi)容如下

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

這個(gè)就和 vue-cli 不一樣了，運(yùn)行npm run build的時(shí)候跑的實(shí)際代碼是 react-scripts build, 這個(gè)腳本是來源于哪里呢，我們打開項(xiàng)目根目錄mode_modeles文件夾，會(huì)看到一個(gè).bin的目錄，react-scripts腳本就定義在這里，在.bin目錄下可以找到一個(gè)叫react-scripts的文件，打開這個(gè)文件，我們發(fā)現(xiàn)里面就是一些javascript代碼，這個(gè)代碼的首行有些特殊，我們可以看到#!/usr/bin/env node一行這樣的代碼，它的意思就是，用當(dāng)前電腦/usr/bin/env目錄下的node來運(yùn)行該文件里面的javascript代碼，看到這里我們都明白了，回到我們最初要解決的問題，我們可以把--max_old_space_size=4096這行代碼寫在#!/usr/bin/env node后面，#!/usr/bin/env node --max_old_space_size=4096，這樣就好了，我們的內(nèi)存溢出問題也就解決了。

Angular

最后開始說 angular ，當(dāng)然這里說的 angular 是 angular 的最新版本不是angularjs，寫angular應(yīng)用我們一般也都會(huì)用angular-cli來搭建項(xiàng)目，如果是自己搭建的開發(fā)編譯那解決辦法和上面的vue是一樣的了。用angular-cli來生成的項(xiàng)目也和react一樣，cli把node命令也隱藏起來了，package.json 里面 scripts 字段的內(nèi)容如下

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

這里的ng命令也和react一樣，定義在項(xiàng)目根目錄mode_modeles文件夾下的.bin目錄里面，.bin目錄下我們能找到一個(gè)叫ng的文件，在該文件的首行寫上#!/usr/bin/env node --max_old_space_size=4096，這樣也就可以解除v8對(duì)node的內(nèi)存使用限制了。

參考

深入淺出Node.js

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: