search

hellof2e / quark-core

Open-source, Web Components engine designed for everyone.（用原生 JS 构建跨技术栈组件 / 无框架组件）
https://quark-ecosystem.github.io/quarkc-docs/#/
MIT License
342 stars 29 forks source link

如果想支持异步加载各个组件, 除开构建工具配置层面, quarkc还需要什么改动吗? #44

Closed yoyo837 closed 1 year ago

yoyo837 commented 1 year ago

比如我有X个自定义组件,

打包成 index.js + 1.js....X.js

html 只需要引入 index.js, 遇到html需要解析某个自定义元素, 就异步加载该组件对应的js.

sanqi-med commented 1 year ago

quarkc 不需要改动，异步加载组件的逻辑可以自己实现

yoyo837 commented 1 year ago

quarkc 不需要改动，异步加载组件的逻辑可以自己实现

大佬, 自己实现的话, 给个思路我去研究一下

sanqi-med commented 1 year ago

quarkc 不需要改动，异步加载组件的逻辑可以自己实现

大佬, 自己实现的话, 给个思路我去研究一下

首先将你的 quarkc 编写的组件打包后传到 cdn上，在需要使用组件的地方采用动态 import 引入即可。

yoyo837 commented 1 year ago

100个组件的话, 编译成100个单独的js? 但是页面并不能提前知道会遇到哪些组件呢

sanqi-med commented 1 year ago

100个组件的话, 编译成100个单独的js? 但是页面并不能提前知道会遇到哪些组件呢 不单独打包，那一次引入就全部引进去了。如果你不知道当前页面使用什么组件，那岂不是连异步加载也做不到，因为你压根就不知道异步的url 可以类似这么搞。 截屏2023-07-25 17 15 53

使用： <lazy-load name="my-component"></lazy-load>

yoyo837 commented 1 year ago

我之前用的vue cli的, 它那个效果是我要的, 我去扣一下实现, 然后自行实现看看.

yoyo837 commented 1 year ago

我之前用的vue cli的, 它那个效果是我要的, 我去扣一下实现, 然后自行实现看看.

X个自定义组件,

打包成 index.js + 1.js + 2.js ... +n.js

html 只需要引入 index.js 一个文件, 遇到html需要解析某个自定义元素, 就异步加载该组件对应的js. 可能利用的是 document.currentScript + 子文件hash得到url, 然后异步加载