追求极致性能！Qwik 1.0版本发布

最新推荐文章于 2024-09-02 09:34:46 发布

Cikayo

最新推荐文章于 2024-09-02 09:34:46 发布

阅读量269

点赞数 1

文章标签： javascript 前端 qwik

本文链接：https://blog.csdn.net/weixin_42452015/article/details/133782482

版权

前言

偶然发现 Qwik 这个 Node.js 后端框架，感觉非常新奇，它构建的网站，能够在谷歌的网站评测工具中跑出100分满分的成绩，而且还是移动端（一般情况下，移动端分值要低于PC端）！不得不说它是真的流弊。

有过开发经验的童鞋都知道，页面加载的 js 文件有时会很大，里面包含了这个页面上所有 DOM元素 的事件方法。但是，通常情况下，用户并不会触发所有的事件，也就是说，js 文件中的方法代码，绝大部分是用不到的！

Qwik 帮我们做的，就是把所有的事件方法全部拆分成单独的 js 文件，用户需要触发时从服务器上下载下来，然后触发，这样极大的减少了 js 文件的体积。（官方说，在页面加载时只加载一个 1k 大小的 js 文件）

如今，终于迎来了它的 v1.0 版本。

本文通过谷歌翻译直译过来，里面可能会有一些表述不准确的地方，原文链接在文末。

正文

Qwik 团队很高兴地宣布 Qwik 已经达到 v1.0。Qwik 是一个全栈网络框架，它带来了一种全新的方法来大规模交付即时应用程序。

为什么是另一个框架？

React、Vue、Angular、Svelte、SolidJS 等框架及其元框架（Next.js、Nuxt、SvelteKit、SolidStart、Astro）通过提供强大的工具和抽象来简化构建复杂应用程序的过程，从而彻底改变了 Web 开发。

这些框架启发了许多开发人员创建创新的解决方案，以增强用户体验和开发人员体验，并提高 Web 应用程序的整体质量。

Qwik从这些框架中汲取了很多灵感，利用它们的优势为构建 Web 应用程序提供快速、可扩展和可维护的解决方案。

通过在这些框架奠定的基础上构建，Qwik 能够为开发人员提供强大的工具集，使他们能够快速高效地构建 Web 应用程序，同时保持高水平的质量和性能。

随着 Web 应用程序变大，它们的启动性能会下降，因为当前的框架会向客户端发送过多的 JavaScript。保持初始包大小较小是一场永无止境的战斗，没有乐趣，而且我们通常会输。

Qwik 向用户提供即时应用程序。这是通过保持初始 JavaScript 成本不变来实现的，即使您的应用程序变得越来越复杂。然后 Qwik 只为特定的用户交互提供 JavaScript。

这确保了 JavaScript 不会压倒浏览器，无论应用程序有多大。最后，推测性代码获取确保即时交互，即使在慢速和间歇性网络上也是如此。

将其视为JavaScript 的流式处理。

主要特征

Qwik 的理念是确保简单的路径是高性能的路径。这就是为什么 Qwik 开箱即用地解决了：

开箱即用的惊人用户体验

JavaScript 流的即时加载时间：交付获得CWV分数的应用程序，并在应用程序随着时间的推移变得越来越复杂时维护它们。
推测代码获取：在用户需要时准确交付您需要的代码，以确保即时用户交互，即使在网络不可靠的慢速移动设备上也是如此。
延迟执行：Qwik 的可恢复技术尽可能长时间地延迟浏览器中代码的执行，以保持浏览器的主线程空闲并响应用户交互。
优化渲染时间：Qwik 是反应式的，这意味着默认情况下，它只更新绝对需要的内容，而不是更多。
数据获取：开始在服务器上获取数据以防止“瀑布”延迟。

很棒的开发者体验

熟悉的 JSX
基于目录的路由：使用基于目录的路由创建站点，这是业界首选的路由声明方式。
一流的数据访问：Qwik 数据加载器和表单操作让您轻松访问您的服务器数据，具有 100% 端到端类型安全和开箱即用的用户输入验证
中间件：以可移植的方式声明中间件逻辑，允许您部署到所有主要的托管服务提供商。
统一的执行模型：我们都说我们是全栈开发人员。使用 Qwik 编写的前端和后端代码自然地结合在一个应用程序代码库和类型安全中。默认情况下，Qwik 应用程序在服务器和浏览器中执行，但很容易将函数固定为始终服务器 ( server$())（或始终浏览器）。

集成

Qwik 提供快速扩展的即用型集成与您最喜爱的库和框架的领域。只需npx qwik add从命令行运行并从列表中选择您需要的内容。

编写一次，随处部署：我们有适用于 Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel 的适配器，而且这个列表还在不断增加。以与托管提供商无关的方式编写您的应用程序，以防止供应商锁定。
UI 组件：从QwikUI、Papanasi UI或经过实战测试的 UI 库（如Material UI、ChakraUI、Radix或任何其他基于Qwik-React的 React 库）中选择。
图像优化：使用@unpic/qwik和qwik-image优化图像以获得最佳用户体验。
国际化：使用$localize和qwik-speak以多种语言交付您的应用程序。
身份验证：使用业界领先的AuthJS为您的应用程序添加多种身份验证策略。
CMS：Qwik 与Builder.io原生集成，用于结构化数据和组件级无头内容创建和发布。
样式：Qwik 允许延迟加载和样式的组件范围。将其与PostCSS、Vanilla Extract或Tailwind等流行解决方案相结合，以满足您的样式需求。
测试：使用Vitest进行单元测试，使用 Playwright 和 Cypress 进行 e2e 测试。使用 Storybook 开发和测试组件。
企业准备：使用 qwik-nx 开发企业级应用程序和 monoreos，它为您的 NX monorepo 提供特殊的生成器和执行器。

互操作性

Qwik-React允许您在 Qwik 应用程序中懒惰地混合 React 组件。利用 Qwik 中现有的 React 生态系统，使用 Qwik-React 逐步迁移到 Qwik，或者通过延迟水化部分应用程序来加速您的 React 应用程序。Qwik-react 将孤岛架构设计模式引入您的 React 应用程序。

Svelte、Vue 和 Angular 包装器正在由社区开发。