javascript - webpack-obfuscator打包卡住如何解决？

Question

webpack-obfuscator 打包卡住了

如何解决？

Answer 1

之前用gulp做过代码混淆,可以参考下

let secretKey = Number((((Math.random() * 100) / 100).toFixed(2)));
let htmlmin = require('gulp-html-minifier-terser');
let gulp = require('gulp');
let gulpJavaScriptObfuscator = require('gulp-javascript-obfuscator');
let cleanCSS = require('gulp-clean-css');
let sourcemaps = require('gulp-sourcemaps');


console.log('%c密钥:' + secretKey, 'color: #2563fc');

gulp.task('one', function (cb) {
  gulp.src('tools' + '/**/*.js')
    .pipe(gulpJavaScriptObfuscator({
      compact: true,
      selfDefending: true,
      // Type: number Default: 0.75 Min: 0 Max: 1
      controlFlowFlatteningThreshold: secretKey,
      deadCodeInjectionThreshold: 0.7
    }))
    .pipe(gulp.dest('dist'));
  cb();
});

gulp.task('two', function (cb) {
  gulp.src('tools' + '/**/*.html')
    .pipe(htmlmin({
      removeComments: true,
      collapseWhitespace: true,
      collapseBooleanAttributes: true,
      removeEmptyAttributes: true,
      removeScriptTypeAttributes: true,
      removeStyleLinkTypeAttributes: true,
      minifyJS: true,
      minifyCSS: true,
      minifyURLs: true
    }))

    .pipe(gulp.dest('dist'));
  cb();
});


gulp.task('three', function (cb) {
  gulp.src('tools' + '/**/*.css')
    .pipe(cleanCSS({
      compatibility: 'ie8',
      level: 2,
      debug: true
    }))
    .pipe(sourcemaps.init())
    // .pipe(sourcemaps.write())
    .pipe(gulp.dest('dist'));
  cb();
});

gulp.task('default', gulp.series(['one', 'two', 'three']));

压缩前代码

let a = 1;
let b = 2;

console.log(a + b);

压缩后代码

const _0xf15c04 = _0x187e;
(function (_0x396a13, _0x5ad26c) {
  const _0x28d0c2 = _0x187e,
    _0x5a47c5 = _0x396a13();
  while (!![]) {
    try {
      const _0x2f552b =
        parseInt(_0x28d0c2(0x1ad)) / 0x1 +
        (-parseInt(_0x28d0c2(0x1a5)) / 0x2) *
          (parseInt(_0x28d0c2(0x1a2)) / 0x3) +
        -parseInt(_0x28d0c2(0x1aa)) / 0x4 +
        -parseInt(_0x28d0c2(0x1af)) / 0x5 +
        parseInt(_0x28d0c2(0x1a9)) / 0x6 +
        -parseInt(_0x28d0c2(0x1a6)) / 0x7 +
        (-parseInt(_0x28d0c2(0x1ac)) / 0x8) *
          (-parseInt(_0x28d0c2(0x1a3)) / 0x9);
      if (_0x2f552b === _0x5ad26c) break;
      else _0x5a47c5['push'](_0x5a47c5['shift']());
    } catch (_0x105ff3) {
      _0x5a47c5['push'](_0x5a47c5['shift']());
    }
  }
})(_0x9158, 0xaab2b);
const _0xfb2da3 = (function () {
    let _0x15a21a = !![];
    return function (_0x302b0c, _0x2137c2) {
      const _0x15f07e = _0x15a21a
        ? function () {
            if (_0x2137c2) {
              const _0x4441b7 = _0x2137c2['apply'](_0x302b0c, arguments);
              return (_0x2137c2 = null), _0x4441b7;
            }
          }
        : function () {};
      return (_0x15a21a = ![]), _0x15f07e;
    };
  })(),
  _0x1eb508 = _0xfb2da3(this, function () {
    const _0x2b4d0e = _0x187e;
    return _0x1eb508[_0x2b4d0e(0x1ae)]()
      [_0x2b4d0e(0x1a8)](_0x2b4d0e(0x1a7))
      [_0x2b4d0e(0x1ae)]()
      [_0x2b4d0e(0x1ab)](_0x1eb508)
      ['search'](_0x2b4d0e(0x1a7));
  });
function _0x187e(_0x14704a, _0x1028c8) {
  const _0xd77a5a = _0x9158();
  return (
    (_0x187e = function (_0x1eb508, _0xfb2da3) {
      _0x1eb508 = _0x1eb508 - 0x1a2;
      let _0x915831 = _0xd77a5a[_0x1eb508];
      return _0x915831;
    }),
    _0x187e(_0x14704a, _0x1028c8)
  );
}
_0x1eb508();
let a = 0x1,
  b = 0x2;
console[_0xf15c04(0x1a4)](a + b);
function _0x9158() {
  const _0x51cf10 = [
    'log',
    '40270otQfWW',
    '7613935CJdSHe',
    '(((.+)+)+)+$',
    'search',
    '3769260eAQSJE',
    '1788176teHVhY',
    'constructor',
    '31237352YDnhXX',
    '99314RJjfze',
    'toString',
    '5850150CLcteH',
    '183hKyBuy',
    '9MSrNQx',
  ];
  _0x9158 = function () {
    return _0x51cf10;
  };
  return _0x9158();
}

Answer 2

当 webpack-obfuscator 打包卡住时，可能的原因有很多。以下是一些建议的解决步骤：

1. 检查日志：
   首先，查看 webpack 输出的日志。有时候，webpack 会给出一些关于为什么它卡住的线索。
2. 更新依赖：
   确保你的 webpack、webpack-cli、webpack-obfuscator 和其他相关插件和加载器都是最新版本。过时的依赖可能会导致问题。
3. 减少混淆设置：
   尝试减少 webpack-obfuscator 的混淆设置，看看是否是某些特定的混淆选项导致了问题。逐步增加混淆级别，直到找到问题的根源。
4. 分析构建时间：
   使用 --profile 标志运行 webpack，以获取有关构建时间的更多信息。这可以帮助你找出哪些模块或插件在构建过程中花费了最多的时间。
5. 减少入口点：
   如果你有多个入口点，尝试只使用一个入口点，看看是否还会出现问题。这有助于确定是否是某个特定的入口点导致了问题。
6. 检查内存使用情况：
   如果 webpack 消耗了过多的内存，它可能会变得非常慢或卡住。你可以使用操作系统的任务管理器或资源监视器来检查 webpack 的内存使用情况。如果内存使用量很高，尝试增加分配给 webpack 的内存量，或者优化你的代码以减少内存使用。
7. 使用其他混淆工具：
   如果 webpack-obfuscator 仍然无法正常工作，你可以考虑使用其他混淆工具，如 javascript-obfuscator。
8. 创建最小可复现代码：
   创建一个只包含基本 webpack 配置和 webpack-obfuscator 的最小可复现代码。这有助于你确定问题是否与你的特定代码或配置有关。
9. 搜索和报告问题：
   如果上述步骤都无法解决问题，你可以搜索相关的 GitHub 问题或论坛帖子，看看是否有人遇到了类似的问题。如果找不到解决方案，你可以考虑在 webpack-obfuscator 的 GitHub 仓库中报告一个问题。
10. 其他优化：
    检查 webpack 的其他优化选项，如代码分割、懒加载、DLL 插件等，以确保你的构建过程尽可能高效。

请注意，由于我无法直接查看你的具体代码或配置，这些建议可能需要根据你的具体情况进行调整。