Настройка treeshaking

Treeshaking — это процесс удаления неиспользуемого кода из финального бандла, что позволяет существенно уменьшить размер сборки и ускорить загрузку приложения. В контексте Vuetify, особенно начиная с версии 3, treeshaking играет критически важную роль, так как библиотека включает большое количество компонентов, утилит и стилей, которые по умолчанию могут попасть в сборку, даже если они не используются.

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

Настройка treeshaking с Vuetify 3

1. Импорт компонентов по требованию

Ключевой момент treeshaking в Vuetify — импорт только нужных компонентов, а не всей библиотеки. Например:

// Плохо для treeshaking — подключает все компоненты
import Vuetify from 'vuetify';

// Хорошо — подключение только нужных компонентов
import { VApp, VBtn, VCard } from 'vuetify/components';
import { createVuetify } from 'vuetify';

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

2. Импорт утилит и директив

Vuetify предоставляет ряд утилит (useDisplay, useTheme, useLocale) и директив (v-ripple, v-scroll). Для treeshaking необходимо импортировать их отдельно:

import { useDisplay } from 'vuetify';
import { Ripple } from 'vuetify/directives';

Директивы можно подключать при инициализации Vuetify:

const vuetify = createVuetify({
  directives: {
    Ripple,
  },
});

Конфигурация сборщика

Webpack

Для Webpack важно использовать ESM-бандлы Vuetify. В webpack.config.js необходимо убедиться, что:

resolve: {
  alias: {
    'vuetify/lib': 'vuetify/es',
  },
},

Использование vuetify/es вместо vuetify/lib позволяет сборщику анализировать импорты и исключать неиспользуемые модули. Также стоит включить sideEffects: false в package.json, чтобы указать, что большинство файлов библиотеки безопасны для treeshaking:

{
  "sideEffects": false
}

Vite

Vite автоматически работает с ESM, поэтому в большинстве случаев достаточно:

import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

export default createVuetify({
  components,
  directives,
});

Важно проверять, что в vite.config.js установлен плагин Vue 3 и включен optimizeDeps:

optimizeDeps: {
  include: ['vuetify/components', 'vuetify/directives']
}

Treeshaking стилей

Vuetify использует Sass-переменные и темы, и по умолчанию весь CSS может попасть в бандл. Для минимизации размера подключаются только нужные стили:

// main.scss
@use 'vuetify/styles' with (
  $body-font-family: 'Roboto, sans-serif',
  $theme: light
);

При этом vuetify/styles предоставляет доступ к функциям и миксинам без включения всех стилей компонентов. В компонентах подключение CSS через import 'vuetify/styles' должно быть централизованным, чтобы сборщик мог исключить лишние правила.

Оптимизация с помощью defineComponent

Vuetify тесно интегрируется с Composition API. Для эффективного treeshaking стоит использовать defineComponent и явные импорты:

import { defineComponent } from 'vue';
import { VBtn } from 'vuetify/components';

export default defineComponent({
  components: { VBtn },
  setup() {
    // Логика компонента
  },
});

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

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

  1. Bundle Analyzer — визуальный анализ бандла (Webpack Bundle Analyzer, Vite plugin visualizer) показывает, какие части библиотеки попали в сборку.
  2. Размер бандла — сравнение до и после подключения treeshaking.
  3. Снижение количества импортов — убедиться, что только используемые компоненты и стили включены.

Использование этих инструментов позволяет подтвердить, что конфигурация корректна и сборка минимальна.

Особенности Vuetify 3 и treeshaking

  • Компоненты, утилиты и директивы должны импортироваться отдельно.
  • Стили можно подключать модульно через @use 'vuetify/styles'.
  • Собранный бандл без treeshaking может быть в два-три раза больше.
  • Совместимость с Vite обеспечивает автоматический treeshaking, Webpack требует дополнительных настроек.

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

Оглавление