Как правильно использовать ReplaceSource веб-пакета для оптимизации некоторых модулей?

Question

Я заметил некоторый дублирующий код, который существует между модулями в моей сборке. Я хотел бы оптимизировать свой JavaScript, написав плагин для веб-пакета, чтобы найти экземпляры кода X и заменить его упрощенной версией кода Y.

Я приготовил простой плагин для веб-пакета, который, кажется, близок, но он не совсем делает то, что я хочу. Там не так много документации о таких вещах, как правильное использование веб-пакетов ReplaceSourceили даже какие жизненные циклы нужно использовать для такого рода операций. Итак, то, что я имею здесь, в основном связано с чтением исходного кода веб-пакета и поиском в GitHub.

const { ReplaceSource } = require('webpack-sources');

const codeMapEntries = Object.entries({
  'const from = "complicated code from example";': 'const from = somethingSimpler;',
});

class ReplaceCodePlugin {
  apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
      compilation.plugin('optimize-modules', (modules) => {
        modules.forEach((module) => {
          if (module._source && module._source._value) {
            let source;

            codeMapEntries.forEach(([fromCode, toCode]) => {
              const startPos = module._source._value.indexOf(fromCode);
              if (startPos !== -1) {
                if (!source) {
                  source = new ReplaceSource(module._source);
                }

                source.replace(
                  startPos,
                  startPos + fromCode.length - 1,
                  toCode
                );
              }
            });

            if (source) {
              module._source = source;
            }
          }
        });
      });
    });
  }
}

module.exports = ReplaceCodePlugin;

Похоже, это работает для некоторых простых случаев, но здесь что-то не так, и это приводит к странным путаницам в коде, что приводит к тому, что наш минификатор начинает жаловаться так:

SyntaxError: Unexpected token keyword «if», expected punc «,»
  3417 |   }, {
  3418 |     key: 'componentWillUnmount',
> 3419 |     value: ffalse  if (!Waypoint.getWindow()) {
       |                   ^
  3420 |           return;
  3421 |         }
  3422 | 

Что заставляет меня верить, что я не использую ReplaceSource должным образом.

Я также заметил некоторый код, подобный следующему, который кажется очень странным:

var ___webpack_require__r"Jmof"= require('some-package');

var _somePackage2 = _interopRequir__webpack_require__t"yu5W"kage);

Я также даже не уверен, что это правильный подход, и я открыт для предложений по альтернативным решениям.

Answer 1

Я смог сделать эту работу, используя хук компиляции optimize-chunk-assets вместо хука компиляции optimize-modules. Однако я не очень понимаю, почему один работает, а другой нет. Для справки, вот рабочая версия моего плагина:

const { ReplaceSource } = require('webpack-sources');

const codeMapEntries = Object.entries({
  'const from = "complicated code from example";': 'const from = somethingSimpler;',
});

class ReplaceCodePlugin {
  apply(compiler) {
    compiler.plugin('compilation', (compilation) => {
      compilation.plugin('optimize-chunk-assets', (chunks, callback) => {
        function getAllIndices(str, searchStr) {
          let i = -1;
          const indices = [];
          while ((i = str.indexOf(searchStr, i + 1)) !== -1) {
            indices.push(i);
          }
          return indices;
        }

        chunks.forEach((chunk) => {
          chunk.files.forEach((file) => {
            let source;
            const originalSource = compilation.assets[file];

            codeMapEntries.forEach(([fromCode, toCode]) => {
              const indices = getAllIndices(originalSource.source(), fromCode);
              if (!indices.length) {
                return;
              }

              if (!source) {
                source = new ReplaceSource(originalSource);
              }

              indices.forEach((startPos) => {
                const endPos = startPos + fromCode.length - 1;
                source.replace(startPos, endPos, toCode);
              });
            });

            if (source) {
              // eslint-disable-next-line no-param-reassign
              compilation.assets[file] = source;
            }

            callback();
          });
        });
      });
    });
  }
}

module.exports = ReplaceCodePlugin;