Что такое Vite

▸Определение

Vite — это современный сборщик, использующий ES modules для dev-режима и Rollup для production. Он значительно быстрее Webpack.

Установка

▸Новый проект

bash

1npm create vue@latest my-app
2cd my-app
3npm install
4npm run dev

▸Добавление в существующий проект

bash

1npm install -D vite @vitejs/plugin-vue

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

▸vite.config.ts

1import { defineConfig } from 'vite';
2import vue from '@vitejs/plugin-vue';
3
4export default defineConfig({
5  plugins: [vue()],
6  resolve: {
7    alias: {
8      '@': '/src',
9    },
10  },
11  server: {
12    port: 3000,
13    open: true,
14  },
15  build: {
16    outDir: 'dist',
17    sourcemap: true,
18  },
19});

▸Environment variables

1// .env
2VITE_API_URL=https://api.example.com
3
4// Использование в коде
5const apiUrl = import.meta.env.VITE_API_URL;

HMR: горячая замена модулей

▸Как работает HMR

Vite использует native ES modules для HMR. При изменении файла обновляется только этот модуль, а не весь bundle.

▸Скорость HMR

Webpack: 1-10 секунд

Vite: менее 50 миллисекунд

▸Пример

vue

1<template>
2  <p>{{ message }}</p>
3</template>
4
5<script setup>
6// Измените message — обновление мгновенное
7const message = ref('Привет мир');
8</script>

Плагины

▸Официальные плагины

1import vue from '@vitejs/plugin-vue';
2import Pages from 'vite-plugin-pages';
3import Components from 'vite-plugin-components';
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    Pages(),
9    Components(),
10  ],
11});

▸vite-plugin-pages

1// Автоматическая маршрутизация
2import Pages from 'vite-plugin-pages';
3
4export default defineConfig({
5  plugins: [Pages()],
6});

▸vite-plugin-components

1// Автоматический импорт компонентов
2import Components from 'vite-plugin-components';
3
4export default defineConfig({
5  plugins: [Components()],
6});

Оптимизация

▸Code Splitting

1// Динамический импорт
2const HeavyComponent = () => import('./components/Heavy.vue');

▸Preload

html

1<link rel="modulepreload" href="/assets/Heavy.abc123.js">

▸Compression

bash

1npm install -D vite-plugin-compression

1import compression from 'vite-plugin-compression';
2
3export default defineConfig({
4  plugins: [compression()],
5});

Тестирование

▸Vitest

bash

1npm install -D vitest

1// vite.config.ts
2export default defineConfig({
3  test: {
4    globals: true,
5    environment: 'jsdom',
6  },
7});

▸Запуск тестов

bash

1npm run test

Production сборка

▸Анализ bundle

bash

1npm install -D rollup-plugin-visualizer

1import visualizer from 'rollup-plugin-visualizer';
2
3export default defineConfig({
4  plugins: [visualizer()],
5});

▸Продвинутая конфигурация

1export default defineConfig({
2  build: {
3    rollupOptions: {
4      output: {
5        manualChunks: {
6          vendor: ['vue', 'vue-router'],
7          utils: ['lodash', 'axios'],
8        },
9      },
10    },
11  },
12});

Сравнение с Webpack

▸Скорость dev-режима

Vite значительно быстрее благодаря use of native ES modules.

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

Vite требует минимума конфигурации. Webpack — много boilerplate.

▸HMR

Vite: мгновенный. Webpack: медленный.

▸Bundle size

Vite генерирует оптимизированные bundles через Rollup.

Миграция с Webpack

▸Пошаговая миграция

Установите Vite и плагины

Создайте vite.config.ts

Замените webpack конфигурацию

Обновите скрипты в package.json

Проверьте работоспособность

▸Параллельная работа

Vite и Webpack могут работать одновременно, что позволяет мигрировать постепенно.

Best Practices

▸Используйте script setup

vue

1<script setup>
2// Автоматический Tree-shaking
3// Минимальный boilerplate
4</script>

▸Динамические импорты

1// Lazy loading компонентов
2const Admin = () => import('./views/Admin.vue');

▸Environment variables

Используйте VITE_ префикс для переменных окружения.

Заключение

Vite — это будущее сборки Vue-приложений. Он значительно быстрее Webpack, требует меньше конфигурации и предоставляет лучший developer experience. Для новых проектов используйте Vite. Мигрируйте со Webpack постепенно.

#vue#vite#hmr#build#webpack

Vue.js≈ 13 мин чтения20 апреля 2024 г.

Vite для Vue: быстрая сборка и HMR

Полное руководство по Vite для Vue: настройка, плагины, оптимизация и сравнение с Webpack.

Что такое Vite

▸Определение

Vite — это современный сборщик, использующий ES modules для dev-режима и Rollup для production. Он значительно быстрее Webpack.

Установка

▸Новый проект

bash

1npm create vue@latest my-app
2cd my-app
3npm install
4npm run dev

▸Добавление в существующий проект

bash

1npm install -D vite @vitejs/plugin-vue

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

▸vite.config.ts

1import { defineConfig } from 'vite';
2import vue from '@vitejs/plugin-vue';
3
4export default defineConfig({
5  plugins: [vue()],
6  resolve: {
7    alias: {
8      '@': '/src',
9    },
10  },
11  server: {
12    port: 3000,
13    open: true,
14  },
15  build: {
16    outDir: 'dist',
17    sourcemap: true,
18  },
19});

▸Environment variables

1// .env
2VITE_API_URL=https://api.example.com
3
4// Использование в коде
5const apiUrl = import.meta.env.VITE_API_URL;

HMR: горячая замена модулей

▸Как работает HMR

Vite использует native ES modules для HMR. При изменении файла обновляется только этот модуль, а не весь bundle.

▸Скорость HMR

Webpack: 1-10 секунд

Vite: менее 50 миллисекунд

▸Пример

vue

1<template>
2  <p>{{ message }}</p>
3</template>
4
5<script setup>
6// Измените message — обновление мгновенное
7const message = ref('Привет мир');
8</script>

Плагины

▸Официальные плагины

1import vue from '@vitejs/plugin-vue';
2import Pages from 'vite-plugin-pages';
3import Components from 'vite-plugin-components';
4
5export default defineConfig({
6  plugins: [
7    vue(),
8    Pages(),
9    Components(),
10  ],
11});

▸vite-plugin-pages

1// Автоматическая маршрутизация
2import Pages from 'vite-plugin-pages';
3
4export default defineConfig({
5  plugins: [Pages()],
6});

▸vite-plugin-components

1// Автоматический импорт компонентов
2import Components from 'vite-plugin-components';
3
4export default defineConfig({
5  plugins: [Components()],
6});

Оптимизация

▸Code Splitting

1// Динамический импорт
2const HeavyComponent = () => import('./components/Heavy.vue');

▸Preload

html

1<link rel="modulepreload" href="/assets/Heavy.abc123.js">

▸Compression

bash

1npm install -D vite-plugin-compression

1import compression from 'vite-plugin-compression';
2
3export default defineConfig({
4  plugins: [compression()],
5});

Тестирование

▸Vitest

bash

1npm install -D vitest

1// vite.config.ts
2export default defineConfig({
3  test: {
4    globals: true,
5    environment: 'jsdom',
6  },
7});

▸Запуск тестов

bash

1npm run test

Production сборка

▸Анализ bundle

bash

1npm install -D rollup-plugin-visualizer

1import visualizer from 'rollup-plugin-visualizer';
2
3export default defineConfig({
4  plugins: [visualizer()],
5});

▸Продвинутая конфигурация

1export default defineConfig({
2  build: {
3    rollupOptions: {
4      output: {
5        manualChunks: {
6          vendor: ['vue', 'vue-router'],
7          utils: ['lodash', 'axios'],
8        },
9      },
10    },
11  },
12});

Сравнение с Webpack

▸Скорость dev-режима

Vite значительно быстрее благодаря use of native ES modules.

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

Vite требует минимума конфигурации. Webpack — много boilerplate.

▸HMR

Vite: мгновенный. Webpack: медленный.

▸Bundle size

Vite генерирует оптимизированные bundles через Rollup.

Миграция с Webpack

▸Пошаговая миграция

Установите Vite и плагины

Создайте vite.config.ts

Замените webpack конфигурацию

Обновите скрипты в package.json

Проверьте работоспособность

▸Параллельная работа

Vite и Webpack могут работать одновременно, что позволяет мигрировать постепенно.

Best Practices

▸Используйте script setup

vue

1<script setup>
2// Автоматический Tree-shaking
3// Минимальный boilerplate
4</script>

▸Динамические импорты

1// Lazy loading компонентов
2const Admin = () => import('./views/Admin.vue');

▸Environment variables

Используйте VITE_ префикс для переменных окружения.

Заключение

#vue#vite#hmr#build#webpack

🛠

Попробуйте наш инструмент

Закрепите знания с помощью интерактивных упражнений

Перейти →

Что такое Vite

▸Определение

Установка

▸Новый проект

▸Добавление в существующий проект

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

▸vite.config.ts

▸Environment variables

HMR: горячая замена модулей

▸Как работает HMR

▸Скорость HMR

▸Пример

Плагины

▸Официальные плагины

▸vite-plugin-pages

▸vite-plugin-components

Оптимизация

▸Code Splitting

▸Preload

▸Compression

Тестирование

▸Vitest

▸Запуск тестов

Production сборка

▸Анализ bundle

▸Продвинутая конфигурация

Сравнение с Webpack

▸Скорость dev-режима

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

▸HMR

▸Bundle size

Миграция с Webpack

▸Пошаговая миграция

▸Параллельная работа

Best Practices

▸Используйте script setup

▸Динамические импорты

▸Environment variables

Заключение

Попробуйте наш инструмент

Похожие статьи

React: полное руководство для собеседования

JavaScript: глубокий анализ для собеседования

Node.js и backend: что спрашивают на собеседовании

DevOps: от основ до продвинутого уровня

Что такое Vite

▸Определение

Установка

▸Новый проект

▸Добавление в существующий проект

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

▸vite.config.ts

▸Environment variables

HMR: горячая замена модулей

▸Как работает HMR

▸Скорость HMR

▸Пример

Плагины

▸Официальные плагины

▸vite-plugin-pages

▸vite-plugin-components

Оптимизация

▸Code Splitting

▸Preload

▸Compression

Тестирование

▸Vitest

▸Запуск тестов

Production сборка

▸Анализ bundle

▸Продвинутая конфигурация

Сравнение с Webpack

▸Скорость dev-режима

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

▸HMR

▸Bundle size

Миграция с Webpack

▸Пошаговая миграция

▸Параллельная работа

Best Practices