vue前端node内存溢出问题解决

Posted 2023-05-01

参考技术A 前端项目运行时，如果经常运行慢，崩溃停止服务，报如下错误：

原因：

因为在 Node 中，通过javascript使用内存时只能使用部分内存（64位系统：1.4 GB，32位系统：0.7 GB），这个时候，如果前端项目非常的庞大，Webpack编译时就会占用很多的系统资源，如果超出了V8引擎对Node默认的内存限制大小时，就会产生内存溢出的错误。

LIMIT是你想分配的内存大小，这里的8192单位是M也就是8G，大小可根据情况而定。

但是这时候，重新启动会报错，如图：

在项目的 node_modules/.bin 文件下找到所以的 *.cmd 文件，"%_prog%" 去掉 双引号 %_prog%

可在 node_modules 同级下，写一个fix-memory-limit.config.js文件进行批次处理。

// 运行项目前通过node执行此脚本 （此脚本与 node_modules 目录同级）

const fs = require('fs')

const path = require('path')

const wfPath = path.resolve(__dirname, './node_modules/.bin')

fs.readdir(wfPath, (err, files) =>

  if (err)

    console.log(err)

  else

    if (files.length != 0)

      files.forEach(item =>

        if (item.split('.')[1] === 'cmd')

          replaceStr(`$wfPath/$item`, /"%_prog%"/, '%_prog%')

       

      )

   

 

)

// 参数：[文件路径、 需要修改的字符串、修改后的字符串] (替换对应文件内字符串的公共函数)

function replaceStr(filePath, sourceRegx, targetSrt)

  fs.readFile(filePath, (err, data) =>

    if (err)

      console.log(err)

    else

      let str = data.toString()

      str = str.replace(sourceRegx, targetSrt)

      fs.writeFile(filePath, str, err =>

        console.log(err)

      )

   

  )



然后修改 package.json里的 script里的语句

先处理内存溢出问题，然后再执行js，进行替换

&& 运算符，（相继执行，只有前一个执行成功才会执行下一个）

vue项目编译提示内存溢出

前段时间公司有个基于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 字段的内容如下

[js] view plain copy

 

1. "scripts": {  
2.  "start": "react-scripts start",  
3.  "build": "react-scripts build",  
4.  "test": "react-scripts test --env=jsdom",  
5.  "eject": "react-scripts eject"  
6. }  

这个就和 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 字段的内容如下

[js] view plain copy

 

1. "scripts": {  
2.  "ng": "ng",  
3.  "start": "ng serve",  
4.  "build": "ng build",  
5.  "test": "ng test",  
6.  "lint": "ng lint",  
7.  "e2e": "ng e2e"  
8. }  

这里的ng命令也和react一样，定义在项目根目录mode_modeles文件夹下的.bin目录里面，.bin目录下我们能找到一个叫ng的文件，在该文件的首行写上#!/usr/bin/env node --max_old_space_size=4096，这样也就可以解除v8对node的内存使用限制了。

 

转载地址: http://www.jb51.net/article/120081.htm