Vite оптимизация

Для работы с Naive UI в проекте на Vite необходимо сначала установить библиотеку через npm или yarn:

npm install naive-ui
# или
yarn add naive-ui

После установки компоненты Naive UI можно подключать глобально или локально в отдельных Vue-компонентах. Для глобального подключения следует использовать провайдер createApp:

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'

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

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

Дерево компонентов и «tree-shaking»

Naive UI спроектирован с поддержкой tree-shaking, что позволяет исключить из сборки неиспользуемые компоненты. В Vite это особенно важно для оптимизации размера бандла. Для использования только нужных компонентов применяют локальный импорт:

import { NButton, NInput } from 'naive-ui'

export default {
  components: {
    NButton,
    NInput
  }
}

Такой подход уменьшает размер итогового файла и ускоряет загрузку приложения. Vite автоматически обрабатывает ES-модули и исключает неиспользуемый код.

Настройка оптимизации в Vite

Vite предоставляет несколько инструментов для оптимизации работы с библиотеками вроде Naive UI:

  1. Оптимизация зависимостей (optimizeDeps) Vite предварительно обрабатывает зависимости, чтобы ускорить запуск приложения. Для Naive UI рекомендуется указать её в списке оптимизируемых модулей:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['naive-ui']
  }
})
  1. Ленивая загрузка компонентов (Lazy Loading) Для крупных приложений полезно загружать компоненты по мере необходимости. Например, с динамическим импортом:
import { defineAsyncComponent } from 'vue'

export default {
  components: {
    NButton: defineAsyncComponent(() => import('naive-ui/lib/button'))
  }
}

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

  1. Сжатие и минификация Vite автоматически использует esbuild для минификации JavaScript и CSS. Дополнительно можно подключить плагины типа vite-plugin-compression для gzip или brotli-сжатия, что уменьшает размер загружаемых файлов.

Настройка темы и переменных стилей

Naive UI использует CSS-in-JS и предоставляет гибкую систему темизации. Для оптимизации важно использовать только необходимые переменные, чтобы не генерировать лишний CSS:

import { createTheme, NButton } from 'naive-ui'

const customTheme = createTheme({
  common: {
    primaryColor: '#42b983'
  }
})

export default {
  components: { NButton },
  setup() {
    return { customTheme }
  }
}

В Vite это сокращает время сборки и уменьшает размер итогового CSS.

Code Splitting и Vite

Vite поддерживает динамический импорт и разделение кода на чанки. При работе с Naive UI это позволяет:

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

Пример разделения кода:

const HomePage = () => import('./pages/HomePage.vue')
const DashboardPage = () => import('./pages/DashboardPage.vue')

const routes = [
  { path: '/', component: HomePage },
  { path: '/dashboard', component: DashboardPage }
]

Каждый чанк будет содержать только те компоненты Naive UI, которые реально нужны для конкретной страницы.

Совместимость с TypeScript

Naive UI полностью поддерживает TypeScript. Для Vite важно корректно настроить tsconfig.json и убедиться, что типы импортируются:

import type { NButton } from 'naive-ui'

const buttonProps: Partial<typeof NButton> = {
  size: 'large'
}

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

Итоговые рекомендации по оптимизации

  • Использовать локальный импорт компонентов вместо глобального, когда это возможно.
  • Включить optimizeDeps в конфиге Vite для Naive UI.
  • Применять динамический импорт для крупных компонентов.
  • Минимизировать и сжимать бандлы при сборке.
  • Оптимизировать темы, подключая только нужные переменные.
  • Использовать TypeScript для выявления ошибок на этапе разработки.
  • Разделять код на чанки для страниц и модулей с большим количеством UI-компонентов.

Эти подходы обеспечивают быструю загрузку, меньший размер бандла и эффективное использование ресурсов, что особенно важно для крупных приложений на Vue с Naive UI и Vite.

Оглавление