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

Question

[youngmysteriouslight]

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

Допустим, разрабатывается приложение с большой (>> 1Мб) кодовой базой на JS. В этот код есть несколько точек входа. Это означает, что одни страницы сайта или одни веб-приложения этого проекта будут подгружать один набор модулей, другие — другой набор. При этом каждый из этих сайтов/страниц/веб-приложений может потенциально запросить любой модуль по необходимости (существенно зависит от действий пользователя).

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

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

Вопрос №1. Достаточно ли RequireJS/AMD для решения поставленной задачи.

Мои соображения

По описанию, именно ради асинхронной загрузки модулей он и создавался.
Впрочем, require.js содержит один недостаток, который делает его в текущем виде непригодным для решения первоначальной задачи. Если по результатам обсуждения окажется, что RequireJS является тем решением, которое мне нужно, я создам отдельный вопрос про этот недостаток.

Вопрос №2. Есть ли информация о чужом опыте: кто делал аналогичное, какие были сложности, какие подходы, решения, нюансы?

Вопрос №3. Может случиться конфликт зависимостей версий одного модуля у двух разных зависимых модулей. Обычно в таких случаях конфликты разрешаются статически, при помощи системы контроля версий и менеджера пакетов, таким образом к клиенту попадает только одна версия модуля.
Разрешение конфликтов в run-time, то есть загрузка двух версий одного модуля и разделение пространства имён, является ли существенно усложняющим фактором, то есть нужен ли принципиально другой инструмент, чем тот, который решает исходно поставленную задачу?

Благодарю за внимание.

Answer 1

[Константин Китманов]

requirejs умеет только в amd, то есть с commonjs-модулями (а в npm подавляющее большинство такие) и тем более es6 ничего не получится. В общем и целом, брать его сейчас смысла нет.

webpack + code splitting ответ на ваш вопрос.

Comments

[Антон Швец]

каким образом в webpack реализовать подгрузку модуля по требованию? script вставлять с нужным чанком?

[Константин Китманов]

Антон, ну наверное где-то внутри это примерно так и происходит, я не вникал. Но со стороны программиста это import('./module/on/demand').then(...)
Некоторые фреймворки вообще позволяют грузить роуты лениво по требованию.

[Антон Швец]

Константин Китманов, ну вот этот промис import это кто предоставляет?

[Константин Китманов]

Антон, бандлер (например, webpack).

[Антон Швец]

Константин Китманов, это после

new webpack.optimize.CommonsChunkPlugin({
  children: true,
  async: true,
});

я правильно понял?

[Константин Китманов]

Антон, нет, никак не связано. Делаете import() -- webpack выделяет то, что зимпорчено динамически, в отдельный файл.

CommonChunks это когда у вас есть несколько entry, и вы хотите общий код загружать только один раз, когда юзер переходит со страницы на страницу.

[Антон Швец]

Константин Китманов, а как указать что именно я хочу импортировать? импорт одного js-файла из src? И он сам его отделит от других?
Обычные то es6 импорты все склеиваются в один блок.

[Константин Китманов]

Антон, давайте вы почитаете официальную документацию с примерами, чтобы не играть в испорченный телефон?:)
https://webpack.js.org/guides/code-splitting/#dyna...

[Антон Швец]

Константин Китманов, да, есть такая мысль.

[Константин Китманов]

Антон, документация вебпака не самое легкое чтиво, но основная мысль такова: мы делаем import(), а вебпак делает всё остальное. Там зачем-то упоминается HtmlWebpackPlugin и /* webpackChunkName: ... */, но вообще-то все работает без этого.

[youngmysteriouslight]

Константин Китманов, прокомментируйте, пожалуйста, мой третий вопрос:
ставилась ли когда-либо задача контроля версий зависимостей в webpack?

[Константин Китманов]

youngmysteriouslight, нет — этим занимается менеджер пакетов. Однако можно подтюнить результат с помощью опции resolve.alias.

[Alexander Litvinenko]

могу свой скайп дать, я свободно конфигурирую вебпак.

Answer 2

[Alexander Litvinenko]

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

Comments

[youngmysteriouslight]

Почему же он плох? Вон человек ( Константин Китманов ) уже предложил его и показал, как адаптировать под задачу.
Лично я курю доки. Если есть конкретные полезные ссылки, кроме вышеприведённых, прошу.