Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Веб-приложение 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>
<!-- this new script is for vite -->
<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.
<!-- polyfill global because shit dependencies -->
<script>
const global = globalThis;
</script>
<!-- end polyfill -->Vue 3
Мой следующая миграция, по всей видимости, будет на Vue 3, предположительно в этом году. На самом деле я просто ждал большей стабильности и поддержки новой основной версии некоторыми из моих зависимостей.
Материал подготовлен в рамках курса «Vue.js разработчик».
Всех желающих приглашаем на открытый урок «Обзор возможностей Vue3». На этом занятии мы:
- разберём, как изменился код инициализации приложения createApp;
- как мигрировать V2 на V3, Migration build;
- улучшения для написания переиспользуемых компонентов;
- использование vuex или composition api hooks.
РЕГИСТРАЦИЯ
