Настройка tree-shaking

Tree-shaking — это механизм оптимизации, который позволяет исключать из сборки неиспользуемый код, снижая размер итогового бандла. В контексте Element Plus, использование tree-shaking особенно важно, поскольку библиотека содержит множество компонентов и утилит, не все из которых могут быть нужны в проекте.

Element Plus поддерживает модульный импорт, что обеспечивает эффективный tree-shaking при правильной конфигурации сборщика, такого как Vite, Webpack 5 или Rollup.

Модульный импорт компонентов

Стандартный подход

Без tree-shaking обычно используется глобальный импорт:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)

Проблема: весь код библиотеки и все стили включаются в бандл, даже если реально используются только ElButton и ElInput.

Импорт отдельных компонентов

Правильная стратегия для tree-shaking:

import { ElButton, ElInput } from 'element-plus'
import 'element-plus/theme-chalk/el-button.css'
import 'element-plus/theme-chalk/el-input.css'

const app = createApp(App)
app.component(ElButton.name, ElButton)
app.component(ElInput.name, ElInput)

Ключевые моменты:

  • Импортируются только необходимые компоненты.
  • Стили подключаются отдельно.
  • Bundler способен исключить весь неиспользуемый код.

Автоматический импорт компонентов

Element Plus предоставляет официальное решение — unplugin-vue-components, позволяющее автоматически импортировать компоненты и их стили без ручного перечисления:

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

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

Преимущества автоматического импорта:

  • Tree-shaking работает корректно.
  • Упрощается работа с компонентами.
  • Нет необходимости вручную следить за стилями.

Конфигурация сборщика для максимального tree-shaking

Vite

Vite по умолчанию поддерживает ES модули и позволяет tree-shaking без дополнительной настройки. Важный момент — использовать ESM-версию Element Plus, а не UMD.

import { ElButton } from 'element-plus'

Использование плагина unplugin-vue-components дополнительно упрощает настройку.

Webpack 5

Для Webpack 5 нужно:

  1. Использовать mode: ‘production’ для включения оптимизаций.
  2. Убедиться, что библиотека импортируется как ESM.
  3. Настроить sideEffects в package.json:
"sideEffects": [
  "*.css"
]

Это указывает сборщику, что JavaScript-файлы без побочных эффектов могут быть безопасно удалены, а CSS — нужно сохранять.

Rollup

Rollup естественно поддерживает tree-shaking. Рекомендуется использовать следующие настройки:

export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'es',
  },
  plugins: [
    vue(),
    resolve(),
    commonjs(),
  ],
}

Важно подключать только ES модули и избегать импортов через dist UMD-файлы.

Стили и tree-shaking

Element Plus использует CSS-файлы для каждого компонента, что позволяет подключать только нужные стили:

import 'element-plus/theme-chalk/el-button.css'
import 'element-plus/theme-chalk/el-select.css'

Для автоматического подключения можно использовать unplugin-vue-components, который подгружает соответствующие стили вместе с компонентами.

Особенности и ограничения

  • Tree-shaking работает только с ES модулями. Импорты из lib или dist могут включать весь код.
  • Если подключать компонент через глобальный app.use(ElementPlus), tree-shaking не будет работать.
  • Статический анализ кода необходим: динамические импорты или использование require() могут препятствовать удалению неиспользуемого кода.

Практические рекомендации

  1. Всегда использовать модульный импорт для отдельных компонентов.
  2. Подключать CSS только для используемых компонентов.
  3. Использовать unplugin-vue-components для автоматизации импорта.
  4. Проверять размер бандла и убедиться, что не подключаются лишние компоненты.
  5. Настраивать сборщик в production-режиме с включенным tree-shaking.

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

Оглавление