#reactjs #performance #npm #webpack
#reactjs #Производительность #npm #webpack
Вопрос:
Я хочу добавить карусель изображений на страницу профиля и разрешить пользователю просматривать изображения в полноэкранном режиме благодаря модальному. Это означает, если я не ошибаюсь, что карусель будет импортирована дважды: один раз в компоненте профиля, а другой поверх него при открытии модального.
Это тяжелый процесс, и я боюсь проблем с производительностью. Я думал о создании собственной карусели, но уже есть много пакетов, которые отлично справляются с жестами рук на мобильных устройствах и т. Д. Однако их вес иногда ужасен.
Например, библиотека react-awesome-slider — которая кажется идеальной — весит 666 КБ! Однако в Bundlephobia предполагается, что он имеет только 36,2 КБ или 8,2 КБ в сжатом виде. Кто прав?
Будет ли вес react-awesome-slider 2*666kb 2*36.2kb или 2*8.2kb в моем последнем пакете? Какой максимальный вес рекомендуется для поддержания высокого уровня текучести / производительности?
Комментарии:
1. Независимо от того, сколько раз или куда вы импортируете библиотеку, она будет включена только один раз, поэтому никогда 2 раза. Что касается связанных весов, я предполагаю, что 36 КБ — это размер уменьшенной библиотеки, а 8,2 кб — это уменьшенная версия gzipped. Таким образом, 8,2 КБ (плюс заголовки и прочее) загружаются по проводам, если ваш сервер использует gzip для сжатия своих ответов.
Ответ №1:
Это похоже на преждевременную оптимизацию. Не заботьтесь о размере вашего пакета таким образом — много ли 3 КБ gzip или нет. Просто, если вам нужна эта библиотека, используйте ее. Вы поймете, что наличие библиотеки для суммирования двух чисел может и не понадобиться, прежде чем возникнет проблема с размером пакета.
Размер пакета, о котором вы всегда заботитесь, — это значение gzipped, это то, что клиент получает и должен «загрузить» — это требует времени. Но, как вы можете себе представить, загрузка 30 КБ на ваш компьютер дома не является проблемой. На старом устройстве в середине леса Blairwitch это может быть.
Кроме того, он отправляется клиенту один раз на страницу / приложение, поэтому, если он есть у вашего модала и у вашей страницы, он не будет включен дважды. Представьте себе, что у вас есть какая-то библиотека, такая как Lodash, которая большая и используется (если я преувеличиваю) в каждой функции, как вы думаете, ее можно включить 100 раз?
Постарайтесь оптимизировать пользовательский интерфейс с точки зрения ui / ux, это будет первый пользователь, который покинет вашу страницу, не то, чтобы ему пришлось загружать 30 КБ карусели, он даже не заметит!