Разделение чанков в Vite

Часто может быть так, что не малое приложение с большим количеством зависимостей весит несколько мегабайт. Такое приложение будет грузиться клиенту очень долго, особенно, если у него низкая скорость соединения.

Далеко не в любых условиях у пользователей есть возможность загружать наши фронтенды хотя бы на 100-мегабитной линии, поэтому оптимизация загрузки — очень важно.

Пользовательский код можно загружать ленивой подгрузкой, но что сделать с библиотеками, которые собираются в один JS файл? Использовать разделение на чанки.

Чанк — собранные блоки кода, в виде которых пользователь загружает себе ваше приложение.

Идея в том, чтобы разделить приложение на несколько чанков. Это может быть полезно по нескольким причинам:

1. Открываются прелести асинхронной загрузки нескольких чанков
2. Есть возможность загружать не весь фронтенд сразу, а порционно, по мере необходимости

Выглядеть конфигурация может вот так:

javascript
1build: {
2  rollupOptions: {
3    output: {
4      manualChunks: {
5        core: [
6          'react', 
7          'react-dom', 
8          'react-router-dom'
9        ],
10        network: [
11          'axios', 
12          '@tanstack/react-query'
13        ],
14        utils: [
15          'classnames', 
16          'dayjs', 
17          'escape-html', 
18          'tailwind-merge', 
19          'zustand',
20           '@loadable/component'
21        ],
22        table: [
23          '@tanstack/react-table', 
24          '@tanstack/react-virtual'
25        ],
26        chart: [
27          'reactflow', 
28          '@dagrejs/dagre'
29        ],
30        icons: ['@ant-design/icons'],
31        ui: [
32          '@chakra-ui/react', 
33          'chakra-react-select', 
34          'framer-motion', 
35          'prismjs', 
36          'react-simple-code-editor'
37        ],
38      },
39    },
40  },
41}
42

Не очень красиво, но как есть. В единый чанк стоит объединять те библиотеки, что не могут работать друг без друга, например чанк core . Также есть ещё и частотная группировка — когда легковесные библиотеки собирают в один чанк, чтобы быстро загрузить их все, так как понадобятся они на всех страницах, например чанк utils

Что в итоге? Скорость загрузки приложения можно значимо увеличить. Для отрисовки, например, страницы авторизации, нам не нужны таблицы, графики и прочие красивости — загрузим чанки core и network, остальное нам не нужно. Остальные чанки мы можем загрузить по мере необходимости, используя асинхронные инструменты загрузки. Это могут быть @loadable, который рекомендует команда React или же вовсе обычный import.

Обычно, ленивая загрузка библиотек всё же не применяется, однако для организации кода внутри самого приложения — очень часто.

Выглядеть это будет примерно так:

javascript
1const About = lazy(() => import("./pages/about")); // для реакт компонентов
2
3// более сложный пример импорта компонента с @loadable/components
4const PageComponent = loadable((props) => import(`./pages/${props.page}`), {
5  fallback: <div>Page is Loading...</div>,
6  cacheKey: (props) => props.page
7});
8
9async function foo() {
10  const utils = await import("./utils.js") // для, например, утилсов
11}
12

Более подробно о manualChunks можно прочитать в доке rollup