Блог

Главная - Вопросы по программированию - Как размер пакета влияет на производительность?

Как размер пакета влияет на производительность?

#javascript #performance #webpack #webpack-dev-server

#javascript #Производительность #webpack #webpack-dev-server

Вопрос:

Допустим, что конечный пакет, созданный с помощью webpack , составляет около ~ 15 МБ.
Помимо медленной загрузки в первый раз на сайте, есть ли какие-либо существенные проблемы с производительностью по сравнению, скажем, с пакетом объемом 500 КБ? (который был искажен или использовался.минимальные пакеты npm)

Комментарии:

1. Вы можете использовать инструменты разработчика в браузере для анализа производительности, это покажет вам, насколько сильно влияет ваш javascript. Откройте инструменты разработки, перейдите к Performance и Start profiling and reload the page . У вас будет отчет, а Scripting легенда — это время, затрачиваемое вашими скриптами на загрузку.

2. 15 Мб — это слишком много. Вы должны использовать асинхронный импорт в webpack, который уменьшит размер вашего пакета.

Ответ №1:

Последствия для производительности включают:

  • Время для передачи по сети. Особенно учитывайте медленные соединения с некоторыми мобильными устройствами. В зависимости от того, что вы делаете, возможно, ваша страница не будет интерактивной, пока она не загрузится.
  • Время синтаксического анализа JS. Современные движки JS быстры, но чем больше кода вы загружаете, тем больше браузер должен анализировать.
  • Время выполнения JS. Оптимально упаковывать только код, который вы ожидаете выполнить. Чем больше кода вы хотите выполнить, тем больше времени это займет. Опять же, возможно, ваша страница не будет интерактивной, пока большая часть этого не будет завершена, в зависимости от деталей.
  • Потребление памяти. Все занимает место: сам код, переменные времени выполнения, созданные элементы DOM и т. Д.

Важно использовать инструменты разработчика вашего любимого браузера для анализа влияния вашего кода. Обязательно удалите все JS, которые на самом деле не нужны вашему сайту.

Ответ №2:

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

15 МБ — это много JS-кода.

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

Вы можете узнать больше об этом здесь: https://web.dev/bootup-time /.