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

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

0 голосов
/ 25 апреля 2018

Я заметил некоторый повторяющийся код, который существует между модулями в моей сборке.Я хотел бы оптимизировать свой 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);

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

1 Ответ

0 голосов
/ 25 апреля 2018

Мне удалось выполнить эту работу, используя хук компиляции 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;
...