Оптимизация сборки

При работе с Element Plus важно учитывать размер итогового бандла и производительность приложения. Несмотря на удобство использования полного набора компонентов, импорт всей библиотеки приводит к значительному увеличению размера сборки. Оптимизация сборки позволяет сократить размер бандла, ускорить загрузку страниц и улучшить отзывчивость интерфейса.

Импорт по компонентам (On-demand Import)

Element Plus поддерживает поэлементный импорт компонентов, что является ключевым методом оптимизации:

import { ElButton, ElSelect } from 'element-plus';
import 'element-plus/dist/index.css';

Однако предпочтительнее использовать автоматический импорт через unplugin-vue-components, который позволяет подключать компоненты без явного импорта в каждом файле:

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

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

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

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

Использование стилей по компонентам

Element Plus позволяет импортировать CSS отдельно для каждого компонента, что снижает размер итогового CSS:

import 'element-plus/es/components/button/style/css';
import 'element-plus/es/components/select/style/css';

Также возможен импорт через SCSS, позволяющий переопределять переменные темы и минимизировать лишние стили:

@use 'element-plus/theme-chalk/src/button.scss' with (
  $--color-primary: #409eff
);

Tree-shaking и модульная структура

Element Plus написан с поддержкой tree-shaking, что позволяет современным сборщикам (Vite, Webpack) автоматически исключать неиспользуемый код:

  • Использование ES-модулей (import { ElButton } from 'element-plus';) обеспечивает корректное удаление неиспользуемых компонентов.
  • Важно убедиться, что сборщик настроен на режим production с включенным tree-shaking.

Пример конфигурации для Vite:

export default defineConfig({
  build: {
    rollupOptions: {
      treeshake: true,
    },
  },
});

Lazy Loading компонентов

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

import { defineAsyncComponent } from 'vue';

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

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

  • Компоненты загружаются только при необходимости.
  • Снижение первоначального времени загрузки страницы.
  • Возможность делить бандл на отдельные чанки.

Оптимизация тем и кастомизация

Element Plus поддерживает тематизацию через SCSS переменные:

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

Пример:

// variables.scss
$--color-primary: #1f8ef1;
$--font-size-base: 14px;

// main.scss
@use 'element-plus/theme-chalk/src/index.scss' with (
  $--color-primary: $--color-primary,
  $--font-size-base: $--font-size-base
);

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

Для production-сборки рекомендуется:

  • Включать minify в Vite или Webpack.
  • Использовать gzip или brotli с серверной стороны.
  • Проверять размер бандла через инструменты анализа:
// vite.config.js
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [visualizer()],
});

Подключение только нужных иконок

Element Plus поставляется с набором иконок, которые по умолчанию импортируются полностью. Для уменьшения веса:

import { Add, Edit } from '@element-plus/icons-vue';
  • Избегать глобального импорта import * as ElementPlusIconsVue from '@element-plus/icons-vue'.
  • Подключать только те иконки, которые реально используются.

Проверка итоговой сборки

  • Использовать инструменты анализа бандла (rollup-plugin-visualizer, webpack-bundle-analyzer).
  • Оценивать размер отдельных модулей.
  • Проверять, что tree-shaking корректно удаляет неиспользуемые компоненты.

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

Оглавление