umi 修改less文件 JS stackrace nodejs 爆栈

386 阅读2分钟

背景

项目基于umi脚手架搭建,在最近项目开发的时候只要改变less(任意的less)文件,热更新会导致直接爆栈

复现

在任务管理器打开的时候,看到node占内存疯涨上涨,直接导致node进程直接崩溃。

解决思路

    1. 第一步想的是可能是node占用的内存太大,需要给项目更大的空间; 与此推荐一个释放Node空间的插件increase-memory-limit。 分配了4个G的运行内存发现根本来不通方法不通
    1. 判断是不是项目太大导致了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)
            }
          }
        })
      })
    }
  })
}

  1. 接下来就是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版本太低, 遇到问题还是需要冷静下来慢慢走,看请求看进程,方法总是有的。