常见问答

@QwikDev 是一个有感情的 AI吗?

是的, 但我也很有趣! 欢迎在Twitter上关注我 follow me

为什么叫 Qwik?

最早其实叫qoot，但是团队成员觉得这个词可能比较难以搜索。团队成员的一个朋友提出qwik, 经过内部成员的一些讨论后，最终决定叫qwik。

为何不选其他框架？

最简单的回答是qwik解决了一些其他框架解决不了的问题。

无论你的应用多复杂，qwik都提供了页面秒开的性能。

它通过在应用加载时，只需网络传输非常少量的js完成这一点。并且即使当你的应用越来越复杂，组件越来越多，应用开启都仅仅需要网络传输一点点的js即可。

这里有篇文章 Qwik is the first open-source O(1) framework.

Qwik city是什么？

可以把qwik想象成内核。qwik city是一些构建在Qwik之上的额外的API集合。比如路由、数据加载等。 Qwik City

Qwik学起来复杂吗?

很好学 extremely easy to learn，因为跟react组件写法很像，所以对react开发者来说，更好学。路由的灵感来自于Nextjs和其他框架。

但是因为qwik创造了一些新概念，比如可恢复性、细粒度响应等，需要先了解这些概念。

我们也有一些教学demo帮助你快速上手 tutorial。

那些$符号是啥？

你可能注意到qwik app里面有很多$符号，比如component$(), useWatch$(), <div onClick$={() => console.log('click')} />. 他们是代码拆分的边界。qwik会根据这些边界把代码拆成chunks碎片，这些碎片比组件的粒度还小。既提供给qwik的优化器，也提示开发者自己。

举例:

import { component$ } from '@builder.io/qwik';

export const App = component$(() => {
  console.log('render');
  return <p onClick$={() => console.log('hello')}>Hello Qwik</p>;
});

上面这个组件由于$语法会被拆为下面的：

app.js

import { componentQrl, qrl } from "@builder.io/qwik";

const App = /*#__PURE__*/ componentQrl(qrl(()=>import('./app_component_akbu84a8zes.js'), "App_component_AkbU84a8zes"));

export { App };

app_component_akbu84a8zes.js

import { jsx as _jsx } from "@builder.io/qwik/jsx-runtime";
import { qrl } from "@builder.io/qwik";
export const App_component_AkbU84a8zes = ()=>{
    console.log('render');
    return /*#__PURE__*/ _jsx("p", {
        onClick$: qrl(()=>import("./app_component_p_onclick_01pegc10cpw"), "App_component_p_onClick_01pEgC10cpw"),
        children: "Hello Qwik"
    });
};

app_component_p_onclick_01pegc10cpw.js

export const App_component_p_onClick_01pEgC10cpw = ()=>console.log('hello');

Qwik 当用户交互时才下载JS吗?

不是，生产环境下，QWIK在SSR阶段使用了很多信息以开始尽快预取当前页面交互需要的那部分JS。这样的话，当用户点击或交互时，JS已经下载过了。

如果 Qwik 预取 JS, 那有什么不同?

预取和解析执行JS不同，QWIK只有在用户交互时才执行JS。 Prefetching is not the same as parsing and executing JS, Qwik does not execute JS until the user interacts.

另外 prefetching 让 Qwik可以优先考虑可交互的重要的部分，然后再考虑不重要的部分。

比如，购买按钮比添加到购物车按钮更重要，所以QWIK先预取购买按钮，再预取添加到购物车按钮。

Qwik 不需要预取很多就能让应用运行, 而其他框架需要下载的更多才能让应用运行，因为其他框架需要 hydration。

Qwik应用在弱网下会慢吗?

一点也不, 由于 prefetching QWIK应用比其他框架更少受到弱网的影响。而且由于可恢复性和细粒度拆包，QWIK应用只需要很少JS就可以交互，所以弱网下QWIK应用依然很快。

QWIK会生成太多小文件吗?

在开发模式下会生成很多小文件，因为使用了Vite.js server，但在生产环境下，QWIK的bundle文件会组织的更高效一些。

为什么Qwik 使用 JSX? 它底层是React吗?

不, 跟React没关系, 但 Qwik 使用 JSX 作为模板语法。

请注意 JSX 不是 React, 事实上 JSX 只是一种语法。我们选JSX有几个原因:

语法简单: 它没有重新发明轮子, 而是使用JS语法做循环, 条件... JSX spec is surprisingly simple and small
生态系统: 被IDEs很好支持, linters, security auditing tools, debugging tools, highlighting...
跟HTML像: JSX 视觉上和概念上跟 HTML一样，很像一棵树。 Other template systems like html templates (lit-html) are not trees but arrays of tokens, making it harder to build on top and transform.
流行: 不管你喜欢与否, JSX 是世界上最广泛使用的模板语法。

QWIK有无路由可用?

有! Qwik City 包含了一个基于目录的路由, 灵感来自于Nextjs和其他框架。

我需要服务器才能部署 Qwik 应用吗?

你可以部署QWIK应用在任何serverless enviroment thanks to our adaptors, 我们也支持基于Node的服务器 vanilla-node adaptor , 比如 Express.

如果不需要SSR，你也可以把你的QWIK应用部署成静态站点，参考 SSG adaptor。

SPA 比 MPA 更快吗？

看情况，对SPA来说，成本都在前期，在会话开始之前要下载所有代码，所以它的用户交互的成本是最小的。

MPA 比 SPA 更快吗？

看情况，MPAs快在加载，因为它不需要下载那么多JS。但是当用户导航的时候，它需要全页面reload。

全页面reload通常很快，因为浏览器可以很快下载和执行HTML，但是MPA也不是适合所有场景，因为有时候在导航时保持状态是最好的，这一点SPA做的很好。

QWIK是唯一一个可以同时是SPA和MPA的框架。

Can Qwik do SPA?

Of course! Qwik City includes the <Link> component which triggers a SPA navigation. With Qwik, developers don't need to choose between SPA and MPA, every site is both at the same time.

MPA vs SPA is no longer an architectural decision taken at beginning of the project, but a decision made for every link.

Qwik 可以做 (SSG)吗?

可以! It's part of all Qwik City starters, 文档在这里 Static Site Generation here.

But... with other frameworks I can also do MPA and SPA

Not quite, other frameworks suggest removing all the <Scripts> at the root to generate an MPA, effectively removing all the interactivity along with the SPA navigation.

And if scripts are not removed, then each full-page reload become very expensive, because every page reload means that the framework needs to hydrate the entire page. Qwik, however, does not have a hydration cost for each page load.

迁移到Qwik需要很多工作吗?

看情况，如果你来自于react生态，移植一个react组件到QWIK应该很简单。并且，由于Qwik React，你可以使用整个react生态，所有你可以在你的QWIK应用里使用任何react组件和react库。

可以利用React的生态吗?

可以! Qwik 可以运行 React components, check out the docs.

你一定会惊叹!

Does Qwik do partial hydration?

No, Partial hydration (or island architecture) popularized by Astro is about preventing full-page hydration, where all existing components in the page need to be downloaded and executed, and instead breaking the app into islands of interactivity.

Islands that developers need to manually define, and then manually describe in which situations they should be hydrated. Islands that can not communicate between each other.

Instead, Qwik components does not hydrate at all. Qwik achieves this through a powerful serialization system, that serializes only the necesary state the reactivity graph, so app can resumes without eagarly running any JS.

We think resumability scales without the negative trade-offs of partial hydration.

Qwik 有社区吗?

有, 有一个增长的开发者社区 Discord 和 Github, 他们在为QWIK做出杰出的贡献、大规模构建站点、互帮互助。加入我们.

Qwik可以应用到生产吗?

可以! 取决于你。 Qwik已经开发两年了, 也发布了 the beta milestones, 这就意味着我们很自信的说QWIK可以用到生产，并且不会有未预期的breaking changes。

Builder.io 和许多团队已经在生产应用了QWIK, 所以你并不孤单。

Are full page reloads slower than SPA?

Depends, full page reloads are extremelly fast, because browsers are extremelly fast to download and parse HTML, but the MPA approach is not for everyone since sometimes it's necesary to keep state between pages, and SPA does that very well.

MPA can be slow in existing frameworks when trying to do MPA with interactivity because existing frameworks will need to run hydration at load time, which can be very slow.

Qwik 序列化了太多数据到HTML？

没有, Qwik只为当前页面序列化需要的数据。如果一个页面有1000个组件但只要1个组件是可交互的，那序列化的数据的数量是跟可交互组件的数量成正比的，而不是跟总组件数量成正比。

谁开发的Qwik?

一些全世界的贡献者，他们在这里讨论问题 Discord, 一些供职于 Builder.io的全职开发者: Misko, Adam 和 Manu Almeida.

Qwik是开源的吗?

是的, MIT 和 dependency-free, installing Qwik will not bloat your node_modules nor your lawyers.