QWik常见问题

2023/12/25 | 142 | 0 | 前端 | SSR

Qwiki常见问题

本文翻译自官网

@QwikDev是Ai吗？

是的，而且他十分有趣。[follow me](https://twitter.com/QwikDev)

为什么叫`Qwik`？

最初它被称为`qoot`,但是我们认为这个名字不利于搜索。而后一个社区成员@PatrickJS__( 提出了 Qwik 这个名字，经过builder.io投票后，就这样定了。

## Qwik跟其他框架有什么不同？

Qwik是第一个在编写组件方面与 React , Vue 或者 Svelte 类似的开发体验的框架，同时提供及时交互的 Live HTML 。 Qwik 通过消除水合来实现这一特性。与他们相反的是, Qwik 会在用户交互的时候立即执行事件处理，而不需要去引导应用程序。这被称之为可恢复性。

由以上操作，使得`Qwik`获得了极高的性能。开发人员无需关心组件复杂度，因为就JS负载而言，`Qwik`的复杂度永远是`O(1)`。

为什么不选择以前的框架？

简单回答：`Qwik`是唯一一个开源`O(1)`复杂度的框架

什么是`Qwik City`？

简而言之，就是`core`。类比与`Next.js`于`React`、`Nuxt.js`于`Vue`、`SvelteKit`于`Svelte`。

难吗？

如果熟悉`React`或者其他JSX开发，一点都不困难。路由几乎与`Next.js`一致，组件开发与`React`一致。

当然还是需要学习一些新的概念，比如`Qwik`的`Live HTML`，`Qwik`的`可恢复性`，`Qwik`的细粒度反应性等等。我认为学习曲线相对平滑。

特别是相对于`Rust`。笑～

$ 表示什么意思？

$是`Qwik`中充当延迟加载的标记。使用他之后会讲这部分分成细粒度`Bundle`。

例如：

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

 

export default component$(() => {

  console.log('render');

  return <button onClick$={() => console.log('hello')}>Hello Qwik</button>;

});

由于$语法糖，上面的组件会被打包成以下几个文件

- 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');

注意：$ 与其他框架（JQuery、Svelte）无关！

如果将细粒度操作分成多个js，用户交互请求不是会很慢吗？

不会。

首先，这个js文件只会在用户交互时才会被下载，并且可用在`Service Worker`中预先获取当前页面的js模块。其次，js文件是会被浏览器缓存的，所以不会每次都去下载。

这种策略被称之为推测模块获取。需要水合的框架必须在页面加载加载之时就将所有的js文件都加载完毕，无法利用这种策略。

Qwik怎么知道需要预先获取哪些模块？以及按什么顺序获取？

在生产环境中，Qwik在SSR期间生成大量信息用户尽快开始填充页面。只在页面上提供可用的交互位置。这样，当用户开始交互的时候，js就已经在缓存中了。

此外，Qwik insights将会根据优先级来确认先构造哪一部分。

例如，立即购买按钮比添加到购物车按钮更重要。因此，Qwik会优先构建立即购买按钮。

在弱网环境下，Qwik会不会影响用户体验？

emmm，恰恰相反。

Qwik不需要预先获取所有的内容，即可开始运行。其他框架却需要所有的内容都加载完毕才能开始运行。

事实上，Qwik能够减少网络瀑布流 ,因此在请求时，该模块可能已经被缓存。即使尚未被缓存，Qwik也可以避免重复请求同一模块。

因此，Qwik在弱网环境下的响应更快。

目录大纲