От автора: создание приложений иногда может быть немного сложным, особенно когда нам нужно создать быстрое и качественное приложение. Поисковые системы могут давать бонусные SEO-баллы за большую скорость приложения, и это может помочь нам очень сильно снизить показатель отказов. В этом посте я привел несколько советов и подсказок, которые вы можете использовать, чтобы сделать ваше приложение очень быстрым.
1. Используйте Preact
Во-первых, мы могли бы использовать Preact, который является гораздо более компактной альтернативой React. Если мы сравним их размеры, то это около 130 КБ для React и около 16 КБ для Preact, что дает огромную разницу, особенно когда мы запаковываем библиотеки, размер в сжатом виде React составляет около 40 КБ, а Preact — около 4 КБ (примерно в 10 раз меньше!).
Но нам нужно позаботиться о некоторых вещах, потому что поддержка Preact, например, для redux-forms или context ограничена.
2. Используйте react lazy load
Вместо того, чтобы загружать все приложение одним файлом, мы можем разделить код на более мелкие куски, и при первой загрузке мы будем загружать только те компоненты, которые нам уже нужны. Для этого нам нужно импортировать компоненты через:
JavaScript const componentName = React.lazy(() => import(‚../componentName’));
| 1 | const componentName = React.lazy(() => import(‚../componentName’)); |
В нашем случае React.lazy дал огромное преимущество, и сначала мы загружаем только около 100 КБ файла, а не около 800 КБ, а наш FCP (время до первого отображения) составляет около 1,8 — 2 с.
Продвинутая фильтрация в фреймворке Laravel
3. Используйте CDN
Сеть доставки контента дает нам возможность загружать статические файлы из ближайшего к клиенту (нашему пользователю) местоположения, что помогает избежать задержки (иногда задержка между Азией и США составляет целых 5 секунд). Мы можем использовать, например, Cloudflare (который относительно прост в настройке, и вы можете зарегистрировать бесплатный аккаунт). CF предоставляет CDN, а также такие функции, как защита от DDOS, прокси-сервер (что делает получение IP-адреса нашего сервера очень трудным для потенциального злоумышленника), сертификат SSL, кэш и даже может минимизировать наш код.
4. Хостинг на S3
Знаете ли вы, что вы можете легко разместить свой фронт-энд на файловом хостинге, таком как S3? Это очень дешево. Вы можете минимизировать риск атаки, и если вы будете сочетать S3 с CDN.
5. Удалите неиспользуемый код
Если вы используете такие библиотеки, как semantic или bootstrap, и загружаете очень часто их полностью, у вас можете быть до 300-400 КБ неиспользуемого кода, который не нужен.
Чтобы найти такой код, вы можете открыть инструменты разработчика Chrome, перейти на вкладку источников, к разделу охвата. Затем вам нужно начать запись (как на вкладке сети), затем перезагрузить веб-сайт, и вы увидите какие файлы содержат наибольшее количество неиспользуемого кода.
Вы можете удалить этот код вручную или сделать это с помощью плагинов, таких как babel-plugin-remove-dead-code или других.
6. Импортируйте из пакетов только те функции, которые вам действительно нужны
Импорт библиотек полностью, когда вам нужна только часть из них, может снизить производительность. Например, когда мы импортируем весь lodash, он весит 71 КБ (24 КБ в сжатом виде), но если мы загружаем только метод get, он будет весить всего 8 КБ (2 КБ в сжатом виде).
Для этого нам нужно импортировать выбранную функцию как:
JavaScript import get from ‘lodash/get’;
| 1 | import get from ‘lodash/get’; |
вместо загрузки всего
JavaScript import lodash from ‘lodash’;
| 1 | import lodash from ‘lodash’; |
7. Сократите названия классов
Мы можем уменьшить размер пакета, если сделаем имена классов намного меньше. Например, нам не всегда нужно называть CSS-класс элемента с помощью className = ‘red-roundnded-purchase-button’, иногда достаточно вызвать callclassName = ‘red-buy-btn’ или использовать конфигурацию webpack, которая изменит это на className = ‘c73′. В некоторых случаях это может сэкономить нам до 60% размера пакета.
8. Не переусердствуйте
Если вы создаете простое приложение, вам не нужен Redux / GraphQL с Apollo или даже CSSModules в каждом случае. Они могут быть очень полезными, но все вместе могут увеличить приложение на несколько сотен килобайт (в случае плохого планирования и загрузки всего этого в каждый блок) и создать много беспорядка внутри приложения.
Во многих случаях вы можете легко использовать стоковые методы, такие как, например, context или hooks.
9. Настройте webpack правильно
Вы можете настроить webpack для создания фрагментов, минимизации кода (CSS и js) и даже удаления console.log, комментариев и мертвого кода, что может быть очень полезно. Помните о разделении среды производства и разработки флагами webpack!
10. Минимизируйте код
Минимизация — это процесс, когда наш код очищается от ненужных элементов и переписывается в более короткую версию.
Это может сэкономить большой объем и помочь со временем выполнения. Мы можем сделать это на уровне сборки (пункт 9) или, например, с помощью CDN.
11. Избегайте слишком большого количества рендеров
Каждый рендер — это дополнительное время выполнения для приложения. Во многих случаях мы визуализируем наш компонент много раз, что не нужно. Это множество моментов, которые вы можете решить «не делать», чтобы избежать повторного рендеринга, например, отсутствие индекса в ключе или отсутствие начальных реквизитов внутри исходного состояния.
:focus-visible уже доступно
12. Используйте React.Fragment
Мы можем уменьшить элементы dom (и даже размер пакета, если будем использовать вместо div), используя вместо пустых div.
13. Оптимизируйте изображения
Огромные изображения, шрифты и значки иногда могут стать кошмаром для веб-разработчика. Но мы можем уменьшить до 80% изображений, сжимая их с помощью компрессоров, таких как, например, compressor.io.
14. Не загружайте весь шрифт иконок
Вместо того, чтобы загружать (очень часто) иконки размером 200 КБ, мы можем выбрать несколько иконок, которые нам нужны, и создать из них шрифт. В нашем случае это помогло нам сократить объем с 250 КБ до 1,5 КБ.
15. Используйте мониторы производительности
Если мы хотим отслеживать приложение, нам нужно сначала проверить, как быстро отображаются компоненты, и сколько времени мы тратим на это, чтобы сделать это, мы можем использовать response-addons-perf.
Очень полезным может быть также why-did-update, которое покажет нам, какие компоненты повторно отображаются и какую часть исследовать на предмет потенциального рефакторинга.
И один из самых полезных для меня — это webpack-bundle-analyzer, который помогает мне проверить, насколько велики мои пакеты, где я могу их уменьшить и как спланировать структуру кода, чтобы избежать двойной загрузки зависимостей.
Заключение
Это 15 наиболее часто используемых мной приемов. Они носят общий характер, и если вы хотите поработать над оптимизацией приложений, я бы рекомендовал разобраться в них подробнее, особенно в таких моментах, как повторный рендеринг или настройка webpack.
Надеюсь, вам понравится мой пост, и эти советы будут полезны, когда вы приступите к созданию или оптимизации своего следующего приложения!
Автор: Duomly
Редакция: Команда webformyself.
Источник