Верно ли я понимаю суть webpack, таск-раннеров, requirejs и модулей?

Question

[Алексей Николаев]

Доброго вечера.
Почитал про webpack - раньше никогда не использовал. Попутно почитал про связанные с ним темы (модули, RequireJS) и сделал некоторые выводы.

1) Webpack всего лишь система сборки, а не таск-раннер, и сравнивать их некорректно. Грубо говоря, webpack аналогичен готовому пакету плагинов для таск-раннера, плюс несколько уникальных фич, свойственных лишь ему. При этом, он сам является npm-пакетом, пусть и с cli, и может управляться через таск-раннер при необходимости (но таск-раннер не может управляться через систему сборки, ибо у нее просто нет полномочий на такое, и это бессмысленно). Именно в этом ключевое отличие: система сборки - это Вася (пусть и весьма умелый), а таск-раннер - топ-менеджер. Так?

2) Поскольку модуль по своей сути всего лишь паттерн, которому нужно следовать, то в результате, после сборки, у нас все равно получается один-два больших файла (в соответствии с правилами в конфиге). Иными словами, похожего результата я добьюсь варварским методом, склеивая файлы без всяких модулей через gulp (инкапсулируя содержимое при помощи объектов). Верно? Я понимаю, что модульность облегчает поддержку, масштабирование и сопровождение проектов, но важна суть.

3) Чтобы использовать модульный подход на клиенте, например, при помощи RequireJS, нужно его подключить, позволить ему отработать и засунуть в код страницы на лету нужные файлы. Возможно, именно поэтому именитые проекты, использующие все эти новомодные фичи, так яростно лагают в сравнении с обычными сайтами, где подключается простой минифицированный js килобайт на триста? И таким образом, мы автоматически откатываемся на пункт 2 к сборке модулей.

Насколько вы согласны с написанным выше? Какие аргументы против, если данные выводы неправильны?
Заранее спасибо.

Comments

[Станислав Макаров]

Вы на C/C++ разрабатывали? Я бы дал вам хорошую аналогию)

[Алексей Николаев]

Станислав Макаров: есть немного, для себя)

Answer 1

[Станислав Макаров]

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

В каком-то смысле да.

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

Не обязательно, тот же вебпак создаёт самостоятельный бандл. Всё необходимое будет внутри.

Сравнения со стеком C/C++:
- модули это единицы компиляции (compilation unit). Настоящих модулей в C++ мы никак не дождёмся, так что это пока лучшая аналогия :); модули, написанные на языке, отличном от целевого JS (например на TypeScript или ES2015) подлежат компиляции; JS, являющийся результатом компиляции похож на объектный файл;
- вебпак похож на линковщик, с той разницей, что плюсовый линкер собирает в бинарник только то, что ему дают, а вебпак наоборот, может запрашивать компиляцию модулей (для чего существует концепция загрузчиков - loaders). Представьте, если бы линковщик просил компилятор С++ скомпилить нужный файл. Так ведёт себя вебпак;
- выходные большие файлы - бандлы - это вроде готовых lib файлов или бинарников. В них напихано много скомпилированных модулей, и их можно либо слинковать с чем-то еще (если это библиотека), либо запустить (если это бандл для загрузки на HTML-страницу);
- как линковщик (пусть и с возможностью запроса нужного модуля) не заменяет make, так и вебпак не заменяет таск-раннеров.

Answer 2

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

Примерно да. Только с третьим пунктом я не согласен:

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

Какие именитые проекты лагают? twitter? gmail? гугл- и яндекс-карты? Гугл-документы? Ведь нет же, хотя там богатая и сложная функциональность. Лагает dirty и facebook, потому что обвешаны кривой рекламой по самое не могу. Вот всякие баннерные сети с кривыми картинками, видео и JS-ом, написанным в 1997 году и тормозят.

Comments

[Алексей Николаев]

Ну вот например, youtube. Он в целом хорош, но там есть интересный момент: хочешь поставить лайк видео, или загрузить уведомления, а кнопки не реагируют - функционал еще не загрузился. Приходится ждать...

Потом, hotmail. Это просто ад какой-то. Не знаю, что у них там используется, но тоже что-то современное.

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

Алексей Николаев: ну за hotmail не скажу, но вот gmail не тормозит же? Значит, дело-то в прямоте рук.

[sompylasar]

Алексей Николаев: Не загружается сразу то, что авторы приложения посчитали второстепенным по отношению к функциям, обеспечивающим первое впечатление. В youtube, например, это видеоплеер, который вне зависимости от системы сборки является большим и сложным модулем.