vite - Наслаждайтесь плавным опытом разработки

JavaScript

автор:maxin, несанкционированное воспроизведение запрещено.

Введение

viteПроизносится [veet], что по-французски означает легкий, бойкий.

Среда разработки запускает локальные сервисы через koa, а производственная среда упаковывается и собирается через Rollup.

Функции

  • Время запуска Dev-сервера не превышает 300 мс
  • Обновление горячей замены модуля (HMR) занимает не более 100 мс
  • пройти черезesbuildДля поддержки преобразования TS/JSX
  • нагрузка по требованию

esbuild

Golang, используемый в нижней части esbuild, имеет очевидные преимущества в скорости упаковки по сравнению с традиционными инструментами построения веб-сайтов. Компиляция Typescript намного быстрее, чем официальный tsc

Сравните vue-cli

В соответствии с предпосылкой vue3 и включая 10 компонентов, vite имеет большее ускорение времени запуска сервера разработки, чем vue-cli.

dev-сервер для традиционных инструментов упаковки

  • Перед локальным запуском необходимо загрузить все файлы модуля и экспортировать пакет для отображения страницы.
    • Включает разбор отношений импорта/экспорта для каждого файла
    • Сортировать отдельные модули, переписывать, связывать
  • Чем больше приложение, тем медленнее запускается служба разработки
  • Разделение кода предназначено только для производственных сборок.

dev-сервер на базе браузерного модуля ES

  • <script type="module">
  • Браузеры могут анализировать импорт ES-модулей и отправлять http-запросы.
  • Сервер разработки перехватывает запрос браузера на модуль и возвращает обработанный результат. <script type="module">Особенности модуля ES:
  • Код модуля выполняется только после загрузки
  • Модули, ссылающиеся на один и тот же js, загружаются только один раз.
  • Модули являются синглтонами
  • Модули могут запрашивать загрузку других модулей
  • Поддержка циклических зависимостей
  • Выполняется в строгом режиме по умолчанию
  • Не разделяемое глобальное пространство имен
  • Значение this на верхнем уровне модуля не определено.
  • Объявление модуля var не добавляется в окно

Структура каталогов

$ tree -L 3 -I 'node_modules' ./src
./src
├── client # 客户端运行代码，主要是客户端的 socket 通信以及 HMR 相关
│   ├── client.ts
│   ├── env.d.ts
│   ├── tsconfig.json
│   └── vueJsxCompat.ts
├── hmrPayload.ts # HMR 类型定义
└── node # 服务端运行代码
    ├── build # vite build 命令运行代码
    │   ├── buildPluginAsset.ts
    │   ├── buildPluginCss.ts
    │   ├── buildPluginEsbuild.ts
    │   ├── buildPluginHtml.ts
    │   ├── buildPluginManifest.ts
    │   ├── buildPluginReplace.ts
    │   ├── buildPluginResolve.ts
    │   ├── buildPluginWasm.ts
    │   └── index.ts
    ├── cli.ts
    ├── config.ts
    ├── esbuildService.ts # esbuild 相关代码
    ├── index.ts
    ├── optimizer # 预优化
    │   ├── entryAnalysisPlugin.ts
    │   ├── index.ts
    │   └── pluginAssets.ts
    ├── resolver.ts # 模块加载逻辑
    ├── server # koa服务使用的一些中间件
    │   ├── index.ts
    │   ├── serverPluginAssets.ts
    │   ├── serverPluginClient.ts
    │   ├── serverPluginCss.ts # 处理css和其他css预处理器文件
    │   ├── serverPluginEnv.ts
    │   ├── serverPluginEsbuild.ts
    │   ├── serverPluginHmr.ts # 服务端热模块替换相关
    │   ├── serverPluginHtml.ts
    │   ├── serverPluginJson.ts
    │   ├── serverPluginModuleResolve.ts # 处理 /@modules/:id 开头请求的文件
    │   ├── serverPluginModuleRewrite.ts
    │   ├── serverPluginProxy.ts 
    │   ├── serverPluginServeStatic.ts # koa静态服务器
    │   ├── serverPluginSourceMap.ts
    │   ├── serverPluginVue.ts # 处理.vue文件
    │   ├── serverPluginWasm.ts
    │   └── serverPluginWebWorker.ts
    ├── transform.ts
    ├── tsconfig.json
    └── utils
        ├── babelParse.ts
        ├── createCertificate.ts
        ├── cssUtils.ts
        ├── fsUtils.ts
        ├── index.ts
        ├── openBrowser.ts
        ├── pathUtils.ts
        ├── resolveVue.ts
        ├── shims.d.ts
        └── transformUtils.ts

что делает вите?

  • $ vite
  • Выполните js, соответствующий полю bin в package.json.
  • createServer
  • Инициализировать коа, наблюдатель, преобразователь
  • Прочитайте конфигурацию и объедините ее с контекстом koa.
  • Используйте кучу плагинов от koa middlewares
  • Предварительно оптимизировать файлы модулей, от которых зависят зависимости в пользовательском проекте.

промежуточное ПО коа

Режим промежуточного программного обеспечения koa используется in vite для обработки различных типов запрошенных файлов Порядок выполнения промежуточного программного обеспечения аналогичен луковой модели, показанной на рисунке ниже.

Давайте рассмотрим простой пример

Порядок выполнения следующий:

// 第一层洋葱 - 开始
// 第二层洋葱 - 开始
// 第三层洋葱 - 开始
// 第三层洋葱 - 结束
// 第二层洋葱 - 结束
// GET / - 2ms
// 第一层洋葱 - 结束
// 第一层洋葱 - 开始

запрос на перехват

  • промежуточное ПО koa, используемое в vite
  • каждыйpluginэто функция
  • использовать одно или несколько промежуточных программ после выполнения
  • Анализировать и перезаписывать файлы ресурсов при запросе и ответе
  • Возвращает файл, который непосредственно исполняется браузером.

еслиimportСледующий путь не начинается с.,./,../В начале, что мне делать, если браузер его не распознает?

Когда браузер осуществляет доступ, префикс пути преобразуется в/,/@module/:id

включи--debugРежим, вы можете увидетьvite:rewriteОбработка перезаписи пути

Роль модуля RewritePlugin:

  • Перехватывать файлы js, включая файлы *.vue<template>а также<script>
  • Преобразование файла в строковое содержимое через читаемый поток и чтение
  • используя предоставленную esbuildes-module-lexerвыполнить лексический анализ
  • использоватьmagic-stringзаменить нераспознанные пути в импорте
    • Импорт голого модуля vue -> @module/vue.js
    • Импорт относительного пути ./App.vue -> /src/App.vue
  • Переписанная строка записывается в ctx.body и возвращается к следующему промежуточному программному обеспечению.
  • ctx.path и перезаписываемый файл склеиваются как ключ rewriteCache, а файл кэшируется как значение
  • Переписанный путь снова перехватит запрос к серверу
  • В следующий раз, если путь+файл не изменится, вернуться непосредственно к файлу
  • rewriteCache этоlru-cacheСгенерированная структура данных, подобная карте

rewriteImportsметод

resolveImportметод

Разобрать node_modules

Роль модуляResolvePlugin:

  • Промежуточное ПО перехватывает ctx.path в начале /@modules/
  • Если в зависимостях пользовательского проекта нет vue, используйте @vue в зависимостях vite
  • Если есть путь к файлу, соответствующий идентификатору в moduleIdToFileMap, прочитать и вернуть файл
  • Если предварительно оптимизированный каталог node_modules/.vite_opt_cache имеет идентификатор, прочитайте и верните файл
  • Если его нет, проанализируйте путь к файлу, соответствующий атрибуту модуля package.json в идентификаторе модуля в разделе node_modules, прочитайте и верните файл.

Как быть с файлами *.vue?

  • пройти черезvuePluginПромежуточное ПО для анализа
  • использовать@vue/compiler-sfcРазобрать файл vue, переписать его в новый скрипт и экспортировать в виде модуля es
  • После его анализа браузером снова асинхронно запрашивается шаблон обработки запроса с параметром запроса.
  • использовать@vue/compiler-domСкомпилируйте, экспортируйте функцию рендеринга для обработки стиля
  • С горячим обновлением updateStyle и экспортом содержимого css в виде строки JSON

обработанныйstyleдокумент

обработанныйtemplateдокумент

Результат анализа можно использовать непосредственно в методе createApp.

vite.config.js

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

примерно включаетproxy,configureServerЖдать

HMR

Когда путь request.path равен /vite/client, из запроса получается соответствующий клиентский код, в клиенте создается служба веб-сокета и устанавливается соединение с сервером черезchokidarЭта библиотека создает экземпляры наблюдателя, отслеживает изменения файлов, а различные сообщения запускают некоторые события для обеспечения мгновенной горячей замены модуля на стороне браузера.

некоторые оптимизации

Предварительная оптимизация перед запуском сервиса

Перед запуском службы будет выполнена предварительная оптимизация, а npm-зависимости пользовательского проекта будут упакованы и кэшированы в каталоге .vite_opt_cache под node_module.В этих js-файлах нет импорта, поэтому нет необходимости инициировать несколько запросы.Использование HTTP-кеша может улучшить чтение модулей в node_modules.скорость загрузки

После выполнения команды vite установите пакет npm напрямую, без перезапуска службы.

Сначала запустите сервер, затем установите lodash-ы, пропустите предварительную оптимизацию, понаблюдайте за сетью и обнаружите, что запросов больше 600.

Устанавливайте lodash-ы перед запуском сервера, количество запросов значительно снижается после предоптимизации

ctx.readметод будет читать кэшированный файл из памяти

Модуль node_modules кэшируется в памяти после первого разбора, вместо того, чтобы каждый раз читать с диска

http2/https

воплощать в жизньvite --httpsПротокол http2 будет включен, и несколько запросов будут выполняться одновременно через TCP-соединение.

Суммировать

vite использует экспорт-импорт на стороне браузера для импорта и экспорта модулей и в то же время реализует загрузку по требованию. vite в значительной степени зависит от функции сценария модуля. В настоящее время это все еще версия rc, и проект все еще находится в быстрой итерации, поэтому вы можете сначала испытать его на себе.

Категории