Qwik starter CLI — это простой стартовый инструмент, с которого вы можете попробовать поэкспериментировать с Qwik из первых рук и лучше понять, насколько он отличается.
CLI состоит из этих четырех примеров, которые будут расширены в ближайшем будущем:
starter: Простой привет, мир.starter-builder: Базовый привет, мир, интегрированный с Qwik API Builder.starter-partytown: Простой привет, мир, показывающий, как можно выполнять дорогостоящие задачи на веб-воркере с помощью Partytown.todo: классическое приложение TodoMVC.
Qwik — это уникальная среда JavaScript, поскольку она единственная из существующих на сегодняшний день, которая может гидратировать не по порядку на уровне компонентов.
С развитием JavaScript и его фреймворков современные веб-сайты теперь требуют огромного количества JavaScript, чтобы стать интерактивными. И чем больше растет наш сайт, тем больше увеличивается сложность сайта, что в конечном итоге требует большего количества кода, что негативно влияет на производительность запуска сайта. Слишком много JavaScript оказывает на сайт два основных влияния, т. е.
- Пропускная способность сети. Если на нашем сайте большое количество JS-кода, загрузка на устройство клиента в более медленной сети займет много времени.
- Время запуска: влияет на время запуска сайта, поскольку весь код JS должен выполняться как часть гидратации всякий раз, когда загружается страница.
Как упоминалось выше, устраняя узкие места во времени загрузки, Qwik претендует на достижение двух важных целей.
- Мгновенная загрузка. В отличие от других фреймворков, quick является «возобновляемым», новой парадигмой, придуманной командой Qwik для обеспечения нулевой гидратации. Это позволяет приложениям Qwik иметь мгновенную интерактивность загрузки, независимо от размера или сложности приложения. Это означает, что приложение будет загружаться мгновенно без каких-либо задержек в любой сети.
- Производительность: Qwik достигает этого, предоставляя чистый HTML и постепенно загружая JS по мере необходимости. Это означает, что на сайте очень мало JavaScript для выполнения при загрузке, и код загружается только при взаимодействии. Это делает его первой структурой HTML.
Как Qwik достигает этого?
Qwik в основном достигает этого с помощью двух важных стратегий:
- Отложить выполнение и загрузку JavaScript на максимально возможное время
- Сериализировать состояние выполнения приложения и фрейма на сервере и возобновить его на клиенте.
Давайте разберемся, как Qwik реализует эти стратегии.
Меньше JavaScript
Как мы видели выше, одной из самых больших проблем для сайта является огромный объем JavaScript, который он должен отправить клиенту. Qwik сразу устраняет это, отправляя клиенту только минимальный код JavaScript. Теоретически приложению Qwik требуется всего 1 КБ JavaScript, чтобы оно стало интерактивным.
Вы можете подумать, что если мы не будем поставлять JS-код, то как наше приложение станет интерактивным? На самом деле Qwik отправляет его, но не при запуске приложения, а вместо этого в интерактивности. Qwik использует много информации во время SSR, чтобы как можно скорее начать предварительную выборку только фрагментов интерактивности текущей страницы, таким образом, когда пользователь щелкает или взаимодействует, JS уже загружен.
Это похоже на то, что мы называем ленивой загрузкой, но Qwik доводит ленивую загрузку до экстремального уровня, постепенно загружая JavaScript на основе действий пользователя.
Мы знаем, что гидратация — это процесс инициализации среды JavaScript после ее обработки сервером. После рендеринга HTML на сервере необходимо повторно инициализировать структуру JavaScript на клиенте, установив все прослушиватели событий на узлах DOM, создав внутреннюю структуру данных и восстановив состояние приложения.
Все современные фреймворки JavaScript требуют этого шага, чтобы сделать приложение интерактивным. Этот процесс гидратации довольно дорогой, и Qwik полностью исключает его, что делает приложение Qwik запускаемым мгновенно. Для этого Qwik приостанавливает выполнение на сервере и возобновляет выполнение на клиенте.
