umijs / umi

A framework in react community ✨
https://umijs.org
MIT License
15.29k stars 2.65k forks source link

使用umi脚手架装的ant-design-pro,执行npm run analyse的时候node 内存溢出 #3449

Closed xuanxuan321 closed 4 years ago

xuanxuan321 commented 4 years ago

What happens?

使用umi脚手架装的ant-design-pro,执行npm run analyse的时候node 内存溢出,即使我在analyze的脚本中加了--max-old-space-size=4000也不起作用,("analyze": "cross-env --max-old-space-size=4000 ANALYZE=1 umi build",),下面是我的config.plugin.js

// Change theme plugin
// eslint-disable-next-line eslint-comments/abdeils - enable - pair;
/* eslint-disable import/no-extraneous-dependencies */
import ThemeColorReplacer from 'webpack-theme-color-replacer';
import generate from '@ant-design/colors/lib/generate';
import path from 'path';
import { minify } from 'uglify-js';

function getModulePackageName(module: { context: string }) {
  if (!module.context) return null;

  const nodeModulesPath = path.join(__dirname, '../node_modules/');
  if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
    return null;
  }

  const moduleRelativePath = module.context.substring(nodeModulesPath.length);
  const [moduleDirName] = moduleRelativePath.split(path.sep);
  let packageName: string | null = moduleDirName;
  // handle tree shaking
  if (packageName && packageName.match('^_')) {
    // eslint-disable-next-line prefer-destructuring
    packageName = packageName.match(/^_(@?[^@]+)/)![1];
  }
  return packageName;
}

export default (config: any) => {
  // preview.pro.ant.design only do not use in your production;
  if (
    process.env.ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site' ||
    process.env.NODE_ENV !== 'production'
  ) {
    config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer, [
      {
        fileName: 'css/theme-colors-[contenthash:8].css',
        matchColors: getAntdSerials('#1890ff'), // 主色系列
        // 改变样式选择器,解决样式覆盖问题
        changeSelector(selector: string): string {
          switch (selector) {
            case '.ant-calendar-today .ant-calendar-date':
              return ':not(.ant-calendar-selected-date)' + selector;
            case '.ant-btn:focus,.ant-btn:hover':
              return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)';
            case '.ant-btn.active,.ant-btn:active':
              return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)';
            default:
              return selector;
          }
        },
        // isJsUgly: true,
      },
    ]);
  }

  // optimize chunks
  config.optimization
    // share the same chunks across different modules
    .runtimeChunk(false)
    .splitChunks( {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      automaticNameMaxLength: 30,
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    });
};

const getAntdSerials = (color: string) => {
  const lightNum = 9;
  const devide10 = 10;
  // 淡化(即less的tint)
  const lightens = new Array(lightNum).fill(undefined).map((_, i: number) => {
    return ThemeColorReplacer.varyColor.lighten(color, i / devide10);
  });
  const colorPalettes = generate(color);
  return lightens.concat(colorPalettes);
};

主要问题处在splitChunks的配置,但是我不知道我这个配置为什么会导致node内存溢出,有什么办法是内存不溢出吗?或者能让我手动加大node能占用的内存也行

Context

ikobe-zz commented 4 years ago

有可以复现的仓库么?

label-actions[bot] commented 4 years ago

Hello @xuanxuan321

为了能够进行高效沟通,我们对 issue 有一定的格式要求,你的 issue 因为无复现步骤或可复现仓库而被自动关闭,提供之后会被 REOPEN。

In order to communicate effectively, we have a certain format requirement for the issue, your issue is automatically closed because there is no recurring step or reproducible warehouse, and will be REOPEN after the offer.