Зачем оптимизировать производительность

▸Проблема большого bundle

Большой JavaScript bundle замедляет загрузку страницы. Пользователи с медленным интернетом ждут дольше, а Core Web Vitals ухудшаются.

▸Метрики производительности

FCP (First Contentful Paint) — когда появляется первый контент

LCP (Largest Contentful Paint) — когда загружается основной контент

TTI (Time to Interactive) — когда страница становится интерактивной

CLS (Cumulative Layout Shift) — визуальная стабильность

Lazy Loading компонентов

▸React.lazy

tsx

1import { lazy, Suspense } from 'react';
2
3const HeavyComponent = lazy(() => import('./HeavyComponent'));
4
5function App() {
6  return (
7    <Suspense fallback={<div>Загрузка...</div>}>
8      <HeavyComponent />
9    </Suspense>
10  );
11}

▸Условный lazy loading

tsx

1function Dashboard() {
2  const [showChart, setShowChart] = useState(false);
3
4  return (
5    <div>
6      <button onClick={() => setShowChart(true)}>Показать график</button>
7      {showChart && (
8        <Suspense fallback={<Spinner />}>
9          <Chart />
10        </Suspense>
11      )}
12    </div>
13  );
14}

Code Splitting

▸Route-based splitting

tsx

1const Home = lazy(() => import('./pages/Home'));
2const About = lazy(() => import('./pages/About'));
3const Dashboard = lazy(() => import('./pages/Dashboard'));
4
5function App() {
6  return (
7    <Suspense fallback={<Loading />}>
8      <Routes>
9        <Route path="/" element={<Home />} />
10        <Route path="/about" element={<About />} />
11        <Route path="/dashboard" element={<Dashboard />} />
12      </Routes>
13    </Suspense>
14  );
15}

▸Preloading

tsx

1const Dashboard = lazy(() => import('./pages/Dashboard'));
2
3function App() {
4  useEffect(() => {
5    // Предзагрузка приidle
6    if ('requestIdleCallback' in window) {
7      requestIdleCallback(() => {
8        import('./pages/Dashboard');
9      });
10    }
11  }, []);
12
13  return <Routes>...</Routes>;
14}

Виртуализация списков

▸Проблема длинных списков

Рендер тысячи элементов замедляет страницу. Виртуализация рендерит только видимые элементы.

▸React-window

bash

1npm install react-window

tsx

1import { FixedSizeList } from 'react-window';
2
3function VirtualList({ items }) {
4  const Row = ({ index, style }) => (
5    <div style={style}>
6      {items[index].name}
7    </div>
8  );
9
10  return (
11    <FixedSizeList
12      height={500}
13      width="100%"
14      itemCount={items.length}
15      itemSize={35}
16    >
17      {Row}
18    </FixedSizeList>
19  );
20}

▸react-virtuoso

bash

1npm install react-virtuoso

tsx

1import { Virtuoso } from 'react-virtuoso';
2
3function VirtualList({ items }) {
4  return (
5    <Virtuoso
6      style={{ height: '500px' }}
7      totalCount={items.length}
8      itemContent={(index) => (
9        <div>{items[index].name}</div>
10      )}
11    />
12  );
13}

Анализ bundle

▸Webpack Bundle Analyzer

bash

1npm install --save-dev webpack-bundle-analyzer

1// next.config.js
2const withBundleAnalyzer = require('@next/bundle-analyzer')({
3  enabled: process.env.ANALYZE === 'true',
4});
5
6module.exports = withBundleAnalyzer({});

▸Визуализация

Запустите ANALYZE=true npm run build для визуализации bundle. Ищите дублирующиеся библиотеки и крупные зависимости.

Оптимизация изображений

▸Next.js Image

tsx

1import Image from 'next/image';
2
3<Image
4  src="/photo.jpg"
5  width={500}
6  height={300}
7  alt="Описание"
8  loading="lazy"
9/>

▸WebP формат

Используйте WebP вместо JPEG/PNG. WebP на 25-34% меньше при аналогичном качестве.

Мемоизация

▸React.memo для компонентов

tsx

1const ExpensiveList = React.memo(({ items }) => {
2  return items.map(item => <ListItem key={item.id} data={item} />);
3});

▸useMemo для вычислений

tsx

1const sortedItems = useMemo(() => {
2  return [...items].sort((a, b) => a.name.localeCompare(b.name));
3}, [items]);

Service Workers

▸Кэширование статических ресурсов

1// service-worker.js
2self.addEventListener('install', (event) => {
3  event.waitUntil(
4    caches.open('v1').then((cache) => {
5      return cache.addAll([
6        '/',
7        '/index.html',
8        '/styles.css',
9        '/app.js',
10      ]);
11    })
12  );
13});

Профилирование

▸React DevTools Profiler

Записывайте профиль рендера и анализируйте:

Какие компоненты ре-рендерятся

Сколько времени занимает каждый рендер

Причины ре-рендеров

▸Chrome DevTools Performance

Записывайте JavaScript execution, layout и paint для выявления узких мест.

Заключение

Производительность React — это система: lazy loading для маршрутов, виртуализация для списков, мемоизация для вычислений, анализ bundle для оптимизации размера. Используйте profiling инструменты для выявления реальных проблем и оптимизируйте точечно.

#react#performance#lazy-loading#code-splitting#виртуализация

React≈ 14 мин чтения25 апреля 2024 г.

React Performance: lazy loading, code splitting, virtualization

Оптимизация производительности React: ленивая загрузка компонентов, разделение кода, виртуализация списков и анализ bundle.

Зачем оптимизировать производительность

▸Проблема большого bundle

▸Метрики производительности

FCP (First Contentful Paint) — когда появляется первый контент

LCP (Largest Contentful Paint) — когда загружается основной контент

TTI (Time to Interactive) — когда страница становится интерактивной

CLS (Cumulative Layout Shift) — визуальная стабильность

Lazy Loading компонентов

▸React.lazy

tsx

1import { lazy, Suspense } from 'react';
2
3const HeavyComponent = lazy(() => import('./HeavyComponent'));
4
5function App() {
6  return (
7    <Suspense fallback={<div>Загрузка...</div>}>
8      <HeavyComponent />
9    </Suspense>
10  );
11}

▸Условный lazy loading

tsx

1function Dashboard() {
2  const [showChart, setShowChart] = useState(false);
3
4  return (
5    <div>
6      <button onClick={() => setShowChart(true)}>Показать график</button>
7      {showChart && (
8        <Suspense fallback={<Spinner />}>
9          <Chart />
10        </Suspense>
11      )}
12    </div>
13  );
14}

Code Splitting

▸Route-based splitting

tsx

1const Home = lazy(() => import('./pages/Home'));
2const About = lazy(() => import('./pages/About'));
3const Dashboard = lazy(() => import('./pages/Dashboard'));
4
5function App() {
6  return (
7    <Suspense fallback={<Loading />}>
8      <Routes>
9        <Route path="/" element={<Home />} />
10        <Route path="/about" element={<About />} />
11        <Route path="/dashboard" element={<Dashboard />} />
12      </Routes>
13    </Suspense>
14  );
15}

▸Preloading

tsx

1const Dashboard = lazy(() => import('./pages/Dashboard'));
2
3function App() {
4  useEffect(() => {
5    // Предзагрузка приidle
6    if ('requestIdleCallback' in window) {
7      requestIdleCallback(() => {
8        import('./pages/Dashboard');
9      });
10    }
11  }, []);
12
13  return <Routes>...</Routes>;
14}

Виртуализация списков

▸Проблема длинных списков

Рендер тысячи элементов замедляет страницу. Виртуализация рендерит только видимые элементы.

▸React-window

bash

1npm install react-window

tsx

1import { FixedSizeList } from 'react-window';
2
3function VirtualList({ items }) {
4  const Row = ({ index, style }) => (
5    <div style={style}>
6      {items[index].name}
7    </div>
8  );
9
10  return (
11    <FixedSizeList
12      height={500}
13      width="100%"
14      itemCount={items.length}
15      itemSize={35}
16    >
17      {Row}
18    </FixedSizeList>
19  );
20}

▸react-virtuoso

bash

1npm install react-virtuoso

tsx

1import { Virtuoso } from 'react-virtuoso';
2
3function VirtualList({ items }) {
4  return (
5    <Virtuoso
6      style={{ height: '500px' }}
7      totalCount={items.length}
8      itemContent={(index) => (
9        <div>{items[index].name}</div>
10      )}
11    />
12  );
13}

Анализ bundle

▸Webpack Bundle Analyzer

bash

1npm install --save-dev webpack-bundle-analyzer

1// next.config.js
2const withBundleAnalyzer = require('@next/bundle-analyzer')({
3  enabled: process.env.ANALYZE === 'true',
4});
5
6module.exports = withBundleAnalyzer({});

▸Визуализация

Запустите ANALYZE=true npm run build для визуализации bundle. Ищите дублирующиеся библиотеки и крупные зависимости.

Оптимизация изображений

▸Next.js Image

tsx

1import Image from 'next/image';
2
3<Image
4  src="/photo.jpg"
5  width={500}
6  height={300}
7  alt="Описание"
8  loading="lazy"
9/>

▸WebP формат

Используйте WebP вместо JPEG/PNG. WebP на 25-34% меньше при аналогичном качестве.

Мемоизация

▸React.memo для компонентов

tsx

1const ExpensiveList = React.memo(({ items }) => {
2  return items.map(item => <ListItem key={item.id} data={item} />);
3});

▸useMemo для вычислений

tsx

1const sortedItems = useMemo(() => {
2  return [...items].sort((a, b) => a.name.localeCompare(b.name));
3}, [items]);

Service Workers

▸Кэширование статических ресурсов

1// service-worker.js
2self.addEventListener('install', (event) => {
3  event.waitUntil(
4    caches.open('v1').then((cache) => {
5      return cache.addAll([
6        '/',
7        '/index.html',
8        '/styles.css',
9        '/app.js',
10      ]);
11    })
12  );
13});

Профилирование

▸React DevTools Profiler

Записывайте профиль рендера и анализируйте:

Какие компоненты ре-рендерятся

Сколько времени занимает каждый рендер

Причины ре-рендеров

▸Chrome DevTools Performance

Записывайте JavaScript execution, layout и paint для выявления узких мест.

Заключение

#react#performance#lazy-loading#code-splitting#виртуализация

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Зачем оптимизировать производительность

▸Проблема большого bundle

▸Метрики производительности

Lazy Loading компонентов

▸React.lazy

▸Условный lazy loading

Code Splitting

▸Route-based splitting

▸Preloading

Виртуализация списков

▸Проблема длинных списков

▸React-window

▸react-virtuoso

Анализ bundle

▸Webpack Bundle Analyzer

▸Визуализация

Оптимизация изображений

▸Next.js Image

▸WebP формат

Мемоизация

▸React.memo для компонентов

▸useMemo для вычислений

Service Workers

▸Кэширование статических ресурсов

Профилирование

▸React DevTools Profiler

▸Chrome DevTools Performance

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Зачем оптимизировать производительность

▸Проблема большого bundle

▸Метрики производительности

Lazy Loading компонентов

▸React.lazy

▸Условный lazy loading

Code Splitting

▸Route-based splitting

▸Preloading

Виртуализация списков

▸Проблема длинных списков

▸React-window

▸react-virtuoso

Анализ bundle

▸Webpack Bundle Analyzer

▸Визуализация

Оптимизация изображений

▸Next.js Image

▸WebP формат

Мемоизация

▸React.memo для компонентов

▸useMemo для вычислений

Service Workers

▸Кэширование статических ресурсов

Профилирование

▸React DevTools Profiler

▸Chrome DevTools Performance

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня