因为自己的项目是基于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中修改
const compiledPages = []; before(app) { app.get('*.html', (req, res, next) => { const result = req.url.match(/[^/]+?(?=\.)/); const pageName = result && result[0]; const pagesName = Object.keys(multiPageConfig); if (pageName) { if (pagesName.includes(pageName)) { if (!compiledPages.includes(pageName)) { const page = multiPageConfig[pageName]; fs.writeFileSync(`dev-entries/${pageName}.js`, `import '../${page.tempEntry}'; // eslint-disable-line`); compiledPages.push(pageName); } } else { // 没这个入口 res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' }); res.end('<p>不存在的入口</p>'); } } next(); }); },
multPageConfig是多页面的配置，在开发环境中，做了一下修改，配置如下:
{ pageName: { entry: entryPath, chunks: [array] } } const fs = require('fs'); const util = require('util'); const outputFile = util.promisify(fs.writeFile); async function main() { const tasks = []; if (!fs.lstatSync('dev-entries').isDirectory()) { fs.mkdirSync('dev-entries'); } Object.keys(pages).forEach((key) => { const entry = `dev-entries/${key}.js`; pages[key].tempEntry = pages[key].entry; // 暂存真正的入口文件地址 pages[key].entry = entry; tasks.push(outputFile(entry, '')); }); await Promise.all(tasks); } if (process.env.NODE_ENV === 'development') { main(); } module.exports = pages;