Как удаляются проверки process.env.NODE_ENV из производственных сборок ReactJS? - PullRequest
Новая
       30

Как удаляются проверки process.env.NODE_ENV из производственных сборок ReactJS?

0 голосов
/ 09 мая 2019

Я знаю, что ReactJS конвертирует __DEV__ в "production" !== process.env.NODE_ENV - вот так .Я где-то видел, что он преобразуется непосредственно в логическое значение, в зависимости от среды, но это еще один запутанный момент.

Мне было интересно, однако, какой конкретный babel-плагин / процесс / пакеты на самом деле удаляет это условие из производственного React (react.min.js), потому что в этом файле нет таких условий.

Насколько я понимаю, это двухэтапный процесс:

  1. с использованием плагина Babel, преобразование предупреждений и инвариантных вызовов в if ("production" !== process.env.NODE_ENV) вызовы
  2. удалениевсе вышеперечисленные условия (или просто его истинная ветвь?) в производственной сборке при минимизации

Как / где реализована последняя?

Ответы [ 2 ]

1 голос
/ 10 мая 2019

ReactJS использует Webpack для объединения своего производственного кода.
В Webpack есть плагин под названием DefinePlugin , который ReactJS использует . Этот плагин заменяет буквальные значения в коде, значениями, которыми вы можете управлять. Очень похоже на встраивание компилятора.

Либо я не понимаю название этого плагина, либо это просто неудачный выбор. В моем исследовании, пытаясь выяснить, как ReactJS очищает свой производственный код, я не раз пропускал вызов new webpack.DefinePlugin(). Кроме того, мое отсутствие опыта работы с Webpack не помогло.

Как уже упоминалось на странице плагина это многоэтапный процесс:

1. Оригинальный код : 

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

2. Встраивание осуществляется с помощью плагина Define : 

if (!true) {
  console.log('Debug info');
}
if (true) {
  console.log('Production log');
}

3. Шаг минификации и окончательный результат 

console.log('Production log');

Этап минимизации / оптимизации выполняется с помощью инструмента Terser , который представляет собой Webpack с использованием . Terser выглядит как форк UglifyJS , и он тоже имеет возможность удалять мертвый код .

Итак, это:

  1. Сборка ReactJS
  2. React настраивает Webpack с DefinePlugin process.env.NODE_ENV = 'production'
  3. Вкладка веб-пакета, сделанная DefinePlugin
  4. Оптимизация веб-пакетов
  5. Веб-плагин Terser
  6. Terser окончательно удаляет мертвый код

Я хотел бы поблагодарить @romellem за то, что он направил меня в правильном направлении через эти джунгли.

PS: Уважаемые будущие читатели, я написал это 10 мая 2019 года. Мои выводы, вероятно, скоро устареют.

1 голос
/ 10 мая 2019

Код удаляется, когда JS увеличивается (минимизируется).

UglifyJS2 имеет опцию dead_code, что " remove [s]недоступный код."

Что касается того, как это работает, логика здесь довольно сложная, но отправной точкой была бы eliminate_dead_code функция Uglify .

...