Я считаю, что благодаря трудолюбивым крикам You Yuxi многие друзья, работающие с интерфейсом, уже знакомы с vite, инструментом сборки следующего поколения, выпущенным с Vue3.0, и его название происходит от французского сингла fast. Видно, что недавняя основная работа Ю Юйси находится на сайте, чего достаточно, чтобы показать ее важность.
В этой статье мы рассмотрим, что уникального в Vite.
Мир давно страдает от вебпака
Что касается внешнего интерфейса, то вы, должно быть, слышали о веб-пакете. Современные крупномасштабные внешние приложения обычно создаются с использованием этого материала. Однако по мере роста проекта каждый обнаружил несколько «скрытых вещей» в веб-пакете.
- Время холодного старта проекта растет экспоненциально по мере увеличения размера проекта.
- Время горячего обновления также увеличивается с размером проекта.
Итак, у нас есть то, что мы часто называем:npm run dev, а потом сходите в туалет, выпейте чашечку кофе и можете не добежать, когда вернетесь, что очень сильно влияет на эффективность разработки. Хотя webpack предоставляет множество методов для оптимизации сборки, его все еще недостаточно во все более крупных фронтенд-проектах.Есть ли способ решить эту проблему раз и навсегда? Ответ Вите!
Вите родился
Как вите решает проблему этого века, ответ таков:native ES modules. В эпоху, когда браузеры не имеют встроенной модульной поддержки, нам часто нужно упаковать весь проект в js-файл с помощью инструментов построения, таких как веб-пакет, который браузерам удобно вызывать. Однако благодаря постоянным усилиям производителей браузеров практически все современные браузеры поддерживают синтаксис импорта/экспорта.Вы можете увидеть совместимость конкретных браузеров на рисунке ниже.
Большинство браузеров уже могут анализировать операторы импорта в js-файлах.Похоже ли процесс упаковки webpack на то, чтобы снять штаны и пукнуть?
Если вы хотите суммировать vite одним словом, это быстро Это данные, перечисленные Youda в vite PPT.
- Время запуска службы
- Время горячей замены модуля (HMR)
С точки зрения данных, это действительно зависание Webpack, давайте посмотрим, как он это делает.
Почему Webpack такой медленный?
Как упоминалось ранее, в предыдущих браузерах не было модульной конструкции, поэтому ожидается, что весь исходный код будет скомпилирован в файл js для использования браузером, поэтому, когда мы запускаем команду запуска во время разработки, веб-пакет всегда необходимо проиндексируйте файлы всего проекта из входного файла и скомпилируйте их в один или несколько отдельных js-файлов.Даже если принято разделение кода, скомпилированные файлы по всем маршрутам нужно генерировать одновременно (именно поэтому разделение кода очень важно для режима разработки). производительность не помогает). Это также приводит к экспоненциальному росту времени запуска службы по мере увеличения сложности проекта.
Как Vite решил проблему
Как работает vite с помощьюnative ES modulesДля оптимизации времени запуска службы, при использовании Vite для запуска сервера разработки, не обязательно предварительно компилировать файл (по сути, происходит аналогичный процесс, который подробно описан ниже), а когда браузер запрашивает файл соответствующий URL, предоставляется соответствующий файл. , который реализует процесс предоставления только скомпилированного файла модуля по соответствующему маршруту без индексации всего кода в проекте, который использует ленивую загрузку маршрута, а время запуска проекта составляет всегда постоянный. Он не будет расти по мере усложнения проекта, посмотрим как это делается
Как работает Вайт
Зависит от предварительно построенного
Студенты, знакомые с нативными модулями ES, могут подумать, что он не поддерживает импорт следующих голых модулей, так что же мне делать?
import { someMethod } from 'my-dep'
Давайте посмотрим, как реализован Vite, который можно напрямую открыть и использовать.yarn create @vitejs/appСоздание react + ts этого проекта основано на коде src/main.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
Затем запустите проект, это файл src/main.tsx, скомпилированный Vite.
можно увидеть предыдущийfrom 'react'был переписан наfrom "/node_modules/.vite/react.js?v=432aac16"
Похоже, что Vite кэширует предварительно созданные зависимости дляnode_modules/.viteПод путем видно, что за именем файла следует строка случайных строк. Легко подумать, что она используется для управления кешем браузера. Давайте откроем его.react.js?v=432aac16Взгляните на заголовки запроса этого файла:
Как и ожидалось, свойство Cache-Control записана как:max-age=31536000,immutable, установите этот файл в качестве постоянного принудительного кэша, то есть всегда извлекайте файл из локального, а затем управляйте обновлением версии, добавляя хеш-значение к имени файла. Таким образом, оценка кэша зависимых файлов передается старшему брату браузера, что снижает нагрузку на сторону Vite, что действительно замечательно.
Вы думаете, что все кончено, это не так, откройтеreact.js?v=432aac16 внешний вид файла
Что это за штука? Почему это не фамильярный брат, что еще тайно сделал Вите? Правильно, Vite не просто переписывает путь в этот момент. Когда служба запускается, vite проверит весь исходный код на наличие простого оператора импорта модуля, такого как import {someMethod} из 'my-dep', и выполнит следующие действия.
- готовый
- Переписать на действительный URL
Среди них «предварительная сборка» — это «предварительно скомпилированный файл», упомянутый выше.В начале проекта Vite будет использовать esbuild для «предварительной сборки зависимостей» для двух целей.
1. Совместимость с CommonJS и UMDНа этапе разработки сервер разработки Vite обрабатывает весь код как собственные модули ES, поэтому зависимости, опубликованные как CommonJS или UMD, необходимо сначала преобразовать в ESM на этапе предварительной сборки.
2. Оптимизируйте производительность загрузкиVite преобразует зависимости ESM со многими внутренними модулями в один модуль, чтобы улучшить последующую производительность загрузки страницы (уменьшить количество запросов), например, lodash-es имеет более 600 встроенных модулей, отправляя более 600 http-запросов за раз, даже если использование HTTP2 также недопустимо.Большое количество сетевых запросов вызовет перегрузку сети на стороне браузера, что приведет к очень медленной загрузке страницы.Предварительно собирая lodash-ы в виде модуля, нужен только один HTTP-запрос!
Для получения более подробной информации о «в зависимости от предварительной сборки» см.официальная документация.
После предварительной сборки зависимостей используйтеes-module-lexer + magic-stringПерепишите упрощенный оператор импорта голого модуля. Поскольку полного обхода AST нет, он очень быстрый, менее 1 мс для большинства файлов!
компиляция файлов
После решения проблемы с импортом голых модулей, можете ли вы спокойно развиваться? Обратите внимание, что наш проект построен с использованием TypeScript+React, браузер не может напрямую парсить tsx, старый способ — смотреть на скомпилированный файл напрямую.Да, я видел знакомый React.createElement. Студенты, знакомые с webpack, должны были сразу подумать об этом. Разве это не работа babel-loader? В Vite нет функции загрузчика. Как это реализовано? Ответ такойesbuild, Vite использует esbuild в качестве синтаксического анализатора для некоторых типов файлов (например, TSX и TypeScript).Vite не компилирует все файлы в типы, приемлемые для браузеров, заранее, как веб-пакет, а после получения HTTP-запросов, инициированных браузерами. Затем скомпилируйте соответствующий файл и предоставьте его в браузер. Таким образом, возникнет вполне резонный вопрос, достаточно ли скорости?
Файл нужно компилировать каждый раз при загрузке страницы.Кажется, это повлияет на скорость загрузки? Следует еще раз упомянуть, что инструмент сборки esbuild, используемый Vite, представляет собой инструмент сборки, написанный на Go, Согласно описанию на официальном сайте, скорость в 10-100 раз выше, чем у существующих инструментов сборки (webpack не говорит о вас). ЭтоОфициальный сайтДоступны более подробные данные испытаний производительности
Почему esbuild так быстро?
Почему один и тот же инструмент сборки, esbuild, так хорош? В частности, следующие пункты (отОфициальный сайт Esbuild)
1. Написано на Go и скомпилировано в машинный код
Современные инструменты сборки обычно пишутся на JavaScript, и для такого интерпретируемого языка (динамического языка) производительность в командной строке просто ужасна. Поскольку движок V8 впервые сталкивается с кодом при каждом запуске компиляции, никакие меры по оптимизации выполнить невозможно. И esbuild написан на Go, скомпилированном языке (статическом языке), который был скомпилирован в машинный код, который может быть непосредственно выполнен машиной. Пока esbuild компилирует ваш код JavaScript, Node может быть занят синтаксическим анализом кода вашего инструмента сборки.
Помимо этого, Go — это язык, предназначенный для параллелизма, в то время как JavaScript — явно нет (старый однопоточный).
- Go разделяет пространство памяти между потоками, и JS должен сериализовать данные перед их отправкой, если он хочет передавать данные между потоками.
- Параллелизм в Go и JS имеет соответствующие механизмы сборки мусора: Go разделяет кучу между всеми потоками, а в JS каждый поток имеет независимую кучу.
Согласно тестированию, проведенному авторами esbuild, это, по-видимому, снижает мощность параллельной обработки рабочих потоков JavaScript вдвое, вероятно, потому, что половина ядер вашего процессора занята сбором мусора для другой половины.
2. Широкое использование параллельных алгоритмов
В дополнение к неотъемлемым преимуществам языка Go для параллелизма, которые значительно превосходят JavaScript в обработке параллельных задач, внутренние алгоритмы Esbuild также тщательно разработаны для максимального использования всех ядер ЦП.
3. В esbuild все написано с нуля
Есть много преимуществ в производительности, когда вы пишете все сами, а не используете стороннюю библиотеку. Производительность можно рассматривать с самого начала, гарантируя, что все использует согласованные структуры данных, чтобы избежать дорогостоящих преобразований, конечно, недостатком является то, что это много работы.
4. Более эффективное использование памяти
- esbuild снижает влияние скорости доступа к памяти на скорость упаковки за счет уменьшения количества обходов AST (в три раза)
- Еще одно преимущество языка Go заключается в том, что он может более компактно хранить данные в памяти, благодаря чему высокоскоростной кэш ЦП может хранить больше контента.
Vite2.0 только что выпустила стабильную версию, в которой встроенные инструменты были заменены с Rollup на esbuild, а производительность увеличена в десятки раз.
Особенности Vite
Поняв некоторые принципы, давайте посмотрим, что может сделать Vite?
Горячая перезагрузка модуля
Vite поддерживает горячую перезагрузку модулей для Vue и React, что позволяет точно обновлять страницу без перезагрузки страницы или удаления состояния приложения.
TypeScript
Vite поддерживает импорт файлов .ts из коробки, но стоит отметить, что Vite выполняет только перевод файлов ts и не выполняет проверку типов. Это связано с тем, что Vite использует esbuild для перевода без информации о типе. такие как «постоянные перечисления» и «неявный импорт только типов» не поддерживаются. ты должен быть в своемtsconfig.json середина compilerOptionsустановить в"isolatedModules": true, так что TS предупредит вас о функциях, которые не работают в автономном режиме компиляции.
Vue
Как брат, Vite, естественно, обеспечит первоочередную поддержку Vue.
- Поддержка компонентов одного файла Vue 3:@vitejs/plugin-vue
- Vue 3 JSX поддерживает:@vitejs/plugin-vue-jsx
- Vue 2 поддерживает:underfin/vite-plugin-vue2
JSX
Другому фронтенд-гиганту, React, тоже не о чем беспокоиться, .jsx и .tsx тоже доступны из коробки. Его трансляция осуществляется через ESBuild, и по умолчанию используется форма React16.О поддержке JSX в форме React17 в esbuild см.здесь
CSS
При импорте файла .css содержимое вставляется в тег, а также поддерживается горячая перезагрузка. Также можно получить обработанный CSS в виде строки, которая по умолчанию экспортируется как его модуль. Также поддерживает «@import inline» «PostCSS» «CSS-модули» «CSS-препроцессор», подробности см. в документации.
Из-за нехватки места я просто перечисляю поддержку нескольких часто используемых типов файлов. Фактически, Vite также поддерживает многие типы файлов, такие как «JSON», «Веб-сборка» и «Веб-работник». Вы можете перейти кофициальная документацияузнать больше
напиши в конце
На самом деле о Vite еще много чего можно написать, например, об оптимизации в производственной среде, рендеринге на стороне сервера и т. д., но из-за времени, места и возможностей я могу только пожалеть об этом для следующей статьи. Это не будет слишком долго!