Рубрики
Без рубрики

Зачем заменить реагировать при пакете?

Привет! Я Бен Gre Greeier – я инженер в Microsoft работает над созданием удивительных проектов с открытым исходным кодом Wi … Теги с JavaScript, реагируют.

Привет! Я Бен Greeier – я инженер в Microsoft работает над созданием удивительных проектов с открытым исходным кодом с нашими партнерами. Мы добираемся до Создать программное обеспечение Чтобы помочь решить действительно сложные проблемы, а Поделитесь нашими историями Как мы идем. Это означает, что, как часть моей работы, я могу играть с большим количеством новых технологий, узнайте, как их использовать, и помочь другим людям делать то же самое.

В последнее время я работал над приложением браузера под названием Наложенные – Это помогает вещателям взаимодействовать со своими зрителями по новым способам, используя накладки. Под капотом наложены наложенные по пользовательскими модулями (используя ESM ), который экспортируют компоненты реагирования. Вы можете узнать больше об этом, здесь – Но это не то, о чем этот пост.

Недавно я расследую замену реагирования в подключенный код для браузера. Друг спросил меня, почему мне нужно было сделать это – не следует ли Bundler сделать правильную вещь? Этот пост о моем специфическом использовании Case Где-в Bundler не может сделать правильную вещь, потому что это не знает о том, что происходит.

Специфический биндер, который я использую, это свернуть – Это очень хорошо при создании ESM связки для современного веб Отказ Когда пробел, это Дерево-качает Ваш код, присваивать общие зависимости, поскольку он идет. Посмотрите на этот пример:

# module-1.js
import React from 'react'

export default React.createElement("p", undefined, "hello module-1");

# module-2.js
import React from 'react'

export default React.createElement("p", undefined, "hello module-2");

# app-entrypoint.js
import React from 'react'
import moduleOne from './module-1'
import moduleTwo from './module-2'

React.createElement("div", undefined, [moduleOne, moduleTwo]);

Не волнуйтесь слишком много о самом коде, мы больше заинтересованы в Импорт заявления и их последствия. Если вы должны были пройти через этот код, как переводчик, вы, вероятно, сделаете это:

  • Импорт реагировать (в App-entrentpoint.js область действия)
  • Модуль импорта 1 (в app-encentpoint.js Область применения)
  • Импорт реагировать (в Module-1.js Область применения)
  • Модуль импорта 2 (в app-encentpoint.js Область применения)
  • Импорт реагировать (в Module-2.js Область применения)

Как вы можете видеть, вы пытаетесь получить реагирование три раза! Конечно, многие JavaScript Runtimes (например, узел, например) используют Кэш модуля Для предотвращения «на самом деле» загрузка реагирует много раз, но к моему знанию это не возможно в браузере – поэтому ваш переводчик должен оценить содержимое реагирования три раза. Это где объединение (с прицелом-поднятием) помогает нам.

Роллап может статически проанализировать вышеуказанный код и осознать, что многие вещи потребуют реагировать. Следовательно, когда он создает пакет (напомнить, что пучок содержит все зависимости и авторский источник), он может включать в себя реагирование один раз и эффективно проходить «ссылки» для него во всех случаях. Другими словами, хостинг прицела дает нам:

  • Импорт реагировать (в изолированную область, давайте назовем это в комплекте область действия)
  • Справка реагирует от в комплекте Область (в app-encentpoint.js Область)
  • Модуль импорта 1 (в app-encentpoint.js Область применения)
  • Справка реагирует от в комплекте Область (в module-1.js область)
  • Модуль импорта 2 (в app-encentpoint.js Область применения)
  • Справка реагирует от в комплекте Область (в module-2.js область применения)

В результате включены только один экземпляр реагирования, то есть наш размер исходного источника меньше (только одна копия реагирования, а не три). Это хорошая новость, потому что это означает, что наш браузер должен загружать и интерпретировать меньше кода. И это все поддержано «бесплатно» с рулоном – как великолепно!

Теперь мы можем поговорить о том, почему я Исследуя замена этих импорта для Наложенные Отказ Наложение имеет архитектуру, которая позволяет сторонним разработчикам создавать плагины. Это отлично подходит для расширяемости, но плохое для объединения.

Напомним, что в приведенном выше примере мы используем статический анализ, чтобы определить, что может быть подъемным путем. Если свернут, не может определить, что загружается, когда он работает (во время фазы «сборки» наложенного), он не может выбрать только импортную копию. Это представляет проблему с архитектурой плагина – если плагин зависит от реакции, и «встроен» с использованием отдельного прогона свертания (в качестве плагина является отдельным проектом, поддерживаемым разработчиком третьих частей), что не будет знать, что Это связано за наложение (и, следовательно, уже будет копию реагирования) и будет включать копию. Это в конечном итоге приводит к медленному опыту плагинов, потому что все они содержат (и загружать/интерпретировать) Реагируйте, хотя у нас уже есть нагрузка на экземпляр.

Для обработки этой проблемы мы можем написать плагин Rollup (или использовать существующий), чтобы заменить реагировать в пучок плагина, с небольшим «прословным», которые просто ссылки реагируют в родительской области. Мы можем быть уверены, что родительская область будет содержать реакцию, поскольку плагины предназначены только для нагрузки на осложненные – они не будут работать нигде.

Возьмите пример код выше. Если мы введем следующее в качестве модуля «Шим»:

# react-shim.js
export default globalThis.React

Разблокировать наш код с помощью плагина, который переписывает Импорт реагирует с «Реагирование» к Импорт реагирует от «/reaCt-shim » и разделить Модуль-1.js в его стороннем плагине (с собственной сборкой) мы в конечном итоге со следующим потоком:

Наложенное приложение Build:

  • Импорт реагировать (в изолированную область, давайте назовем это в комплекте область действия)
  • Справка реагирует от в комплекте (в app-encentpoint.js Область применения)
  • Модуль импорта 2 (в app-encentpoint.js Область применения)
  • Справка реагирует от в комплекте Область (в module-2.js область применения)

Модуль 1 Build:

  • Импорт реагировать от ./react-shim.
  • Настроить глобальную ссылку (реакция на ссылка с в комплекте выше)
  • Справка реагирует от в комплекте (над)
  • Модуль импорта 1 (в app-encentpoint.js Область применения)
  • Справка реагирует от в комплекте Область охвата (выше, в Module-1.js Область применения)

Заменив реакцию с явной ссылкой в «Модуль 1 сборке», мы можем удалить реагирование с пакета плагина, при этом все еще загружая правильный экземпляр реагирования во время выполнения, от родительской (наложенной) среды.

Фу! Это быстро сложно. Надеемся, что это может помочь уточнить, почему намотки не сможет использовать «свободный» подъемное подъемное положение реагирования в корпусе плагина. Если это все еще не совсем понятно, дайте мне знать в комментариях. Возможно, некоторые изменения будут необходимы.

Спасибо за прочтение,

💙🌈 -бен

P.S: Фото Сельский исследователь на Бессмысленно

Оригинал: “https://dev.to/bengreenier/why-replace-react-when-bundling-1e23”

Читайте ещё по теме: