progway — программирование, IT

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

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

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

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

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

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

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        core: [
          'react', 
          'react-dom', 
          'react-router-dom'
        ],
        network: [
          'axios', 
          '@tanstack/react-query'
        ],
        utils: [
          'classnames', 
          'dayjs', 
          'escape-html', 
          'tailwind-merge', 
          'zustand',
           '@loadable/component'
        ],
        table: [
          '@tanstack/react-table', 
          '@tanstack/react-virtual'
        ],
        chart: [
          'reactflow', 
          '@dagrejs/dagre'
        ],
        icons: ['@ant-design/icons'],
        ui: [
          '@chakra-ui/react', 
          'chakra-react-select', 
          'framer-motion', 
          'prismjs', 
          'react-simple-code-editor'
        ],
      },
    },
  },
}

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

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

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

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

const About = lazy(() => import("./pages/about")); // для реакт компонентов

// более сложный пример импорта компонента с @loadable/components
const PageComponent = loadable((props) => import(`./pages/${props.page}`), {
  fallback: <div>Page is Loading...</div>,
  cacheKey: (props) => props.page
});

async function foo() {
  const utils = await import("./utils.js") // для, например, утилсов
}

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

Спасибо за прочтение, для меня это важно ❤️

@prog_way_blog — чат — #theory #web #useful

👍17❤5🔥3🐳2

www.tgoop.com/prog_way_blog/318

1.64K viewsedited  Jul 9, 2024 at 12:25

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

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

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

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

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

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

build: {
  rollupOptions: {
    output: {
      manualChunks: {
        core: [
          'react', 
          'react-dom', 
          'react-router-dom'
        ],
        network: [
          'axios', 
          '@tanstack/react-query'
        ],
        utils: [
          'classnames', 
          'dayjs', 
          'escape-html', 
          'tailwind-merge', 
          'zustand',
           '@loadable/component'
        ],
        table: [
          '@tanstack/react-table', 
          '@tanstack/react-virtual'
        ],
        chart: [
          'reactflow', 
          '@dagrejs/dagre'
        ],
        icons: ['@ant-design/icons'],
        ui: [
          '@chakra-ui/react', 
          'chakra-react-select', 
          'framer-motion', 
          'prismjs', 
          'react-simple-code-editor'
        ],
      },
    },
  },
}

const About = lazy(() => import("./pages/about")); // для реакт компонентов

// более сложный пример импорта компонента с @loadable/components
const PageComponent = loadable((props) => import(`./pages/${props.page}`), {
  fallback: <div>Page is Loading...</div>,
  cacheKey: (props) => props.page
});

async function foo() {
  const utils = await import("./utils.js") // для, например, утилсов
}

BY progway — программирование, IT