Code splitting

Code splitting — это метод оптимизации фронтенд-приложений, при котором исходный JavaScript-код разделяется на отдельные части (чанки), которые загружаются по мере необходимости. В контексте Element Plus это особенно важно, так как библиотека включает большое количество компонентов, и подключение всей библиотеки целиком приводит к значительному увеличению размера бандла.

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

  • Снижение времени загрузки страницы — основной бандл становится меньше, что ускоряет первичную загрузку приложения.
  • Поддержка ленивой загрузки — компоненты загружаются только тогда, когда пользователь их реально использует.
  • Упрощение поддержки приложения — каждый модуль можно обновлять и кешировать отдельно.

Стратегии разделения кода

  1. Полная библиотека vs. частичный импорт

    Подключение всех компонентов:

    import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

    Такой подход прост, но приводит к большому бандлу, даже если используются лишь несколько компонентов.

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

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

    При этом размер бандла сокращается пропорционально количеству используемых компонентов.

  2. Динамический импорт компонентов с defineAsyncComponent

    Vue 3 поддерживает ленивую загрузку через defineAsyncComponent:

    import { defineAsyncComponent } from 'vue'

const AsyncElTable = defineAsyncComponent(() =>
  import('element-plus/es/components/table')
)

    Компонент AsyncElTable будет загружен только при первом рендере, что существенно снижает первоначальный вес бандла.

Настройка Vite для оптимального code splitting

Vite автоматически выполняет tree-shaking, но при работе с Element Plus важно учесть несколько моментов:

  1. Использовать плагин для автоматического импорта компонентов

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

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

    Плагин автоматически разбивает код и импортирует только используемые компоненты без необходимости ручного указания.

  2. Оптимизация CSS

    Чтобы не загружать весь CSS Element Plus, можно использовать unplugin-vue-components вместе с unplugin-auto-import для автоматического подключения стилей только нужных компонентов:

    import AutoImport from 'unplugin-auto-import/vite'

export default {
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

    Это уменьшает общий вес CSS в финальном бандле.

Динамическая подгрузка модулей по маршрутам

В приложениях на Vue Router можно разделять код по маршрутам:

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  },
  {
    path: '/settings',
    component: () => import('./views/Settings.vue')
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

Компоненты Element Plus внутри этих страниц будут загружаться только при переходе к соответствующему маршруту, что позволяет минимизировать начальную загрузку.

Оптимизация для крупных приложений

  • Ленивая загрузка отдельных виджетов — таблицы, графики, редакторы.
  • Вынос утилитарных модулей (например, ElMessage, ElNotification) в отдельный общий бандл.
  • Кэширование чанков на сервере — использование cache-control и ETag для повторного использования уже загруженных компонентов.

Практический пример комбинированного подхода

import { defineAsyncComponent } from 'vue'
import { ElButton } from 'element-plus'

export default {
  components: {
    ElButton,
    AsyncElDialog: defineAsyncComponent(() =>
      import('element-plus/es/components/dialog')
    ),
  },
}

Здесь статически подключается часто используемый ElButton, а более редкий ElDialog загружается динамически при необходимости. Такой подход обеспечивает баланс между удобством разработки и минимизацией размера бандла.

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

Оглавление