Переход с Vue-CLI и Webpack на Vitejs

Kate · 12 Авг 2021

Веб-приложение Qvault, в котором размещаются все мои курсы по кодированию, представляет собой одностраничное приложение, написанное на Vue 2, с планами перехода на Vue 3 в ближайшее время. Тем временем я обнаружил новое классное инструментальное приложение под названием Vite, которое предложило несколько вещей, привлекших мое внимание.

Практически мгновенное время запуска сервера разработки
Горячая замена модулей из коробки
Простая конфигурация
Поддержка модулей ES из коробки

Это особенно заинтересовало меня, потому что сервер разработки моего (довольно) простого приложения требует более 10 секунд для запуска с Vue-cli и Webpack, и я потратил много часов в прошлом, пытаясь настроить Webpack и Babel, когда мне нужны были только базовые конфигурации Vue. Давайте рассмотрим несколько быстрых сравнительных примеров, прежде чем я углублюсь в руководство по миграции, чтобы вы могли понять, будет ли польза от данного перехода для вас.

	Vite	Vue-cli + Webpack
Время начала работы сервера Dev	~600ms	~10,000ms
Время HMR	Не уверен, кажется моментально	~2,000ms
Время сборки продакшена	~15s	~22s
Количество подключенных JS-файлов	29 JS modules	18 JS Modules
Средний размер пакета JS	~29kb	~61kb
Общий размер пакета JS	~840kb	~1098kb

Vite в сравнении с Vue-cli + Weback

Кроме того, чтобы получить 18 модулей, показанных выше, используя Vue cli и webpack, мне пришлось добавить аннотации комментариев в файл routes.js. Из коробки Vue-cli выдает один огромный пакет, что намного хуже по соображениям производительности страницы. Vite сразу же разбивает пакет по модульным линиям без необходимости использовать эти надоедливые аннотации.

Руководство по миграции

Давайте рассмотрим основные шаги по переносу проекта на Vue 2 из Vue CLI в Vite.

Шаг 1 - зависимости

Все зависимости @vue-cli... должны быть удалены. Для меня это означало удаление следующих.

- "@vue/cli-plugin-babel": "^4.5.6",
- "@vue/cli-plugin-eslint": "^4.5.6",
- "@vue/cli-service": "^4.5.6",
Они были заменены на Vite и его плагин для Vue.

+ "vite": "^2.2.1",
+ "vite-plugin-vue2": "^1.4.4",
+ "@vue/compiler-sfc": "^3.0.11",
Далее, Vite поддерживает sass из коробки, поэтому я могу удалить свои старые зависимости.

- "node-sass": "^4.12.0",
- "sass-loader": "^10.0.2",
И я заменил их на простой компилятор sass, потому что Vite требует, чтобы он был доступен.

+ "sass": "^1.32.11",
Наконец, поскольку Vite поддерживает только современные браузеры (к сожалению, если вам нужно поддерживать старые, Vite может вам не подойти), я удалил зависимости babel и мой файл babel.config.js.

- "babel-eslint": "^10.1.0",
- "babel-runtime": "^6.26.0"
Перемещение index.html

Vite не хранит index.html в папке public, как вы привыкли, вместо этого он находится прямо в корне вашего проекта, поэтому переместите его туда. Vite также нужна дополнительная точка входа.

<body>
<noscript>
<strong>
We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>


<script type="module" src="/src/main.js"></script>
</body>
Вам также потребуется изменить ссылки на статические активы, чтобы использовать простой /, а не <%= BASE_URL %>.

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Конфигурация Vite

Вот vite.config.js, на котором я остановился, он находится в корне проекта.

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';
import path from 'path';
export default defineConfig({
plugins: [ createVuePlugin() ],
server: {
port: 8080
},
resolve: {
alias: [
{
find: '@',
replacement: path.resolve(__dirname, 'src')
}
]
},
build: {
chunkSizeWarningLimit: 600,
cssCodeSplit: false
}
});
Блок resolve позволяет мне импортировать компоненты, используя @ в качестве корня каталога src. Например, import Tooltip from '@/components/Tooltip.vue';.

Блок build выполняет несколько действий, во-первых, он увеличивает предупреждающий лимит размера фрагмента с 500 кб до 600 кб по умолчанию. Я сделал это только потому, что у меня очень тяжелый компонент редактора кода, и я не хочу видеть предупреждение каждый раз.

Во-вторых, мой сайт полностью сломался, когда я позволил Vite разделить мои .css файлы так, как он хотел. Это меня очень расстраивает, потому что я бы предпочел, чтобы мои пользователи загружали только те CSS, которые им нужны. Если у кого-то была подобная проблема, пожалуйста, дайте мне знать, как вы ее решили.

Расширения .vue

Vite однозначно требует, чтобы все .vue импорты включали .vue в путь. Это может быть немного утомительно, если вы не использовали расширения. Все ваши импорты должны быть обновлены с import Tooltip from '@/components/Tooltip' на import Tooltip from '@/components/Tooltip.vue'.

Разбивка Webpack для лениво загружаемых маршрутов

Если ранее вы использовали аннотации комментариев в Webpack для разбиения вашего пакета, то теперь вам не нужно этого делать! Просто удалите их.

const Courses = () => import(/* webpackChunkName: "Courses" */ '@/views/Courses.vue');
становится

const Courses = () => import('@/views/Courses.vue');
Скрипты Yarn

Я использую следующие три скрипта.

"serve": "vite --open",
"preview": "vite preview --open --port 8080",
"build": "vite build --out-dir dist",
"lint": "eslint src",
"lint:fix": "eslint src --fix"

yarn serve запускает сервер разработки и открывает предпочитаемый браузер.
yarn build создает продакшн-файлы и сохраняет их в dist
yarn preview обслуживает продакшн-файлы локально для тестирования
yarn lint запускает eslint и сообщает о проблемах. Вероятно, до этого вы использовали vue-cli-service lint, который просто запускал eslint под капотом.

Окружение Node

Vite требователен к тому, чтобы код Node.js не подставлялся в ваш фронт-енд бандл. Я столкнулся с проблемой, когда зависимость, которую я имел, нуждалась в определении global. Конечно, лучше всего не использовать такие зависимости, но в моем случае это было необходимо, поэтому я добавил небольшую прокладку (shim) в index.html.


<script>
const global = globalThis;
</script>

Vue 3

Мой следующая миграция, по всей видимости, будет на Vue 3, предположительно в этом году. На самом деле я просто ждал большей стабильности и поддержки новой основной версии некоторыми из моих зависимостей.