背景
项目基于umi脚手架搭建,在最近项目开发的时候只要改变less(任意的less)文件,热更新会导致直接爆栈
复现
在任务管理器打开的时候,看到node占内存疯涨上涨,直接导致node进程直接崩溃。
解决思路
-
- 第一步想的是可能是node占用的内存太大,需要给项目更大的空间; 与此推荐一个释放Node空间的插件increase-memory-limit。 分配了4个G的运行内存发现根本来不通方法不通
-
- 判断是不是项目太大导致了less文件过多,导致每次编译都需要很大的空间,用Node写了一个查看项目中所有的less,以及将一些less清空,发现依旧爆栈。node执行代码如下
const fs = require('fs');
const path = require('path');
const filePath = path.resolve('./src');
dileDisplay(filePath)
const allLessList = []
let index = 0
function dileDisplay(paths) {
fs.readdir(paths, (err, files) => {
if (err) {
console.error('errr+++', err)
} else {
files.forEach(filename => {
const filedir = path.join(paths, filename)
fs.stat(filedir, (error, stats) => {
if (error) {
console.error('error+++', error)
} else {
const isDir = stats.isDirectory()
if (isDir) {
dileDisplay(filedir)
return
}
if (filename.includes('.less')) {
index += 1;
if(index>100) {
// 自己搜下用node 清空文件很简单
}
console.log('123+++', filename, filedir)
console.log('index+++', index)
}
}
})
})
}
})
}
- 接下来就是webpack配置的问题导致了占用了内存,搜了一大圈发现有一个webpack插件会导致 antd-theme-generator,在全局中搜索这个插件以及他的引用空间, 如果找不到插件shell搜索:
npm ls antd-theme-generator 找到相对应的引用插件直接全部注释,如下是我们项目中注释:
config.plugin('merge-less').use(MergeLessPlugin, [
{
stylesDir,
outFile,
},
]);
//
// config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
// {
// antDir: path.join(__dirname, '../node_modules/antd'),
// stylesDir,
// varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
// mainLessFile: outFile, // themeVariables: ['@primary-color'],
// indexFileName: 'index.html',
// generateOne: true,
// lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
// },
// ]);
当然这个antd-theme-generator插件作用是动态的主题,看项目需要的删改
ending
这个js stackrace问题其实也定位了半天,中间包括猜测node版本太低, 遇到问题还是需要冷静下来慢慢走,看请求看进程,方法总是有的。