webpack打包、编译、热更新Node内存不足问题解决

目录
  • 日常先上结论
  • 问题背景
  • 排查问题
  • 总结

日常先上结论

  1. 上班的打工开发可以直接在这里看解决方案
  2. 修复young object promotion failed Allocation failed - JavaScript heap out of memory报错，全局安装increase-memory-limit这个包就可以解决，安装完后在项目控制台执行increase-memory-limit，然后再运行项目就完事啦，如果遇到其他报错，可以直接看下面第2项解决方案。
  3. 所有Webpack编译、打包、热更新等等问题，只要是遇到上述报错都可以用这个解决

问题背景

最近接手一个公司买过来的项目（烫手山芋），项目规模比常规后台管理项目稍大一点。刚接手一顿操作npm i, npm run dev，安装依赖，运行项目，没有任何问题。这时候我还稍微放松了一点，心想好像这项目还没什么坑。但是当我浏览系统、熟悉业务时出现了BUG，于是回到代码打个console.log调试一下，常规操作，小问题。刚ctrl+s保存切到页面想看报错信息发现页面已经蹦了，眉头一皱，感觉不对，console.log也能让页面蹦了吗？切回vscode就看到控制台红红的大字，webpack-dev-serve也蹦了。我又开始怀疑这项目了，console.log也能让项目崩溃，还能玩吗？买的别人公司的项目果然有坑。

报错信息：FATAL ERROR: MarkCompactCollector: young object promotion failed Allocation failed - JavaScript heap out of memory

排查问题

往上看控制台报错信息，看到JS stacktrace、JavaScript heap out of memory，意识到应该是内存不够了

PS：young object promotion failed Allocation failed - JavaScript heap out of memory
这句话的意思是JavaScript在将新生区对象提升至老生区的时候出错了 - 原因是JavaScript堆内存不够，
这里是V8对GC的优化，将堆划分为新生区和老生区，新生区就是创建不久的对象呗，老生区就是已经存在一段时间的对象，将堆空间划分为新生老生两个区是为了减少老生区的GC次数，毕竟GC也会影响程序运行，要尽量减少。具体可以自行百度V8 GC优化策略。

打开任务控制台，看内存占用还有剩余呀。那不是电脑内存不够，那就是Node可调用的系统内存不够用了

打开百度一搜Node可调用系统内存有多少，果然出来Node基于V8引擎，V8在64位系统最大内存为1.4G左右，而在32位系统只有0.7G左右

既然知道了问题所在，那么就好解决了，面向百度编程，百度搜索如何解决Node运行内存不足的问题马上就有了解决办法，increase-memory-limit可以提高Node占用内存。npm i -g increase-memory-limit安装包，然后在项目目录执行increase-memory-limit，执行成功

再执行npm run dev又来了一个报错，果然程序是一种修复一个BUG要再修复其他十几个BUG的东西，可以按如下操作解决问题，执行的时候多了一个""系统识别不了，去掉就可以了

总结

到此这篇关于webpack打包、编译、热更新Node内存不足问题解决的文章就介绍到这了,更多相关webpack打包编译热更新Node内存不足内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • webpack打包nodejs项目的方法

    适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没有html页面,ejs的作用也不是引入公共的组件,直接就是一个完整的页面,用webpack中处理ejs文件的loader返回的是一个函数,故会产生问题 2.由于node.js配置了静态资源目录public,而视图目录与

  • NodeJs使用webpack打包项目的方法详解

    NodeJs使用webpack打包项目的方法详解

    目录 Webpack WebPack的使用 第一步:初始化项目:npminit-y 第二步:新建 src/index.html 第三步:安装模块Jquery npminstalljquery 第四步:测试隔行换色 第五步:安装webpack(两个包)npminstallwebpackwebpack-cli-D(开发模式) 第六步:新建webpack.config.js 第七步:修改package.json(可有可无,运行方式不同) 第八步:执行打包npmrundev WebPack打包CSS 第

  • 详解webpack打包nodejs项目(前端代码)

    随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来.一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热替换 适用情况 首先说明,此情况不具备普遍性.若你的情况与笔者类似那么希望这篇文章能够帮到你. 我的项目情况是这样的:用node.js做后台,ejs做模板引擎(即整个页面是一个ejs文件)由node.js将数据渲染完成后,再将完整页面返回给用户. 那么这样做会遇到的问题: 1. 本项目没

  • webpack打包node.js后端项目的方法

    本文介绍了webpack打包node.js后端项目的方法,分享给大家,具体如下: 安装依赖 复制代码 代码如下: npm install --save-dev webpack babel-loader babel-preset-es2015 babel-preset-stage-0 webpack配置 webpack.config.js 'use strict'; const webpack = require('webpack'); let externals = _externals();

  • webpack打包、编译、热更新Node内存不足问题解决

    目录 日常先上结论 问题背景 排查问题 总结 日常先上结论 上班的打工开发可以直接在这里看解决方案 修复young object promotion failed Allocation failed - JavaScript heap out of memory报错,全局安装increase-memory-limit这个包就可以解决,安装完后在项目控制台执行increase-memory-limit,然后再运行项目就完事啦,如果遇到其他报错,可以直接看下面第2项解决方案. 所有Webpack编译

  • 教你使用webpack打包编译TypeScript代码

    TypeScript打包 webpack整合 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包: TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS: 步骤如下: 初始化项目 进入项目根目录,执行命令 npm init -y,创建package.json文件 下载构建工具 命令如下: npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpac

  • webpack自动打包和热更新的实现方法

    webpack常用配置 webpack dev server 功能:自动打包文件 配置dev server:在webpack.config.client.js中配置 const path = require('path'); const HTMlPlugin = require('html-webpack-plugin'); // 判断是否是开发环境 const isDev = process.env.NODE_ENV === 'development' const config = { ent

  • 详解webpack 热更新优化

    前言 随着项目的界面越来越多,webpack的热更新越来越慢,有时会达到5,7s之久,这对于开发效率影响是非常巨大的. 分析过程 于是今天就针对这个分析了一下热更新慢的原因,步骤如下 首先先在package中的启动命令加上 --progress --watch --colors --profile 先解释一下这几个参数的含义 --progress 构建进度 --watch 实时监测 --profile 编译过程中的步骤耗时时间 加上了这几个参数,重启项目,就可以开始观察耗时时间了,修改了某个文件

  • webpack实现热更新（实施同步刷新）

    webpack实现热更新（实施同步刷新）

    本文介绍了webpack实现热更新(实施同步刷新),分享给大家,希望对大家有帮助. 解决方案一: 实现热更新,首先,安装一系列的node命令,如果嫌麻烦,你可以直接看解决方案二,相对来说比较简单. 1.webpack命令安装 npm install webpack -g npm init npm init -yes //可以创建默认的package.json npm install webpack --save-dev npm install path fs html-webpack-plugi

  • webpack热模块替换（HMR）/热更新的方法

    这是一篇关于webpack热模块替换的最简单的配置(不需要react),也称作热更新. 模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换.增加.删除必要的模块. HMR 对于那些由单一状态树构成的应用非常有用.因为这些应用的组件是 "dumb" (相对于 "smart") 的,所以在组件的代码更改后,组件的状态依然能够正确反映应用的最新状态. webpack-dev-server内置"live reload",会自动刷新页面.

  • 详解webpack的文件监听实现(热更新)

    前言 文件监听是在源码发生变化时,自动重新构建出新的输出文件. webpack 开启监听模式,有两种方式: 1.启动 webpack 命令时,带上 --watch 参数.  唯一缺点:需要手动刷新才能看到变化: 2.在配置 webpack.config.js 中设置 watch: true.  优点: (1) WDS 不刷新浏览器 (2) WDS 不输出文件,⽽是放在内存中 (3) 使⽤用 HotModuleReplacementPlugin 插件 1 第一种方式, --watch 1.1 配置

  • React Native采用Hermes热更新打包方案详解

    React Native采用Hermes热更新打包方案详解

    目录 1, 背景 2,热更新传统方案 3,使用Hermes打包 1, 背景 如果我们打开RN的Android源码,在build.gradle中回看到这样一段代码. if (enableHermes) { def hermesPath = "../../node_modules/hermes-engine/android/"; debugImplementation files(hermesPath + "hermes-debug.aar") releaseImple

  • Node.js巧妙实现Web应用代码热更新

    Node.js巧妙实现Web应用代码热更新

    背景 相信使用 Node.js 开发过 Web 应用的同学一定苦恼过新修改的代码必须要重启 Node.js 进程后才能更新的问题.习惯使用 PHP 开发的同学更会非常的不适用,大呼果然还是我大PHP才是世界上最好的编程语言.手动重启进程不仅仅是非常恼人的重复劳动,当应用规模稍大以后,启动时间也逐渐开始不容忽视. 当然作为程序猿,无论使用哪种语言,都不会让这样的事情折磨自己.解决这类问题最直接和普适的手段就是监听文件修改并重启进程.这个方法也已经有很多成熟的解决方案提供了,比如已经被弃坑的 nod

  • 关于vue-cli3+webpack热更新失效及解决

    关于vue-cli3+webpack热更新失效及解决

    目录 vue-cli3+webpack热更新失效 1.说下起因 2.解决方案 不能进行热更新问题 解决办法 vue-cli3+webpack热更新失效 1.说下起因 A项目中遇到问题,热更新失效,百思不得其解,查询搜索vuecli3热更新失效.vue histroy 模式热更新失效,网上看到不少方法,npm重新安装,不要用淘宝镜像cnpm安装:npm安装yarn,再用yarn重新install,yarn serve启动,在npm run serve 启动等方法都不好用. github有类似问题h

随机推荐