Оптимизация bundle

Element Plus — мощная библиотека компонентов для Vue 3, предоставляющая богатый набор UI-элементов. При использовании полной сборки без оптимизации размер итогового bundle может быть значительным, что негативно влияет на время загрузки приложения. Оптимизация bundle позволяет уменьшить вес проекта и ускорить его работу, сохранив все необходимые функциональные возможности.

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

Полная сборка Element Plus (import ElementPlus from 'element-plus') включает все компоненты и стили, что увеличивает размер bundle. Для минимизации рекомендуется использовать поэлементный импорт.

Пример:

// main.js
import { createApp } from 'vue'
import App from './App.vue'

// Импорт конкретных компонентов
import { ElButton, ElInput } from 'element-plus'
import 'element-plus/es/components/button/style/css'
import 'element-plus/es/components/input/style/css'

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

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

  • Импортируются только те компоненты, которые реально используются.
  • Подключение стилей происходит отдельно для каждого компонента.
  • Значительно сокращается размер итогового bundle.

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

Для проектов на Vite и Vue 3 можно настроить автоматический импорт с помощью плагина unplugin-vue-components.

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

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

Преимущества:

  • Компоненты подключаются автоматически при использовании в шаблоне.
  • Снижается вероятность лишнего импорта.
  • Поддержка TypeScript и автодополнения.

Импорт только необходимых стилей

Element Plus предоставляет два варианта подключения стилей:

  1. CSS – полностью готовые стили, простой вариант для небольших проектов.

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

  2. SCSS/LESS – позволяет использовать переменные для кастомизации и подключать только нужные стили. Пример поэлементного импорта SCSS:

    @use 'element-plus/theme-chalk/src/button.scss';
@use 'element-plus/theme-chalk/src/input.scss';

Использование SCSS или LESS помогает:

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

Оптимизация через Tree-shaking

Tree-shaking — это процесс удаления неиспользуемого кода из итогового bundle. Для Element Plus он работает при:

  • Использовании поэлементного импорта.
  • Подключении через ES-модули (import { ElButton } from 'element-plus') вместо CommonJS.
  • Настройке сборщика (Vite, Webpack) на минимизацию production-билда.

Пример настройки Vite для production:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    target: 'esnext',
    minify: 'esbuild', // или terser для дополнительной оптимизации
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus']
        }
      }
    }
  }
})

Эффект:

  • Бандл разделяется на чанки, которые загружаются по мере необходимости.
  • Размер основной сборки уменьшается, ускоряется загрузка приложения.

Ленивая загрузка компонентов (Lazy Loading)

Ленивая загрузка компонентов позволяет загружать элементы Element Plus только в момент их использования.

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

import { defineAsyncComponent } from 'vue'

const AsyncButton = defineAsyncComponent(() =>
  import('element-plus/es/components/button')
)

export default {
  components: { AsyncButton },
}

Преимущества:

  • Снижает initial load bundle.
  • Улучшает производительность при больших интерфейсах.
  • Совместимо с роутерами для асинхронной подгрузки компонентов на отдельных страницах.

Минификация и сжатие

Для production-сборки рекомендуется включать:

  • Minification — удаление пробелов, комментариев и сокращение имен переменных.
  • Gzip/Brotli compression — сжатие бандла на сервере для уменьшения объема передаваемых данных.

Пример для Vite:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      algorithm: 'brotliCompress',
      ext: '.br'
    })
  ]
})

Эти методы не уменьшают сам исходный код, но значительно ускоряют загрузку страниц.

Советы по уменьшению bundle

  • Использовать только нужные компоненты вместо полного импорта.
  • Подключать стили поэлементно.
  • Включать Tree-shaking через ES-модули и production-сборку.
  • Применять ленивую загрузку для редко используемых компонентов.
  • Настроить сжатие и минификацию на сервере.
  • Рассмотреть возможность отключения иконок, если используется отдельная библиотека для них (@element-plus/icons-vue), чтобы не тянуть лишний код.

Эти методы позволяют добиться оптимального размера bundle, сохраняя при этом полный функционал Element Plus без потери производительности.

Оглавление