ERROR in umi.94404ee0.js from Terser Error: Call retries were exceeded

2,646 阅读7分钟
ERROR in umi.94404ee0.js from Terser
Error: Call retries were exceeded

近日在公司服务器上打包umi项目时遇到文章标题的报错,费了一番折腾后还是把问题解决了。

首先没能第一时间定位到问题的主要原因还是出在平时开发过度依赖现成的打包方案,写 Vue 项目就用 vue-cli、React 项目就用 create-react-app,包括写 umi 的项目,由于框架本身的配置都做的相当全,包括性能优化方面的,项目要求不是特别高的情况下甚至可以实现零配置,up主动性比较差,很少会主动的去了解生态,通常都是遇到问题才会查资料。

基于上述的原因,up在看到错误日志后,并没有第一时间敏感的意识到,出错的原因可能是代码压缩的过程中引起的。

查了搜索引擎后确定 Terser 是用来解析、混淆、压缩ES6代码的工具Call retries were exceeded 则翻译做已超过呼叫重试次数。加之打包过程中监测了服务器的CPU使用率95~100%之间徘徊和内存使用率95%以上

在得到前面的结果后,问题基本就定位在了 Terser 的执行发生了异常,不过up并不能十分肯定,这里所谓的异常能否确切的称之为异常,因为up在自己的电脑上执行打包命令的时并没有报错,打包虽然不算特别快但还是可以完成的并且通过 live-server 运行后确定功能都是符合预期的。因为服务器的 CPU 和 内存都比较la,所以可能是服务器配置太差了无法支持 Terser 的正常使用。顺便提一句打包的项目算不上太大,含图片等资源在内 dist 的体积不打 zip 的情况下差不多5M。

下面展示部分日志

#14 start build in file : /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source
repository [dev] clone pull from dev

remote: Enumerating objects: 3416
remote: Enumerating objects: 3416

remote: Counting objects:   0% (   1/3416)
remote: Counting objects:   1% (  35/3416)
remote: Counting objects:   2% (  69/3416)
remote: Counting objects:   3% ( 103/3416)
...
npm WARN url-loader@4.1.1 requires a peer of webpack@^4.0.0 || ^5.0.0 but none is installe... yourself.

added 1760 packages from 1066 contributors and audited 1765 packages in 81.117s

104 packages are looking for funding
  run `npm fund` for details

found 18 vulnerabilities (2 low, 8 moderate, 5 high, 3 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

> @ build:test /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source
> REACT_APP_ENV=test umi build # ****** 开始执行打包命令 ******

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
ℹ Compiling Webpack
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
✔ Webpack: Compiled with some errors in 5.33m
 ERROR  Failed to compile with 1 errors上午9:07:34 # ****** 下面为报错信息 ******

 error  

umi.94404ee0.js from Terser
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/bundler-webpack/node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
    at ChildProcessWorker._onExit (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/bundler-webpack/node_modules/jest-worker/build/workers/ChildProcessWorker.js:274:12)
    at ChildProcess.emit (events.js:400:28)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)

Child
    
    ERROR in umi.94404ee0.js from Terser
    Error: Call retries were exceeded
        at ChildProcessWorker.initialize (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/bundler-webpack/node_modules/jest-worker/build/workers/ChildProcessWorker.js:193:21)
        at ChildProcessWorker._onExit (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/bundler-webpack/node_modules/jest-worker/build/workers/ChildProcessWorker.js:274:12)
        at ChildProcess.emit (events.js:400:28)
        at Process.ChildProcess._handle.onexit (internal/child_process.js:277:12)
null
build failed
Error: build failed
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/bundler-webpack/lib/index.js:172:29
    at finalCallback (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:108196:12)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:108219:6
    at done (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:67212:13)
    at runCompilers (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:108123:48)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:108130:7
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:108212:7
    at finalCallback (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:98589:39)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:98605:13
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147581:10), <anonymous>:42:1)
    at AsyncSeriesHook.lazyCompileHook (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147518:20)
    at onCompiled (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:98603:21)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:99013:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147581:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147518:20)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:99010:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147581:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147518:20)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:97420:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147581:10), <anonymous>:9:1)
    at AsyncSeriesHook.lazyCompileHook (/home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:147518:20)
    at /home/jpom/server/data/build/e6d97a4f2cea46178eb7705a40f2cfc1/source/node_modules/@umijs/deps/compiled/webpack/4/bundle4.js:97411:32
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ build:test: `REACT_APP_ENV=test umi build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @ build:test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-12-10T01_07_34_606Z-debug.log

经过一番不懈的搜索和思考(整理思路,重新组织搜索词)后,搜索结果里出来了 How to speed up compilation

搜索结果

image.png

How to speed up compilation,输入 terser 搜索

image.png

浏览了上面的文档后进一步明确 terser 对于内存消耗的要求明显比较高,当然图中的内存消耗其实也只在 500M 以内,至于为什么 4G 内存的服务器竟然能跑满笔人还是不太想得明白。但经过分别尝试了 No compression 和用 esbuild 替代 terser 的解决方案后,至少得出的结论是包打出来了🎇。

下面贴一下两个方案的配置和成功的截图(服务器只有日志贴出来不是特别直观,但是服务器的打包使用了umi提供的两个方案后确实成功了) ps: 截图的时候没启用 dynamicImport

No compression

优缺点:体积大,但是打包快

  1. 在 package.json 中给需要的指令添加 COMPRESS=none
{
  ...
  "scripts": {
    "build:test": "COMPRESS=none REACT_APP_ENV=test umi build",
    "build": "COMPRESS=none umi build",
  }
}

image.png

@umijs/plugin-esbuild

优缺点:体积小,但是打包慢

  1. 安装依赖

yarn add @umijs/plugin-esbuild --dev

  1. 在 config.ts 中添加 esbuild: {} 启用 esbuild
// config/config.ts
export default defineConfig({
  ...
  proxy: proxy[REACT_APP_ENV],
  dynamicImport: {},
  esbuild: {}, // 就是我
});

image.png

之所以写这篇文章主要还是因为找的过程当中并没有快速的搜到类似问题的解决方案,所以就心血来潮写了。一方面是做个笔记也希望能帮到有需要的朋友。

结论:Terser 电脑配置不行的话可能会爆内存和CPU

参考链接: umijs.org/guide/boost… umijs.org/plugins/plu…