Skip to content

自动拷贝资源 & 分包支持

常见问题

在解决兼容性问题后,将 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 提供的插件后,系统会自动分析依赖关系,提取所用到的 workerwasm 资源,并复制到构建产物目录中的 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