Сколько нужно npm-пакетов?

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

Сколько нужно npm-пакетов, чтобы через фреймворк вывести HelloWorld в обычном html в 2024?

Посмеялись, забыли и пошли дальше. Но только не я. Потому что вся разработка пронеслась у меня перед глазами и в этот момент пришло осознание, что прежде я просто устанавливал пакеты за пакетом для того, чтобы быстрее решить очередную задачку из Jira, не отдавая себе отчёт о том, сколько каждый пакет приносит с собой…

Короче, я решил измерить — сколько нам нужно npm-пакетов, чтобы вывести в обычном html-документе самый обычный «Hello, world!».

Ударим баянами по контенту!

Итак, в своём микро-исследовании я буду использовать React. На выходе нам нужно получить два файла — html и js. Стили мы использовать не будем.

Я решил начать со своего «базового» варианта, который иногда использую. Для того, чтобы сделать готовый бандл, нам понадобится:

• webpack и webpack-cli
• react и react-dom
• не забываем babel
• плагин для очистки папочки со сборкой
• — плагин для привязки нашего js к html

Итого у нас получилась вот такая строчка для установки:

npm i -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin html-webpack-plugin

npm i react react-dom

Мы — люди уверенные и будем сразу билдить, поэтому dev-серверы и прочую такую штуку использовать не станем.

Конфигурируем самый простой webpack и запускаем npm run build. Вуаля, всё готово! Нужная нам надпись выводится, всё хорошо.

Нам понадобилось установить 10 пакетов. Но есть нюанс — там подъехал целый вагон зависимостей, посмотрите в папку node_modules.

Итого у нас получилось 353 пакета. Ну норм, что =)

Ещё ради интереса попробую повторить то же самое, но с помощью сборщика Vite.

Там нам понадобятся немного другие зависимости (и их будет очень сильно меньше), но суть примерно одна и та же:

npm i -D vite @vitejs/plugin-react

npm i react react-dom

После установки получилось 75 пакетов — уже лучше.

Если сравнивать веса папок node_modules, то получается 52 мегабайта в первом случае и 38 мегабайт во втором.

Много ли это для того, чтобы просто вывести с помощью js на html-странице «Hello World» — вопрос риторический.

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

В конце могу повторить только очевидную истину — если есть возможность не усложнять — не усложняйте.

---

P.S.: А вариант здорового человека выглядит вообще вот так:

Вы скажете — а где здесь вообще javascript? А он здесь и не нужен.