zoukankan      html  css  js  c++  java
  • nodejs 前端项目编译时内存溢出问题的原因及解决方案

    现象描述

    昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory。并且打包速度相当慢,估计项目过大了。

    解决方案一:通过 package.json 中的 "build" 加大内存

    /* package.json 文件 */
    "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "set NODE_ENV=production && node --max_old_space_size=8000 build/build.js",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run e2e"
    },
     
    解决方案二:使用 increase-memory-limit 插件,增加node服务器内存限制

    /* package.json 文件 */
    "devDependencies": {
    "increase-memory-limit": "^1.0.6",
    },
    /* 添加 fix-memory-limit */
    "scripts": {
    "fix-memory-limit": "cross-env LIMIT=8096 increase-memory-limit"
    }
     
    新增依赖包npm install --save-dev increase-memory-limit,或者重新 npm install 全量更新
    执行npm run fix-memory-limit(只需执行一次即可)
    重启项目即可
    知识点扩展:

    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"
    }
    ---------------------
    作者:QC班长
    来源:CSDN
    原文:https://blog.csdn.net/qq_35624642/article/details/81084331
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    Windows 科研软件推荐
    有关Python 包 (package) 的基本知识
    《Using Python to Access Web Data》Week4 Programs that Surf the Web 课堂笔记
    Coursera助学金申请模板
    《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记
    Jupyter 解决单个变量输出问题
    解决 pandas 中打印 DataFrame 行列显示不全的问题
    《Using Python to Access Web Data》 Week3 Networks and Sockets 课堂笔记
    缓存击穿及解决方案
    jvm垃圾收集器
  • 原文地址:https://www.cnblogs.com/gankehuang/p/10413061.html
Copyright © 2011-2022 走看看