自动拷贝资源 & 分包支持
常见问题
在解决兼容性问题后,将 three.js
引入到小程序中仍可能遇到以下难题:
- Worker 处理:小程序通常不支持通过 URL 动态加载
worker
,而three.js
中的模块普遍采用该方式。因此,开发者需要手动将源码导出为.js
文件并复制到项目中。 - WASM 处理:类似地,小程序仅支持本地
wasm
文件,也需要手动复制并配置路径。 - 包大小限制:无论是
three.js
主包,还是three/examples/jsm
中的功能模块,往往体积都较大,动辄数百 KB。更不用说配套的wasm
文件,轻松就能突破小程序的 2MB 单包体积限制。这迫使开发者投入大量精力在拆包、精简依赖等方面。
为此,我们设计了一套自动化方案,帮助开发者通过简单配置,轻松解决上述问题。
自动拷贝 Worker 和 WASM 资源
使用 @minisheep/three-platform-adapter/plugin
提供的插件后,系统会自动分析依赖关系,提取所用到的 worker
和 wasm
资源,并复制到构建产物目录中的 workers/
和 wasms/
文件夹,同时自动更新引用路径,无需手动干预。
你也可以自定义输出目录,例如:
js
import threePlatformAdapter from '@minisheep/three-platform-adapter/plugin';
export default {
plugins: [
threePlatformAdapter({
assetsOutput: {
wasm: 'package-wasm',
worker: 'package-worker'
}
})
]
}
此外,还支持启用 brotli
压缩的 wasm
文件(前提是小程序平台支持),可显著减小体积:
js
threePlatformAdapter({
useBrotli: true // 默认开启
})
更多配置项请参考 详细配置。
分包支持:自动拆分模块,平衡包大小
针对小程序的体积限制,你可以通过简单配置启用分包机制,自动将模块按需拆分,从而有效平衡主包与分包体积,避免触发平台限制。
具体使用方法请参考:mp-chunk-splitter。