10 минут, чтобы понять недавний горячий Vite

внешний интерфейс

Vite — это инструмент для создания пакетов, разработанный Ю Юйси, автором vue.Сегодня основным моментом является то, что горячая загрузка и компиляция выполняются очень быстро во время локальной разработки, а в крупномасштабных проектах это лучше.

Разместите оригинальные слова автора на Weibo:

Vite, сервер разработки, основанный на импорте ES из браузера. Используйте браузер для анализа импорта, компиляции и возврата по запросу на стороне сервера, полностью пропуская концепцию упаковки, и сервер можно использовать по мере необходимости. При этом он не только поддерживает файлы Vue, но и обрабатывает горячие обновления, причем скорость горячих обновлений не будет замедляться по мере увеличения количества модулей. Для производственных сред тот же код можно упаковать с помощью свертки. Несмотря на то, что пока это относительно грубо, я думаю, что у этого направления есть потенциал, и если оно будет сделано хорошо, оно может полностью решить проблему полдня горячих обновлений, таких как изменение строки кода.

Из вышеизложенного видно, что:

  • Основным соответствующим сценарием Vite является режим разработки, пропуск упаковки и загрузка по требованию, поэтому скорость горячего обновления очень высока;
  • В крупномасштабных проектах это может эффективно повысить скорость локальной разработки, компиляции и упаковки, а также решить проблему «ожидания полдня для изменения строки кода»;
  • Браузер анализирует импорт, использует функцию type="module", а затем перехватывает запрос импорта ES, отправленный браузером, и соответствующим образом обрабатывает его;
  • Рабочий режим поставляется с накопительным пакетом, который в будущем должен быть оптимизирован;

1. Модульная функция современных браузеров

Будуscriptпомеченtypeсвойство установлено наmodule, то в js можно использовать функцию модуля (import '**.js'), совместимость es6 естьIE11Не поддерживаются следующие: Из прокси Vue3 и модулей Vite видно, что Youda полностью отказался от IE.

<script type="module" src="main.js"></script>

<script type="module">
import { a } from './a.js'
</script>

2. Перехватывать http-запросы

Разная обработка для разных типов файлов

1. js-файл

Используйте es-module-lexer для анализа js, чтобы получить массив импорта (依赖分析), затем замените синтаксис импорта файлом js, соответствующим запросу.

Оригинальный код:

<div id="app"></div>
<script type="module">
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
</script>

После преобразования:

<div id="app"></div>
<script type="module">
import { createApp } from '/@modules/vue'
import App from './App.vue'

createApp(App).mount('#app')
</script>

2. вью-файл

Трех нормельная сборка, включающая одно файловый Vuetemplate,script,style, Vite разделит однофайловый компонент на три части для соответствующего запроса и обработки.

2.1 template

Вите будетtemplateскомпилировано вrenderвозврат после функции.

2.2 script

Проанализируйте зависимости импорта в js и повторно инициируйте запрос.

2.3 style

Скомпилируй стиль в css и вставь в шапку.

Исходный файл App.vue:

<template>
  <h1>Hello Vite + Vue 3!</h1>
  <p>Edit ./App.vue to test hot module replacement (HMR).</p>
  <p>
    <span>Count is: {{ count }}</span>
    <button @click="count++">increment</button>
  </p>
</template>

<script>
export default {
  data: () => ({ count: 0 }),
}
</script>

<style scoped>
h1 {
  color: #4fc08d;
}

h1, p {
  font-family: Arial, Helvetica, sans-serif;
}
</style>

После конвертации получается:

// localhost:3000/App.vue
import { updateStyle } from "/@hmr"

// 抽出 script 逻辑
const __script = {
  data: () => ({ count: 0 }),
}

// 将 style 拆分成 /App.vue?type=style 请求，由浏览器继续发起请求获取样式
updateStyle("c44b8200-0", "/App.vue?type=style&index=0&t=1588490870523")
__script.__scopeId = "data-v-c44b8200" // 样式的 scopeId

// 将 template 拆分成 /App.vue?type=template 请求，由浏览器继续发起请求获取 render function
import { render as __render } from "/App.vue?type=template&t=1588490870523&t=1588490870523"
__script.render = __render // render 方法挂载，用于 createApp 时渲染
__script.__hmrId = "/App.vue" // 记录 HMR 的 id，用于热更新
__script.__file = "/XXX/web/vite-test/App.vue" // 记录文件的原始的路径，后续热更新能用到
export default __script

3. Горячее обновление

Vite реализует горячее обновление через WebSocket.При изменении кода в браузер через веб-сокет отправляются только измененные файлы.

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

Код горячего обновления Vite на стороне клиента внедряется в файл app.vue в процессе компиляции.

4. Сравнение преимуществ и недостатков Vite и vue-cli

Преимущества интерфейса командной строки Vue Недостатки Vue CLI
испытан в боях и надежен Скорость сервера разработки обратно пропорциональна количеству зависимостей
Совместимость с Вью 2
Может связывать любые типы зависимостей
Экосистема плагинов
Может быть построен для разных целей
Преимущества Вайт Минусы
Сервер разработки в 10-100 раз быстрее, чем Webpack Только для современных браузеров (ES2015+)
Сделайте разделение кода приоритетом Не полностью совместим с модулями CommonJS.
В бета-версии поддерживает только Vue 3
Самый маленький скаффолд не включает Vuex, маршрутизатор и т. д.
Различные серверы разработки и инструменты сборки

V. Резюме

В настоящее время Vite обновляется с очень высокой скоростью, оптимизируя свои собственные функции, и можно ожидать будущего~

6. Ссылка

Категории