如何在Svelte/React项目中通过CDN引入three.js以减小打包体积

完全可以实现，具体配置步骤如下：

1. 引入CDN资源 #

在项目的入口HTML文件（通常是index.html）的合适位置加入three.js及你需要用到的附加组件的CDN脚本，脚本加载完成后three会自动挂载到全局window.THREE对象上。
注意：CDN引入的three版本需要和你本地开发时安装的npm依赖版本完全一致，避免兼容性问题。

2. 配置打包工具排除three.js打包 #

核心是告诉打包工具three属于外部依赖，不需要打入最终产物，运行时直接从全局变量取值即可。

Vite生态适用（React/Vite、Svelte/Vite项目） #

修改vite.config.js配置文件，增加如下配置：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      // 标记three及用到的addon为外部依赖，不参与打包
      external: ['three', 'three/addons/controls/OrbitControls'],
      output: {
        // 配置导入路径和全局变量的映射关系
        globals: {
          three: 'THREE',
          'three/addons/controls/OrbitControls': 'THREE.OrbitControls'
        }
      }
    }
  }
})

你用到的其他three附加组件也可以按照上面的格式逐个添加映射。

Webpack生态适用（比如CRA创建的React项目） #

修改webpack配置的externals字段即可：

module.exports = {
  // 其他原有配置保持不变
  externals: {
    three: 'THREE',
    'three/addons/controls/OrbitControls': 'THREE.OrbitControls'
  }
}

如果是未eject的CRA项目，可以通过react-app-rewired工具修改默认webpack配置。

3. 开发逻辑无需调整 #

你之前代码中的导入语法可以完全保留，比如import * as THREE from 'three'、import { OrbitControls } from 'three/addons/controls/OrbitControls.js'不需要做任何修改，打包时工具会自动把这些导入语句替换成从全局THREE对象取值，开发时你依然可以正常使用本地npm包提供的类型提示，完全不影响原有开发体验。

额外优化建议 #

• 可以给three的CDN脚本加上defer属性，避免阻塞页面首屏渲染，同时需要保证依赖three的业务代码在three加载完成后再执行
• 如果用到的three附加组件较多，可以选择包含全量addon的CDN资源，不用逐个引入

内容的提问来源于stack exchange，提问作者Doge Fromage