如何解決基于node的前端項(xiàng)目編譯時內(nèi)存溢出問題-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關(guān)如何解決基于node的前端項(xiàng)目編譯時內(nèi)存溢出問題的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。

目前成都創(chuàng)新互聯(lián)已為千余家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計、興業(yè)網(wǎng)站維護(hù)等服務(wù),公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。

首先看我模擬出的報錯內(nèi)容

具體截圖如下

如何解決基于node的前端項(xiàng)目編譯時內(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)存時只能使用部分內(nèi)存(64位系統(tǒng)下約為1.4 GB,32位系統(tǒng)下約為0.7 GB),這就是我們編譯項(xiàng)目時為什么會出現(xiàn)內(nèi)存泄露了,因?yàn)榍岸隧?xiàng)目如果非常的龐大,webpack 編譯時就會占用很多的系統(tǒng)資源,如果超出了V8對 Node 默認(rèn)的內(nèi)存限制大小就會出現(xiàn)剛剛我截圖的那個錯誤了,那怎么解決呢?V8依然提供了選項(xiàng)讓我們使用更多的內(nèi)存。Node 在啟動時可以傳遞 --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初始化時生效,一旦生效就不能再動態(tài)改變。如果遇到 Node 無法分配足夠內(nèi)存給 JavaScript 的情況,可以用這個辦法來放寬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,這個具體的大小可以根據(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"
}

這個就和 vue-cli 不一樣了,運(yùn)行npm run build的時候跑的實(shí)際代碼是 react-scripts build, 這個腳本是來源于哪里呢,我們打開項(xiàng)目根目錄mode_modeles文件夾,會看到一個.bin的目錄,react-scripts腳本就定義在這里,在.bin目錄下可以找到一個叫react-scripts的文件,打開這個文件,我們發(fā)現(xiàn)里面就是一些javascript代碼,這個代碼的首行有些特殊,我們可以看到#!/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)用我們一般也都會用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目錄下我們能找到一個叫ng的文件,在該文件的首行寫上#!/usr/bin/env node --max_old_space_size=4096,這樣也就可以解除v8對node的內(nèi)存使用限制了。

感謝各位的閱讀!關(guān)于“如何解決基于node的前端項(xiàng)目編譯時內(nèi)存溢出問題”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

文章名稱:如何解決基于node的前端項(xiàng)目編譯時內(nèi)存溢出問題-創(chuàng)新互聯(lián)
地址分享:http://muchs.cn/article24/dddsce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站網(wǎng)站內(nèi)鏈、微信公眾號標(biāo)簽優(yōu)化、全網(wǎng)營銷推廣網(wǎng)站營銷

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化