升级webpack5后karma测试打包内存占满溢出问题求助

1. webpack5的全量模块处理开销远高于webpack4：你当前入口使用require.context('../src', true, /\.js$/)全量引入src目录下所有JS文件，除了显式排除的几个文件外，所有业务代码、测试代码及关联的devDependencies都会被纳入打包范围，webpack5的依赖树分析、polyfill注入、优化流程的内存占用比webpack4高2~3倍，是内存溢出的核心诱因。
2. 高开销配置放大内存占用：devtool: 'source-map'在打包数千个模块的场景下，生成的source map数据会占用大量堆内存；你新增的Buffer、process全局注入配置，会给所有用到这两个API的模块注入对应依赖，大量测试用例的重复引入进一步推高了内存开销。
3. 无效模块加载：你主动全量引入了所有业务代码，而实际上测试用例会自动依赖需要的业务模块，主动全量加载等于多加载了大量不需要的冗余模块。

• 修正入口的require.context规则：不要全量引入所有JS文件，改为只引入测试文件，业务代码会被测试用例自动关联引入，可直接减少90%以上的打包模块数，修改后入口的上下文加载代码如下：

var appReq = require.context('../src', true, /\.test\.js$/);
appReq.keys().map(appReq);

• 降低source map开销：将devtool: 'source-map'替换为eval-cheap-module-source-map，测试场景下足够定位问题，同时内存占用可降低40%左右，无定位需求时可直接关闭devtool。
• 合并冗余插件配置：将两个重复声明的ProvidePlugin合并为一个实例，减少插件运行开销：

new webpack.ProvidePlugin({
  Buffer: ['buffer', 'Buffer'],
  process: 'process/browser'
})

• 开启webpack文件系统缓存：在配置中新增cache配置，二次构建的内存开销和构建速度都会大幅优化：

cache: {
  type: 'filesystem',
  cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/webpack-karma'),
},

• 调整CI运行参数：4GB内存的GitLab Runner可在CI脚本中设置node内存参数NODE_OPTIONS="--max-old-space-size=3584" 你的测试执行命令，避免进程被系统主动kill。

内容的提问来源于stack exchange，提问作者Rasmus Puls