React.js лучший рабочий процесс для нескольких независимых модулей

Question

Мне просто интересно, скажем, у меня уже есть сайт.Если я хотел бы добавить в него несколько реагирующих модулей, скажем, MODULE-A, MODULE-B, MODULE-C.В некоторых ситуациях MODULE-A и MODULE-B находятся на одной странице.Все модули совместно используют react, axios, но также имеют свои собственные зависимости.что на самом деле лучший подход для подготовки сборки к нему ??Мне на самом деле нравится create-react-app.Есть ли какой-нибудь умный способ заставить модули загружать только необходимые зависимости?поэтому я могу включить их по отдельности, и если оба они существуют на странице, они не будут клонировать зависимость в коде.

Я хочу избежать ситуации, когда у меня есть 20 небольших модулей, и все они используют реакцию внутри встроенного кода.Таким образом, 60% кода будут дублироваться зависимостями.

Answer 1

У вас не так много вариантов

Вы можете использовать разделение кода, как указано здесь https://webpack.js.org/guides/code-splitting/, так что допустим, у вас есть

ModuleA -> [depA, depB, depC]
ModuleB -> [depA]
ModuleC -> [depC]

теперь вы можете код разделить на 4 файла JavaScript, которые будут

moduleAbundle.js
mobuleBbundle.js
mobuleCbundle.js
vendors.js

vedors будет конкатенацией depA, depB, depC, но, конечно, когда вы загрузите moduleB и ModuleC на 1 странице, вы также будете загружать depB, так как он включен в vendors.js, вам нужно будет подумать и поиграть с оркестровкой этого.

Но что вы на самом деле можете сделать, вы можете вспомнить наиболее важные части и большинство общих дел и перечислить их, скажем, все ваши пакеты используют react, react-dom, lodash, которые вы создадите для vendors только с этими библиотеками любая другая библиотека будет связана с самим модулем, и да, вы не можете на 100% создать «двойную загрузку», но если вы удвоите загрузку библиотеки, которая имеет несколько кБ, то это хорошо, когда она больше, поставьте ее с vendors.js

или у вас может быть какой-то сложный механизм на стороне сервера, когда вы будете точно указывать и организовывать загруженные зависимости, потому что вы знаете, какие модули отображаются и каковы их зависимости. Но нет никаких способов on-the-fly связывания и отправки только необходимых и запрошенных зависимостей, это будет очень медленно делать это на лету, и вам нужно сбросить быстрый ответ на браузер, не замедляя его с дополнительным процессом компиляции , Так что, скорее всего, ручная работа по правильной подготовке и разбиению кода на логические порции имеет смысл.