html-webpack-plugin 多页面,解决webapck多页面内存溢出

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

在进行多页面开发的时候，项目刚开始阶段，页面较少，编译速度还能忍受，但是一旦页面增加，多次热更新就造成了内存溢出。

原因

这里需要借助一个插件来进行性能分析webpack-bundle-analyzer，在vue.config.js中添加以下代码

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

configureWebpack: {

plugins: [

new BundleAnalyzerPlugin(),

],

}

下面是自己项目编译的截图

可以看到的是webpack把所有的页面都进行了编译，总体积已经达到了18M，耗时超过1分钟，在热更新的时候这个体积会变得更大，从而占据node的运行内存，导致内存溢出。但是一般在开发的时候，我们一次更改的页面可能就只有几个，所以编译这些多余的页面是没有必要的。那下面就是多种解决方案

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

增加Node运行内存

在上面提到在热更新的时候，热更新的代码会大量占据node分配的内存，导致内存溢出。那么第一种方式，尝试增加node的运行内存。在Node中通过JavaScript使用内存时只能使用部分内存(64位系统下约为1.4 GB，32位系统下约为0.7 GB)。所以不管电脑实际的运行内存是多少，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-se