Конфигурация сборщиков

При использовании Naive UI в проектах на JavaScript важно правильно организовать конфигурацию сборщика, чтобы обеспечить корректную работу компонентов, минимизацию и оптимизацию размера бандла, а также поддержку динамических импортов. Библиотека разработана с учётом современных сборщиков, таких как Vite, Webpack, и Rollup, поэтому подходы к настройке могут различаться в зависимости от выбранного инструмента.

Подключение Naive UI в проект

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

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

После установки её можно импортировать в проект:

import { createApp } from 'vue';
import { NButton } from 'naive-ui';

const app = createApp(App);
app.component('NButton', NButton);
app.mount('#app');

Naive UI поддерживает как полные, так и tree-shaking-импорты, что позволяет исключать неиспользуемые компоненты из бандла и существенно уменьшать размер итогового файла.

Оптимизация сборки через tree-shaking

Tree-shaking особенно эффективен при использовании сборщиков типа Vite или Rollup, которые анализируют статический импорт модулей. Для Naive UI это выглядит так:

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

Импорт отдельных компонентов гарантирует, что в итоговый бандл попадут только необходимые части библиотеки. Если импортировать всю библиотеку целиком:

import NaiveUI from 'naive-ui';

то размер бандла увеличится, что нежелательно для продакшн-сборки.

Конфигурация Vite

Vite является рекомендованным инструментом для проектов с Naive UI благодаря своей скорости и простоте. Основные моменты конфигурации:

  1. Alias для упрощения импорта
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
});
  1. Оптимизация зависимостей

Для ускорения старта приложения можно указать Naive UI как pre-bundled dependency:

optimizeDeps: {
  include: ['naive-ui']
}
  1. Поддержка динамических импортов

Naive UI позволяет загружать компоненты по требованию с помощью динамического импорта:

const NButton = () => import('naive-ui/lib/button');

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

Конфигурация Webpack

При использовании Webpack важно учитывать несколько особенностей:

  1. Alias для модулей
const path = require('path');

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
};
  1. Tree-shaking через ES-модули

Webpack автоматически выполняет tree-shaking при использовании ES-модулей (import { NButton } from 'naive-ui') и включенном mode: 'production'.

  1. Динамическая загрузка компонентов
const NButton = () => import('naive-ui/lib/button');
  1. Минимизация CSS

Naive UI предоставляет стили в виде CSS-модулей. Для Webpack рекомендуется использовать MiniCssExtractPlugin:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  }
};

Подключение тем и настройка стилей

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

import 'naive-ui/dist/naive-ui.css';

Для Vite или Webpack можно включить PostCSS и SCSS, если требуется динамическая генерация тем:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `$primary-color: #42b983;`
      }
    }
  }
};

Поддержка SSR и сборка для продакшн

Naive UI совместим с Server-Side Rendering (SSR), но сборщик должен правильно обрабатывать модули:

  1. Vite SSR
import { createSSRApp } from 'vue';
import { NButton } from 'naive-ui';

export function createApp() {
  const app = createSSRApp(App);
  app.component('NButton', NButton);
  return app;
}
  1. Webpack SSR

Необходимо убедиться, что target: 'node' и externals настроены для корректной работы с Naive UI, чтобы не включать лишние модули в серверный бандл.

Советы по производительности

  • Использовать tree-shaking и динамический импорт компонентов.
  • Минимизировать CSS через соответствующие плагины сборщика.
  • Предзагружать критические зависимости через optimizeDeps в Vite.
  • Настраивать alias для удобного импорта и ускорения разрешения модулей.
  • Проверять размер бандла с помощью анализаторов (rollup-plugin-visualizer, webpack-bundle-analyzer) и исключать ненужные пакеты.

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

Оглавление