Tree shaking

Tree shaking — это техника оптимизации JavaScript-кода, которая позволяет удалять из итогового бандла неиспользуемый код. Для библиотек компонентов, таких как Naive UI, это особенно важно, так как полноценная библиотека включает десятки компонентов, и подключение всей библиотеки целиком существенно увеличивает размер приложения.

В Naive UI архитектура построена с учётом поддержки tree shaking. Каждый компонент экспортируется отдельно, что позволяет импортировать только те элементы, которые реально используются в проекте.

Импорт компонентов по отдельности

Правильный способ подключения компонентов в Naive UI выглядит следующим образом:

import { NButton, NCard } from 'naive-ui';

При таком подходе сборщик (например, Vite или Webpack с поддержкой ESM) сможет удалить все остальные компоненты, которые не используются, из итогового бандла.

Если же использовать универсальный импорт:

import NaiveUI from 'naive-ui';

то весь набор компонентов попадёт в сборку, даже если реально используются только несколько элементов. Это значительно увеличивает размер JavaScript-кода.

Настройка сборщика для эффективного tree shaking

Vite

Naive UI оптимально работает с Vite, так как Vite по умолчанию поддерживает ESM-модули и умеет удалять неиспользуемый код. Основные моменты настройки:

  1. Убедиться, что в vite.config.js установлен режим сборки для ESM:
export default {
  build: {
    target: 'esnext'
  }
};

  1. Использовать import { … } from ‘naive-ui’ вместо глобального импорта.

  2. Для глобальной настройки компонентов можно использовать create naive ui provider, но с отдельными импортами:

import { createApp } from 'vue';
import { NButton, NCard } from 'naive-ui';
import App from './App.vue';

const app = createApp(App);
app.use(NButton);
app.use(NCard);
app.mount('#app');

Webpack

Для Webpack важно, чтобы библиотека была подключена как ESM-модули, а не CommonJS. Naive UI уже предоставляет поддержку ESM, поэтому достаточно:

  1. Убедиться, что mode сборки установлен в production.
  2. Использовать sideEffects: false в package.json:
{
  "sideEffects": false
}

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

Импорт стилей компонентов

Naive UI предоставляет возможность автоматического подключения стилей только для используемых компонентов. Для этого:

import { NButton } from 'naive-ui';
import 'naive-ui/es/button/style';

Каждый компонент имеет собственный файл стилей, что позволяет минимизировать CSS-бандл и полностью поддерживает концепцию tree shaking.

Автоматическая регистрация компонентов

Для больших проектов можно использовать плагины Vite, которые автоматически импортируют только те компоненты, которые используются в шаблонах Vue:

// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    Components({
      resolvers: [NaiveUiResolver()]
    })
  ]
};

Это позволяет полностью отказаться от ручного импорта компонентов, при этом сборка остаётся оптимизированной.

Проверка эффективности tree shaking

Чтобы убедиться, что неиспользуемые компоненты не попадают в итоговый бандл:

  1. Использовать анализаторы бандла, например rollup-plugin-visualizer или webpack-bundle-analyzer.
  2. Проверять размер файла после сборки. Если подключены все компоненты, бандл может достигать нескольких мегабайт; после tree shaking размер должен сокращаться до минимально необходимого.

Особенности Naive UI и ограничения tree shaking

  • Не все сторонние зависимости автоматически оптимизируются. Например, если используется библиотека иконок, нужно подключать только необходимые.
  • Импорт через import * as NaiveUI отключает tree shaking.
  • Для динамических компонентов (component :is="...) tree shaking может работать частично, если сборщик не способен определить используемые модули на этапе компиляции.

Рекомендации по практическому применению

  1. Всегда импортировать компоненты по именам, а не глобально.
  2. Подключать только необходимые стили.
  3. Использовать Vite или Webpack с ESM для сборки.
  4. В больших проектах применять автоматическую регистрацию компонентов через плагины.
  5. Регулярно проверять бандл анализаторами для контроля эффективности tree shaking.

Эффективное использование tree shaking в Naive UI позволяет уменьшить размер приложения, ускорить загрузку страниц и улучшить производительность, сохраняя при этом удобство использования всех компонентов библиотеки.

Оглавление