Как мы знаем, производительность важна для каждого проекта. Однако это более важно, когда это клиентский проект, потому что вам нужно продумать все браузеры, даже Internet Explorer. С этого момента мы упорно работаем над повышением производительности нашего веб-сайта в heycar, поскольку наши пользователи должны получать доступ к самому быстрому веб-сайту на своих настольных компьютерах и мобильных устройствах.
Как я уже говорил в названии, небольшие изменения могут оказать значительное влияние, особенно на React. Мы не хотели вносить большие изменения во все наши исходные коды, что потребовало бы очень много времени, и должен быть простой способ улучшить производительность нашего веб-сайта на этом пути. Предлагаемые ниже изменения - это некоторые моменты, которые вы должны учитывать в своих проектах.
Плагины Babel
На babel есть плагины, которые могут очистить ваш код и сделать его быстрее. Мы используем response-remove-properties, transform-react-remove-prop-types и transform-react-constant-elements с индивидуальными настройками. У нас 100% покрытие, а это значит, что у нас много тестовых кодов. В основном связанные с тестами, у нас также есть бесполезные теги на наших компонентах. Во-первых, мы используем response-remove-properties, который легко очищает наш код. Затем нам нужно удалить ненужные типы пропеллеров на производстве. Для этого мы используем transform-react-remove-prop-types. Наконец, мы используем transform-react-constant-elements для создания подъемных элементов и сокращаем количество обращений к react.createElement.
Ленивая загрузка
SSR важен для SEO и конечных пользователей, которые хотят использовать веб-сайт как можно быстрее. Однако необходимо ли изначально показывать каждую часть веб-сайта, включая все изображения? В связи с этим мы изменили некоторые компоненты с ленивой загрузкой, чтобы показывать их после загрузки. Это помогает серверу передавать некоторые части веб-сайта клиенту, поэтому ему не нужно ждать, чтобы полностью отобразить.
Для отложенной загрузки у нас есть два сценария. Во-первых, это компонент. Что касается компонентов, мы используем HOC для создания компонентов со стандартными функциями отложенной загрузки. Это упрощает преобразование в готовый к SSR при необходимости. Во-вторых, это изображение. Для изображений мы используем компонент react-lazyload, потому что он прост в использовании, и нам не нужно изобретать колесо, когда в нем уже есть большинство необходимых функций.
Чистые компоненты
Обычно мы не используем весь жизненный цикл React для наших компонентов. Если мы также работаем с Redux, жизненный цикл React находится только на уровне componentDidMount / ComponentWillUnmount. Вот почему вам следует попробовать Чистые компоненты. В наших тестах компоненты Pure намного быстрее, чем компоненты и функции без состояния.
React.hydrate для SSR
В качестве функции SSR ваш html находится в ответе сервера. Итак, почему мы должны повторно отображать и прикреплять прослушиватели событий к html? Чтобы этого избежать, мы используем
React. Hydrate на нашей начальной странице. Это помогает подключать только прослушиватели событий (вместо функции рендеринга).
Инструменты разработчика React
После React 16.5 Facebook добавил поддержку нового подключаемого модуля профилировщика devtools. Этот плагин использует экспериментальный Profiler API React для сбора информации о времени для каждого отображаемого компонента с целью выявления узких мест в производительности в приложениях React. До этого мы использовали chrome devtools profiler, а также response perf addon, чтобы увидеть, что мы сделали не так. С новым плагином профилировщика devtools вы можете увидеть общее количество рендеринга для каждого компонента, какие компоненты занимают слишком много времени и многое другое. Его гораздо легче читать, чем профилировщик chrome devtools. Вы также должны проверить и попытаться уменьшить количество рендеров.
Заключение
Итак, некоторые из вас могут подумать о том, чтобы спросить, что произошло после этих изменений. Скорость нашей первой Contentful Paint увеличилась на 19%. Кроме того, первая значимая скорость рисования увеличилась на 10%. Однако наиболее значительные изменения коснулись загрузочного и основного потоков. Наше время загрузки javascript уменьшилось на 61% с этими небольшими изменениями. Скорость работы основного потока также увеличилась на 49%. В конечном итоге наши пользователи стали просматривать наш веб-сайт на 1,5 секунды быстрее (всего 2 секунды при первой загрузке), а время взаимодействия стало на 5 секунд быстрее. Как вы знаете, для рендеринга необходимы даже миллисекунды, поэтому эти улучшения помогают нам взаимодействовать и общаться с нашими пользователями.
Кстати, если вы хотите работать с java-скриптом, react, vue.js или любой другой связанной темой, загляните на нашу страницу вакансий:
