Webpack 优化全攻略：彻底解决 Vue 项目 npm run dev 的内存泄露问题

引言

最近开发中，你是否也遇到过这样的场景：启动 npm run dev 后，电脑风扇呼呼转，内存占用暴涨，CPU 跑满，最终系统拖到几乎无法响应？如果是这样，那么恭喜你“中奖”了！这个问题可能和 Node.js 文件监听的机制有关。
在开发一个基于 Vue 的项目时，我同样碰到过这个资源泄露问题，经过一番研究，终于找到了解决办法。今天，我就带你一起复盘这个过程：是什么原因导致了问题，又该如何通过优化 Webpack 配置，让项目恢复轻盈如燕！

背景

开发中，我们习惯于使用 Webpack 配置热更新功能，通过监听文件改动，实时刷新页面，极大提升了效率。然而，默认配置可能暗藏隐患： 

• Webpack 对文件改动过于敏感，每一次保存都会触发重新编译；
• 默认的 source-map 配置在调试时非常耗费资源；
• 如果不启用缓存，每次构建都需要重新处理所有依赖文件。

这些问题，叠加到高频开发场景中，最终引发了如下症状：内存泄露、SWAP 频繁读写、CPU 占用过高、平均负载急剧升高。我们该如何破局？