news.shamcode.ru | Переход с Vue-CLI и Webpack на Vite: ускоряем разработку Vue 3

Vue.js - один из самых популярных JavaScript-фреймворков, который используется для создания динамических пользовательских интерфейсов. С появлением Vue 3, разработчики получили еще больше возможностей для создания мощных и эффективных приложений. Одним из новых инструментов в арсенале Vue 3 является Vite - быстрый и легковесный бандлер, который значительно упрощает процесс разработки и ускоряет сборку проекта. В этой статье мы рассмотрим, как перейти от стандартного подхода с использованием Vue-CLI и Webpack к более продвинутому и эффективному методу работы с помощью Vite.

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

	Vue-CLI и Webpack	Vite и Yarn
Время запуска и первоначальной конфигурации серверной части приложения *(dev)*	≈ 10.000 ms	≈ 500 ms
Время автоматической замены модулей в процессе разработки *(Hot Module Replacement)*	≈ 2.000 ms	≈ 10 ms
Время сборки исходного кода приложения *(build)*	≈ 30 ms	≈ 15 ms
Количество подключенных JavaScript файлов	18 модулей	29 модулей

Как ускорить разработку Vue-приложений с помощью Vite: от проекта на Vue-CLI к новым возможностям Vue 3

Использование Vite вместе с Yarn позволяет значительно ускорить процесс разработки Vue-приложений по сравнению с использованием Webpack и Vue-CLI. Благодаря быстрому запуску и горячей перезагрузке изменений, разработчики могут экономить много времени и повышать эффективность своей работы.

Пункт 1. Изменение package.json

В первую очередь необходимо удалить все зависимости, связанные с @vue/cli, ведь они нам больше не понадобятся.

- "@vue/cli-plugin-babel": "~5.0.0",
- "@vue/cli-plugin-eslint": "~5.0.0",
- "@vue/cli-plugin-router": "~5.0.0",
- "@vue/cli-plugin-vuex": "~5.0.0",
- "@vue/cli-service": "~5.0.0",
. . .

И вместо них добавить модуль Vite и его плагин для Vue 3.

+ "vite": "^5.0.10", 
+ "@vitejs/plugin-vue ": "^4.5.2",

Сам Vite поддерживает только современные браузеры, поэтому мы можем спокойно избавиться от Babel, удалив все зависимости и файл с конфигом - babel.config.js.

- "babel-eslint": "^10.1.0", 
- "babel-runtime": "^6.26.0",

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

- "node-sass": "^4.12.0", 
- "sass-loader": "^10.0.2",

+ "sass": "^1.70.0",

Пункт 2. Перемещение index.html

Vite использует другой подход к структуре проекта, где index.html находится в корне проекта, а не в папке public, как многие привыкли. Это позволяет упростить настройку сервера разработки и ускорить процесс разработки.

Для использования статических активов, таких как изображения или CSS-файлы, нужно использовать простой / вместо <%= BASE_URL %>, как это было в Vue CLI.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Habr Vite App (luckoff)</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Пукнт 3. Настройка main.js

Файл main.js все продолжает оставаться в папке /src, но для запуска проекта в Vite необходимо внести некоторые изменения в этот файл.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

Здесь мы импортируем функцию createApp из библиотеки Vue и передаем ей компонент App, который мы определили в файле App.vue. Затем мы вызываем метод mount на созданном экземпляре приложения и передаем ему селектор элемента DOM, в котором мы хотим отображать приложение.

Пункт 4. Настройка конфигурации Vite.js

Для продолжения настройки проекта в Vite необходимо удалить файл vue.config.js из корня проекта и создать новый файл vite.config.js.

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/index.scss";`
      }
    }
  },
})

Конфигурация Vite	Описание
`export default defineConfig({ ... })`	экспортируется объект с настройками для Vite
`plugins: [vue()]`	подключается плагин vue, который позволяет использовать файлы .vue в проекте
`resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }`	создается псевдоним @ для пути к директории src
`css: { preprocessorOptions: { scss: { additionalData: '@import "@/assets/scss/index.scss";' } } }`	задаются опции для обработки стилей. В данном случае, для препроцессора SCSS указывается дополнительный импорт файла index.scss, который находится в директории src/assets/scss

Пункт 5. Изменение скриптов для запуска с Yarn

На этом этапе необходимо изменить существующие скрипты для запуска проекта, чтобы использовать Yarn вместо npm.

"scripts": {
  "dev": "vite --open",
  "build": "vite build",
  "preview": "vite preview",
  "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},

Скрипт запуска	Описание
`yarn dev`	Запустить сервер разработки и открыть браузер
`yarn build`	Создать продакшн-файлы и сохранить их в папке dist
`yarn preview`	Обслуживать продакшн-файлы локально для тестирования
`yarn lint`	Проверить код на наличие проблем с помощью eslint