webpack 内存溢出 图片太大_webpack 内存溢出 - CSDN
精华内容
参与话题
  • 今天, npm run build打包时,又报内存溢出了。所以记录一下,之前查了博客有一些解释。 “报错CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory是 JavaScript堆内存不足,这里说的 ...

    今天, npm run build打包时,又报内存溢出了。所以记录一下,之前查了博客有一些解释。

    “报错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 无法分配足够内存给 JavaScript 的情况,可以用这个办法来放宽V8默认的内存限制,避免在执行过程中稍微多用了一些内存就轻易崩溃”

    针对我自己的项目,解决方法如下图

    1.在目录node_modules/.bin下;

    2.分别打开ng.cmd和ngc.cmd文件,添加  --max_old_space_size=32768,就OK了

     

    参考文章:(node.js)webpack打包报javaScript heap out of memory,内存溢出,如何解决 

     

    展开全文
  • 项目太大使用webpack打包时,会存在内存溢出的情况。如图: 可通过以下方式解决: 1、手动更改webpack-dev-server的执行内存: 找到项目的node_module/.bin/webpack-dev-server.cmd文件,然后更改其内存为4096或更...

    项目太大使用webpack打包时,会存在内存溢出的情况。如图:
    内存溢出
    可通过以下方式解决:

    1、手动更改webpack-dev-server的执行内存:
    找到项目的node_module/.bin/webpack-dev-server.cmd文件,然后更改其内存为4096或更大。如下:

    node --max-old-space-size=4096  "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
    

    2、利用npm包代为执行更改
    npm有执行扩大内存的包,执行以下命令:

    // 全局安装increase-memory-limit
    npm install -g increase-memory-limit
    // 项目目录中执行:
    increase-memory-limit
    

    而后会自动将内存扩大到10240。修改的文件不仅仅是上文提到的webpack-dev-server文件,如下图:
    increase-memory-limit执行界面

    展开全文
  • 当你的项目过,由于大量的组件和页面,在运行时,webpack-dev-server可以能会出现内存溢出,导致项目运行不起来,如何去解决呢? 这是我自己的遇到的一个问题 解决方式: 找到 node_modules.bin\webpack-dev-...

    当你的项目过大,由于大量的组件和页面,在运行时,webpack-dev-server可以能会出现内存溢出,导致项目运行不起来,如何去解决呢?

    这是我自己的遇到的一个问题
    在这里插入图片描述

    解决方式:
    找到 node_modules.bin\webpack-dev-server.cmd 添加下面圈红字段
    在这里插入图片描述
    或者你的文件是这样的
    在这里插入图片描述
    然后重新运行就可以解决~~~ 比心❤

    展开全文
  • webpack性能优化

    千次阅读 2017-08-01 01:39:41
    使用webpack也有一段时间了,从webpack1到webpack3,这中间有多的曲折与纠结。webpack无疑是强大的,强大到没有朋友,webpack的设计初衷也是伟大的,它可以编译打包我们的代码,借助loader,使得我们可以使用各种...

    唠叨几句

    • 使用webpack也有一段时间了,从webpack1到webpack3,这中间有太多的曲折与纠结。webpack无疑是强大的,强大到没有朋友,webpack的设计初衷也是伟大的,它可以编译我们的代码,借助各种loader,使得我们可以使用各种es6/es7的特性,可以使用sass/less,可以编写react代码等等。

    • webpack有很多我们耳熟能详的功能,例如webpack-dev-server, Hot Module Replacement, SourceMap, UglifyJsPlugin, 自动生成html等等,一切都是配置,那么这么多的配置项也带来了配置文件杂乱可读性差的问题,而最让人难以忍受的还是webpack打包的性能问题。

    • 近期接触到一个工程,这个工程模块有100多个,在全量build的时候,一定会报内存溢出,打包失败。即便是模块不太多的工程,也会发现打包速度十分缓慢的问题,从此便可以名正言顺的趁着build的过程去个厕所,喝杯水什么的。

    • 基于性能这一痛点,然后就开始了折腾,想着法对构建的性能做一些提升。

      webpack

    折腾之路

    • 版本升级

      • 随着webpack版本的升级,webpack的配置项开始出现了限制,2.0版本以后webpack的配置项已经不允许出现自定义的属性了,核心就围绕在entry, output, loaders, 和plugins这几项当中,这在一定程度上能让webpack配置文件看起来不那么的乱。

      • webpack官方也注意到了性能问题,所以在2.0版本以后,很多在webpack1中需要配置的一些提升性能的插件也都做了默认开启,例如OccurrenceOrderPlugin(排序输出), DedupePlugin(删除重复数据)等等,loaders也将默认开启缓存。

      • 2.0以后的版本无论是从优化配置,到向es6 module,Promise等标准接轨,再到编译环境和性能的优化,再到API设计的整体规范性上,相对1.0版本的改进还是非常显著的。

      • 3.0版本的webpack加入了作用域提升的功能,老版本webpack需要将每个模块包裹在单独的函数闭包中实现模块系统。而这些封装函数往往会使得浏览器中运行的javaScript代码性能有所下降。而 webpack3中提供了插件来允许开发者启用作用域提升特性来避免这种额外的性能损耗:

        ...
        plugins: [
            new webpack.optimize.ModuleConcatenationPlugin()
        ]
        ...

        作用域提升特性能够移除模块的封装函数,所以引入该插件后打包后代码的体积也会有所减少。所以升级webpack是提升性能的关键。

        webpack

    • 减少依赖

      webpack是把所有的静态资源打包到一个bundle中,通过各种loader对代码进行编译,那么如果依赖的模块过多,这肯定会导致性能下降。所以我们应该尽量减少依赖以及删除那些没有使用到的依赖。

    • 模块 和 依赖位置

      通过设置webpack的resolve属性,来指定所加载文件的扩展名以及配置模块库(node_modules)所在的位置,通过配置alias指定路径别名,在代码中尽量使用alias的路径可能提升文件查找速度。webpack配置loader的过程中也可以指定文件路径和排除文件路径。这在一定程度上能让文件查找快起来。

      ...
      resolve: {
          extensions: ['.js'],
          alias: {
            globalLib: path.join(__dirname, './src/lib')
          },
          modules: [path.resolve(__dirname, 'node_modules')],
      },
      ...
      module: {
          rules: [
              ...
              {
               test: /\.js?$/,
               exclude: /node_modules/,
               include: path.resolve(__dirname, 'src'),
               use: [
                 {
                   loader: 'happypack/loader',
                   options: {
                     id: 'js',
                   },
                 },
               ],
             },
              ...
          ]
      },
      ...
    • 开发环境和线上环境分开配置

      开发环境和线上环境的代码要求是不一致的,开发环境更为严苛,可是在开发环境完全不需要这么做,有些插件是十分消耗性能的,那么在开发环境中我们不需要引用,例如optimize-css-assets-webpack-plugin, UglifyJsPlugin, assets-webpack-plugin, DllReferencePlugin等等,这些代码优化压缩层面的插件在线上环境更加重要,那么开发环境完全可以不去加载。我们可以通过定义环境变量NODE_ENV=production的方式,在配置文件中做判断。

      ...
      const NODE_ENV = process.env.NODE_ENV;
      if(NODE_ENV === 'production'){
          config.plugins.push(
              new webpack.optimize.UglifyJsPlugin({
                compress: {
                  unused: true,
                  dead_code: true,
                  warnings: false,
                },
                sourceMap: false,
                parallel: {
                  cache: true,
                  workers: os.cpus().length,
                },
                minimize: true,
                mangle: {
                  except: ['$', 'exports', 'require'],
                },
                output: {
                  ascii_only: true,
                },
              }),
          )
      }
      ...
    • 打包DLL

      通过使用 DllPlugin & DllReferencePlugin 组件,我们可以对一些公共的库进行独立打包,单独引用,这样在其它代码进行构建的过程中就不需要再去重新编译了。DllPlugin产生vendor.js/vendor.css和manifest.json,vendor.js/vendor.css中保存着打包好的库文件,vendor.js中暴漏到全局一个类似require功能的函数,而manifest.json存储着依赖的资源路径以及id,提供给DllReferencePlugin使用,DllReferencePlugin在处理文件的时候,遇到manifest.json中的资源,使用vendor.js暴漏给全局的方法进行处理,而不会把这个文件打包进来。

      // webpack.dll.js
      ...
      const vendors = [
        'react',
      ];
      ...
      module.exports = {
        output: {
          path: path.resolve('build'),
          filename: '[name].js',
          library: '[name]',
        },
        entry: {
          vendor: vendors,
        },
        ...
        plugins: [
          ...
          new webpack.DllPlugin({
            path: 'manifest.json',
            name: '[name]',
            context: __dirname,
           })
           ...
        ],
        ...
      };
      
      // webpack.config.js
      ...
      plugins: [
       ...
        new webpack.DllReferencePlugin({
          context: __dirname,
          manifest: require('./manifest.json'),
          name: 'vendor',
        })
        ...
      ],
      ...
    • 使用happypack

      happypack可以配置编译缓存,以及充分利用多进程对静态资源进行编译,这在极大程度上提高了代码的构建速度。这里推荐一篇文章happypack 原理解析

      // @file webpack.config.js
      exports.plugins = [
        new HappyPack({
          id: 'jsx',
          threads: 4,
          loaders: [ 'babel-loader' ]
        }),
      
        new HappyPack({
          id: 'coffeescripts',
          threads: 2,
          loaders: [ 'coffee-loader' ]
        })
      ];
      
      exports.module.loaders = [
        {
          test: /\.js$/,
          loaders: [ 'happypack/loader?id=jsx' ]
        },
      
        {
          test: /\.coffee$/,
          loaders: [ 'happypack/loader?id=coffeescripts' ]
        },
      ]
    • 利用缓存

      充分的利用各种可缓存配置,上述的happypack可缓存,UglifyJsPlugin可缓存,每个loader可以配置缓存等等。

      ...
      const os = require('os');
      const HappyPack = require('happypack');
      ...
      const createHappyPlugin = function (id, loaders) {
        return new HappyPack({
          id,
          loaders,
          threadPool: HappyPack.ThreadPool({ size: os.cpus().length }),
          cache: true,
          verbose: true,
          debug: true,
        });
      };
      ...
      plugins: [
          ...
          createHappyPlugin('js', ['babel-loader?cacheDirectory'])
          ...
          new webpack.optimize.UglifyJsPlugin({
            compress: {
              unused: true,
              dead_code: true,
              warnings: false,
            },
            sourceMap: false,
            parallel: {
              cache: true,
              workers: os.cpus().length,
            },
            minimize: true,
            mangle: {
              except: ['$', 'exports', 'require'],
            },
            output: {
              ascii_only: true,
            },
          })
      ]
      
    • 提取公共代码

      使用CommonsChunkPlugin这个插件,可以把资源中引用的公共代码提取出来,然后我们就可以在页面中进行单独引用。使得工具代码和业务代码可以分离。加之浏览器的缓存文件的能力,也可以提高线上页面加载的速度。

      ...
      plugins: [
          ...
          // 把所有入口文件的公共代码提取出来,生成common.js
          new webpack.optimize.CommonsChunkPlugin('common.js'),
          ...
      ],
      ...
    • 代码分割

      通过使用require.ensure()对代码进行按需加载,webpack会收集ensure中的依赖,打包到一个单独的文件中,在用到的时候通过jsonp的形式异步加载进来,通过这种方式进行代码分割以及按需加载,对页面加载性能提升有不小的帮助,但是这个方法需要修改代码,不太适用于老工程改造。

    • CSS分割

      使用extract-text-webpack-plugin对css文件进行抽离,单独引用,这样做可以减小bundle的size,另外css文件是需要加载到dom元素上面,即header中的,无论怎么说,这样做都是明智的。

    • fast-sass-loader

      这是一个高性能的sass loader,在比较大的sass工程中,速度是sass-loader的5-10倍。

    • hash值

      通过配置hash值,使用每个文件内容计算出的md5作为文件的版本号,可以极大程度的使用浏览器缓存,提升页面性能,通过assets-webpack-plugin这个插件,可以将hash值生成json文件,方便我们配置。后面介绍这几个,其实是从页面加载性能来考虑问题的,这里也一并提出来了。

      webpack

    知己知彼

    • webpack构建分析

      如果我们对webpack构建的速度不是很满意,我们可以借助webpack-analyse或者webpack-visualizer工具对构建过程进行分析,以便于进一步的优化,做到知己知彼百战不殆,开始之前我们需要使用如下命令先生成一个构建过程的json文件:

      webpack --json --profile > stats.json 

      接下来的过程是可视化的,我们把json文件上传,紧接着就可以看到构建结果了。

      webpack

    随便聊聊

    • 通过以上的优化,对webpack构建的速度有不小的提升。完成这个项目后,对改造前后打包时间做了对比,速度提升了十几倍。但是我想这并不是终极方案,结果也并不是我满意的。相信后续的webpack版本,能够让我们拥有一个配置简单,构建高效,功能强大的工具。文章中有错误的地方,欢迎指出,互相学习,一起进步!Best Regards !

      webpack

    展开全文
  • 项目报错且启动不起来。错误大致如下 RangeError: Maximum call stack size exceeded Array.join ...而被引入的组件中又依赖router或上一层,导致webpack打包模块循环依赖。 或是req...
  • node.js内存溢出解决办法

    千次阅读 2018-12-14 09:59:42
    问题:本人用vue做项目时页面改一点东西,项目就会关闭,经检查为node.js内存溢出 解决方法:在package.json文件中加大内存,我是用start启动, 同样,有些人启动项目npm run dev会出现同样的错误,只需在dev上...
  • 掘金站内 webpack 优秀文章汇总

    千次阅读 2019-12-22 12:56:44
    本文使用 juejin-spider 生成 ... CSS][chenhongdong] webpack4-用之初体验,一起敲它十一遍 (3)[???? 1726][???? 前端][尼古拉斯李三] 妈妈再也不用担心我不会webpack了 (4)[???? 1705][????...
  • 记录坎坷的面试

    万次阅读 热门讨论 2020-07-18 18:02:52
    依图 axios请求封装,处理返回结果的方式(什么403 404什么的怎么处理?),传入函数参数,this指向 存数据的是时候,本来是以数组的方式从别的地方传来的,但是你存数据的时候怎么存储才能让后续使用更便捷,让代码...
  • 在使用webpack打包时,部分文件太大时,会出现内存溢出的情况; (一般默认500KB内) 报错信息如下: Allocation failed -JavaScript heap out of memory 报错界面中同时会显示: -------------------- JS stack ...
  • 这个报错的意思就是Node内存不足所导致的,我们都知道 Node 是基于V8引擎,在一般的后端开发语言中,在基本的内存使用上没有什么限制,但是,在 Node 中通过 JavaScript 使用内存时只能使用部分内存(64位...
  • 用vue-cli创建的项目过,各种优化

    千次阅读 2019-02-22 14:09:17
    1.首先肯定是路由懒加载 const Home = resolve => require([’@/components/home/home’], resolve); //详情 不是懒加载 ...2.在webpack的config/index.js文件中配置 productionSourceMap...
  • 全栈02 Koa2+Vue2+MySQL 全栈的入门尝试

    万次阅读 多人点赞 2019-10-16 19:00:28
    0 前言 其实并没有想要成为全栈工程师的想法,因为我觉得自己作为一个半路出家、至今全职前端开发经验不到两年的程序猿来说,把前端稍微深入一点的东西搞明白就算不错。 但是心里其实一直有一些疑惑,比如,...
  • 项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验。 1、webpack的核心概念 ...
  • 什么是WebPack,为什么要使用它? 因为别人都在用,我不会用怎么跟他们一起装逼? 别人说的这些是什么,我根本不懂: 类似gulp把自己定位为stream building tools一样,webpack把自己定位为module building ...
  • HTML5面试题

    千次阅读 2019-04-10 17:39:26
    一、 Doctype的作用? 严格模式和混杂模式的区分,以及如何触发这2种模式? 声明位于文档中的最前面,处于 标签之前。告知浏览器的解析器,用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档...
  • 文章主要介绍了如何基于Laravel,搭建在线点播系统。
  • 2020中高级前端面试题合集

    千次阅读 2020-04-08 14:21:03
    对于互联网行业来说也是一次重大的打击,也有一些企业在这次疫情中倒闭了,所以可能对于今年2020年毕业的同学来说是一次很的考验,也关乎我们的前途。 今年的面试基本上都不会线下面试,都是采取线上电话/视频的...
  • Vue 大型项目热更新优化

    千次阅读 2019-07-10 10:53:05
    优化目的 当项目路由和组件文件变多,在开发时的 hot reload 变得缓慢,和 react native 真机调试有的一拼,严重影响到开发效率。 定义组件 improt 和 require 方法 使用插件 dynamic-import-node ...
  • 入门请参考这篇文章:Vue构建单页应用最佳实战 在此记录下在我使用Vue.js 2.0开发较大型的单页应用时遇到的困难。写文章不容易,如果这篇文章对...├── build/ # webpack config files │ └── ... ├── config/
  • 2018年来自大厂的前端面试题

    千次阅读 多人点赞 2019-03-08 11:45:03
    一、来源背景 面试题是来自微博@牛客网发布的真实大厂前端面经题目,我一直在收集题目长期一个一个的记录下来的,可能会有重复,但基本前端的面试大纲和需要掌握的知识都在其中了,面试题仅做学习参考,学习者阅后...
1 2 3 4 5 ... 18
收藏数 345
精华内容 138
关键字:

webpack 内存溢出 图片太大