当前位置 主页 > 网站技术 > 代码类 >

    解决webpack多页面内存溢出的方法示例

    栏目:代码类 时间:2019-10-12 15:04

    因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法

    在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大,webpack编译的速度越来越慢,并且经常出现内存溢出的情况。

    下面就是几种尝试的方法,加快编译的速度

    增加Node运行内存

    在Node中通过JavaScript使用内存时只能使用部分内存(64位系统下约为1.4 GB,32位系统下约为0.7 GB)。所以不管电脑实际的运行内存是多少,Node在运行代码编译的时候,使用内存大小不会发生变化。这样就可能导致因为原有的内存不够,导致内存溢出。所以可以增加Node的运行内存,下面是两种方法

    更改cmd

    在node_modules/.bin/vue-cli-server.cmd把下面代码复制上去

    @IF EXIST "%~dp0\node.exe" (
     "%~dp0\node.exe" --max_old_space_size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
    ) ELSE (
     @SETLOCAL
     @SET PATHEXT=%PATHEXT:;.JS;=;%
     node --max_old_space_size=4096 "%~dp0\..\@vue\cli-service\bin\vue-cli-service.js" %*
    )
    

    更改package.json

    把启动Node服务的更改下:

    node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js serve
    

    本质上没啥区别,都是通过强行增加Node的运行内存,来解决内存溢出的问题。但是这种方法不治本,虽然不会造成内存溢出,但是编译速度还是挺慢的,编译完成还是需要等很久。

    配置需要编译的文件

    这种就是按需配置需要编译的文件,为什么出现内存溢出,本质上还是因为需要编译的文件太多了,那我们就可以减少需要编译的页面就可以解决这个问题。

    首先所有的页面配置都是放在page.config.js,如果我们需要对某些特定页面进行配置,就需要过滤所有的页面,获取需要编译的页面,下面是编译文件的写法

    const path = require('path');
    const fs = require('fs');
    const pages = require('../pages.config');
    
    const params = JSON.parse(process.env.npm_config_argv).original;
    const buildPath = params[params.length - 1].match(/[a-zA-Z0-9]+/)[0] || '';
    
    let buildConfig = {
     pages: [],
    };
    
    
    if (!/(test|online|serve)/gi.test(buildPath)) {
     const configJsPath = path.resolve(__dirname, `${buildPath}.js`);
    
     // 如果该路径存在
     if (fs.existsSync(configJsPath)) {
      // eslint-disable-next-line import/no-dynamic-require
      buildConfig = require(configJsPath);
     } else if (pages[buildPath]) {
      buildConfig.pages = buildPath.split(',');
     } else {
      throw new Error('该路径不存在');
     }
    } else {
     buildConfig = require('./default');
    }
    module.exports = buildConfig.pages;
    
    

    大多数情况下,一个产品都是由多个业务线构成,每次可能需要更改的就是某一条业务线,就完全可以单独创建一个这条业务线的配置文件,然后再这个文件写入你需要编译的页面名称,就可以单独编译这个页面,或者说在调用通过传入的字符串来编译那些页面

    使用webbpack-dev-serve钩子进行单独编译

    在webpack进行热更新的时候,实际上是使用了webpack-dev-server这个的服务,然后是否有钩子能够给我们提供,如果我们访问哪个页面他就编译那个页面的代码。幸运的是找到,在devServer中存在这么一个钩子函数before, 那就可以在vue.config.js中修改