
Сколько нужно 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? А он здесь и не нужен.