Если вы работали веб-разработчиком внешнего или внутреннего интерфейса, вы слышали о размерах пакетов.

Насколько важен размер пакета?

При условии, что разработчики, работающие на Facebook, превосходны. Если они используют инструменты для измерения размера пакета, это должно быть важно. Чтобы убедиться, что они заботятся о размере пакета, мы можем посетить их репозиторий GitHub.

На изображении ниже показан запрос на включение от Дэна Абрамова, ведущего разработчика ReactJS.

Size-bot прокомментировал изменение размера пакета.

На изображении мы видим комментарий size-bot об изменении размера пакета. Поскольку Facebook использует инструмент для получения уведомлений о любых крупных изменениях размера пакета, можно сделать вывод, что это, вероятно, важно.

Почему я упомянул Webpack?

Webpack — это инструмент, который в основном используется с ReactJS для разработки клиентских приложений. Плагин Fast Refresh показывает пример для Webpack. Приложение Create-React-App использует Webpack под капотом. Я использовал Webpack, потому что он часто упоминается в документации ReactJS и других источниках.

Я бы сказал, что это довольно хорошо принято и распространено.

С другой стороны, Rollup используется для создания библиотеки ReactJS, и Webpack — не единственный выбор.

Выбирайте правильный инструмент для правильной работы.

От чего зависит размер пакета?

Вы когда-нибудь скачивали фильм? Это был размер около 1 ГБ, и вам пришлось ждать около получаса, прежде чем он завершит загрузку?

Представьте, что у вас очень медленныйинтернет, и вы пытаетесь открыть веб-страницу. Медленный интернет 0,1 мб/с.

Обратите внимание, что Мбит/с и Мбит/с — это НЕ одно и то же. Чтобы получить Мбит/с из Мбит/с, нужно разделить Мбит/с на 8, в результате получится Мбит/с.

Скорость интернета 80 Мбит/с равна 10 Мбит/с. Вы всегда должны знать МБ/с. Если вы знаете МБ/с, легко оценить скорость загрузки 1 ГБ.

При скорости интернета 0,1 МБ/с мы получаем доступ к веб-странице, которая должна загрузить пакет JavaScript объемом 0,4 МБ. Пользователь должен ждать 4 секунды, чтобы загрузить код, а также чтобы браузер проанализировал HTML, CSS и JavaScript.

Это время ожидания, чтобы увидеть что-то на экране, заставит пользователя уйти. Вы когда-нибудь покидали страницу, потому что она ничего не показывала вам в течение нескольких секунд? Могу поспорить, что ты это сделал, потому что это сделал я.

Что такое пакет JavaScript?

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

Когда вы пойдете в магазин на новый год и попросите какой-нибудь модный набор, вам могут задать несколько вопросов. Ваш заказ будет сформирован на основе ваших ответов.

То же самое с пакетом JavaScript. Webpack выполнит эту работу и упакует все, что нужно нашему коду для запуска.

Каков размер пакета JavaScript?

Я бы сказал, что это примерно количество символов. Это можно проверить в Google, если вы ищете «калькулятор размера пакета javascript» и находите его.

Кроме того, вы можете перейти на bundle.js.org и нажать Сборка. Функция печати JavaScript была включена, и вы можете видеть размер вывода.

Простыми словами, размер пакета JavaScript означает количество символов. Символы — это минифицированные имена переменных, точки с запятой, имена функций и т. д. Все, что можно и нужно минифицировать, будет минифицировано.

Вывод

Со всей исходной информацией о том, что происходит с нашим кодом, можно с уверенностью сказать, что размер пакета зависит от количества символов.

Количество символов зависит от того, что выводит Webpack.

Слишком много информации для такого простого утверждения :)