【求助】：关于【组件异步跨包引用】，如何设置 componentPlaceholder 呢？

[wywppkd]

如题

[Vanisper]

bundle-optimizer/src/common/AsyncComponents.ts

Lines 36 to 46 in 584f132

	getComponentPlaceholder(filename: string) {
	const cache = this.jsonAsyncComponentsCache.get(filename)
	if (!cache)
	return null
	const componentPlaceholder = Object.entries(cache).reduce<Record<string, string>>((p, [key, value]) => {
	p[this.rename(key)] = 'view'
	return p
	}, {})
	return componentPlaceholder
	}

这里的第 42 行是关键部分，可以看一下这个方法的相关调用关系就可以知道在什么时机进行的。

你是有自定义 componentPlaceholder 的需求是吗？
我之前是想过这个地方可以加一些骨架屏。

目前的逻辑是硬编码成 view，也就是小程序下的 div 组件作为占位组件。

[wywppkd]

bundle-optimizer/src/common/AsyncComponents.ts

Lines 36 to 46 in 584f132

getComponentPlaceholder(filename: string) {
const cache = this.jsonAsyncComponentsCache.get(filename)
if (!cache)
return null

const componentPlaceholder = Object.entries(cache).reduce<Record<string, string>>((p, [key, value]) => {
p[this.rename(key)] = 'view'
return p
}, {})
return componentPlaceholder
}

这里的第 42 行是关键部分，可以看一下这个方法的相关调用关系就可以知道在什么时机进行的。
你是有自定义 componentPlaceholder 的需求是吗？ 我之前是想过这个地方可以加一些骨架屏。

目前的逻辑是硬编码成 view，也就是小程序下的 div 组件作为占位组件。

对，我是不知道在哪里自定义 componentPlaceholder，page.json 可以给页面设置 componentPlaceholder，但是非页面组件就不知道在哪配了

[julytian]

@wywppkd 非页面组件试下这个插件vite-plugin-component-placeholder

[Vanisper]

对，我是不知道在哪里自定义 componentPlaceholder，page.json 可以给页面设置 componentPlaceholder，但是非页面组件就不知道在哪配了

还想请再问一下，你这个是什么需求呀
“非页面组件”是有什么特殊的地方吗，我有点没反应过来

[Vanisper]

可能我关注的地方有问题 我看了一下 vite-plugin-component-placeholder
这个大佬的配置式的形式很妙，能很容易支持自定义占位组件，并且不用担心组件的类型问题

我这部分实现的早期版本其实也是配置式的，不过当时的是在 defineComponent 上实现的，
后面觉得繁琐，因为这样子每个组件都要写一个这个选项式的模版代码，重构的时候就改用查询参数了，
那会还不知道在 defineOptions 上面做文章。

所以是不是就是想要实现自定义 componentPlaceholder 后面的占位组件？

---

如果是，就目前项目，考虑实现的话，
由于目前的语法是 import xxx from "Xxx.vue?async"，
我可能就会“将错就错”了，还是在查询参数上做文章，例如：
import xxx from "Xxx.vue?async&view"，当然如果自定义的占位组件比较长了之后，这里可能也会比较长。

或者我可能也会引进上面这个大佬的做法，采用配置式，当然不得不有抄袭的嫌疑了哈

[chouchouji]

这个我本来是想提pr加到这个仓库里面的，后来发现实现的有点限制，比如某个具体的组件无法自定义占位组件，就考虑自己写了一个，加上本身现在uniapp支持分包a引入分包b的组件，所以做起来工作量也不大，当然佬如果想集成进去，完全可以，本身我的插件就是开源的，没有抄袭不抄袭这一说。

[Vanisper]

这个我本来是想提pr加到这个仓库里面的，后来发现实现的有点限制，比如某个具体的组件无法自定义占位组件，就考虑自己写了一个，加上本身现在uniapp支持分包a引入分包b的组件，所以做起来工作量也不大，当然佬如果想集成进去，完全可以，本身我的插件就是开源的，没有抄袭不抄袭这一说。

感谢大佬回复
当前项目是我第一个真正意义上的开源项目，也是第一次在项目工程化上有真正研究的开始。
项目质量说不上太好，但是过程中学习了不少经验，这个项目对我的意义非凡。

至于项目本身来说，项目要解决的问题其实是 uniapp 官方迟早要下场做的，当然官方下场肯定是好事（我已经看到你在做三方包的分包优化了👍）。
当然站在个人的立场上多少是有一点气馁的，不过目前我还是有一些想法要去实现（组件的分包优化：子包独属的组件迁移至子包；图片静态资源分包优化），所以还是会收尾、把项目做圆满的。

[chouchouji]

这个我本来是想提pr加到这个仓库里面的，后来发现实现的有点限制，比如某个具体的组件无法自定义占位组件，就考虑自己写了一个，加上本身现在uniapp支持分包a引入分包b的组件，所以做起来工作量也不大，当然佬如果想集成进去，完全可以，本身我的插件就是开源的，没有抄袭不抄袭这一说。

感谢大佬回复 当前项目是我第一个真正意义上的开源项目，也是第一次在项目工程化上有真正研究的开始。 项目质量说不上太好，但是过程中学习了不少经验，这个项目对我的意义非凡。

至于项目本身来说，项目要解决的问题其实是 uniapp 官方迟早要下场做的，当然官方下场肯定是好事（我已经看到你在做三方包的分包优化了👍）。 当然站在个人的立场上多少是有一点气馁的，不过目前我还是有一些想法要去实现（组件的分包优化：子包独属的组件迁移至子包；图片静态资源分包优化），所以还是会收尾、把项目做圆满的。

子包独属的组件迁移至子包和图片静态资源分包优化 这两个方向不错，期待大佬的实现。

[chouchouji]

@Vanisper 为了对组件提供添加其他配置 ( usingComponents、styleIsolation等) 的能力，同时收集一些优秀的第三方插件，我新建了一个组织 https://github.com/uni-toolkit，仓库

大佬如果感兴趣的话，可以一起来搞

[Vanisper]

@Vanisper 为了对组件提供添加其他配置 ( usingComponents、styleIsolation等) 的能力，同时收集一些优秀的第三方插件，我新建了一个组织 https://github.com/uni-toolkit，[仓库](https://github.com/uni-toolkit/uni-toolkit)

大佬如果感兴趣的话，可以一起来搞

嗯嗯 好的

[Vanisper]

microsoft/TypeScript#38638

有点遗憾，我正打算先实现查询参数上再添加一些信息，发现 ts 自定义模块定义的写法还做不到复杂的通配。
后续再考虑实现此问题打算从配置式的方向入手。