Идеи для объединения ресурсов DLL без установки ссылочных модулей

Question

Итак, мы работаем над генератором сайтов, используя React и Webpack. Инструмент поставляется с дизайнером, который позволяет добавлять сторонние плагины npm и использовать их в фрагментах кода React.

Конечный пользователь может вносить изменения в различные шаблоны сайтов, а затем инструмент компилирует пакет сайтов на наших серверах с помощью веб-пакета и развертывает их на выбранном пользователем облачном хосте. Пользователь также может предварительно просмотреть изменения сайта на наших серверах перед его развертыванием.

До сих пор нашей стратегией было создание файла package.json и webpack.config для каждого сайта, а затем запуск веб-пакета. Это работает, но очень медленно. Теперь наш план заключается в использовании DllPlugin а также DllReferencePlugin предварительно создать dll-скрипты для тех пакетов, которые мы добавляем в базовый package.json кода шаблона сайта. Это должно сократить время сборки сайта, согласно нашим экспериментам.

Однако есть еще один сценарий, когда эта стратегия не работает... Конечный пользователь может добавить пакеты npm по своему выбору на свой сайт и ссылаться на них в коде сайта. В настоящее время мы должны выполнить два шага с пользовательскими пакетами -

1. Мы должны yarn install пакеты (конечно!).
2. Нам нужно собрать их все в dll, чтобы последующие сборки были быстрыми.

Мы заметили, что большую часть времени проводят в #1, иногда несколько минут, пока yarn устанавливает пакеты. Тогда потребуется еще некоторое время, чтобы закончить #2. Мы экспериментировали с сокращением # 2, используя наш собственный экземпляр сервиса webpack-dll, чтобы переложить на него генерацию dll и загрузить манифест в настройку webpack сайта. Это также имеет преимущество повторного использования кэшированных результатов для новых запросов.

Таким образом, теоретически нам не нужно устанавливать пользовательские пакеты, потому что они были предварительно собраны в dll, тем самым экономя нам много времени на этапе объединения. Однако после некоторых экспериментов с работой DllPlugin и DllReferencePlugin становится очевидным, что даже когда у нас есть файлы манифеста и dll для пакетов, webpack не будет связывать их, если они не установлены.

Я предполагаю, что, поскольку dll-пакеты не хранят информацию о точках входа в пакетные пакеты, webpack должен проанализировать установленный пакет. package.json файл, ищите main (или другие точки входа), затем проверьте, находятся ли они в манифесте dll или нет. По сути это означает, что предварительно установленные пакеты также должны быть установлены первыми.

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

Спасибо!

Answer 1

Это очень интересный вопрос, и его можно решить разными способами, каждый со своими компромиссами.

Сервис dll, который мы используем (webpack-dll-prod.herokuapp.com) с CodeSandbox, также используется WebpackBin, который использует его на стороне сервера (с плагином dll). Вы можете найти источник здесь: https://github.com/christianalfoni/webpack-bin. Недостатком подхода webpack-dll является то, что мы добавляем все возможные записи вручную, что может сделать пакеты очень большими и в некоторых редких случаях их невозможно объединить.

Я пишу статью Medium о различных способах решения этой проблемы, но это еще не сделано, но вы можете посмотреть черновик здесь: https://medium.com/@ives.v.h/how-we-make-npm-packages-work-in-the-browser-6ce16aa4cee6. Может быть, это дает вдохновение в том, как к этому подойти.