Когда дело доходит до оптимизации приложения SASS, от оптимизации приложения нет серебряной пули.
Но прежде чем перейти к оптимизации веб-приложения. очень важно, чтобы вы следовали очень простой концепции KISS (KEEP IT SIMPLE STUPID)
1. Повторно визуализируйте компонент только при необходимости.
Компонент следует повторно отображать только при изменении связанных с ним данных.
На нашей домашней странице есть около 4 вызовов AJAX, которые извлекают данные с сервера и отображают их пользователю.
Чтобы сделать запрос, я создал собственный перехватчик useFetch, но у меня возникла проблема. Эта реализация привела к 2–3 одновременным запросам одного и того же вызова API. Это привело к множеству повторных отрисовок компонента, поэтому производительность приложения снизилась. Я исправил проблему с помощью следующего фрагмента кода:
if(counter.current===0 && request is in loading state){
counter.current = 1
AJAX call
}
Приведенный выше код гарантирует, что только во время загрузки страницы и только после того, как запрос будет сделан при рендеринге данных во время выполнения
2. Ленивая загрузка данных приложения
Ленивая загрузка стала одним из широко используемых методов оптимизации для ускорения времени загрузки. Ленивая загрузка помогает гарантировать, что компоненты, которые не видны пользователям сразу, могут быть загружены позже, тем самым улучшая производительность нашего веб-приложения.
React.lazy(()=>{})// or function cb () {}
React.lazy(cb)
Когда компонент загружает резервный компонент, выполняется рендеринг
return () => (
<Suspense fallback={<Loading />}>
<LazyComponent />
</Suspense>
)
3. Запомните любой сложный расчет или компонент.
React предоставляет HOC memo и перехватчик useMemo для запоминания сложных вычислений и компонентов.
const updatedValue = useMemo(()=>{
// complex calculation
return value
})
Что касается компонентов
(before) => export default component (after) => export default memo(component)
ПРИМЕЧАНИЕ. Не применяйте Memo HOC везде, так как это увеличивает использование памяти клиентского браузера и может дорого обойтись вам. Так что вы должны использовать это с умом.
4. Сведение к минимуму зависимостей
Когда дело доходит до разработки компонентов с помощью любой сторонней библиотеки, это определенно упрощает вашу работу. Но это всегда связано с затратами в том смысле, что увеличивает размер пакета приложения, следовательно, снижает FCP.
Два инструмента, которые помогают проанализировать размер приложения, - это bundlesize и source-map-explorer. Проверьте их.
Вот окончательная оценка производительности нашего веб-приложения с использованием Lighthouse после применения всех вышеперечисленных методов:
Я надеюсь, что описанные выше методы помогут вам также подготовить наше приложение к работе.
P.S. - Есть предложения, оставляйте комментарии ниже. Кроме того, если вы хотите решить интересные инженерные проблемы, подобные описанным выше, подайте заявку здесь, чтобы присоединиться к нашей команде: https://angel.co/company/indiagold/jobs.
