嘿，我来帮你捋清楚这个问题——你用ES6模块语法按需导入three.js，但browserify打包出来的体积和全量导入一样，核心原因大概率是tree-shaking没生效，或者你的导入方式/工具配置有疏漏，咱们一步步排查解决：

1. 先确认你的导入方式真的是“按需”的 #

首先得确保你没在无意间导入整个three库。正确的按需导入应该是直接挑你需要的模块：

// ✅ 正确：只导入用到的类
import { Scene, PerspectiveCamera, WebGLRenderer } from 'three';

而不是这种全量导入的写法（哪怕你只用其中几个类，也会把整个库打包进去）：

// ❌ 错误：全量导入整个three库
import * as THREE from 'three';

另外，检查下你安装的three.js版本，r127及以后的版本都原生支持ES模块，建议用最新稳定版避免兼容性问题。

2. 给browserify补上tree-shaking能力 #

Browserify本身默认不支持tree-shaking——这是移除未使用代码的关键！你需要配合babel和专门的插件来实现：

步骤1：安装必要依赖 #

npm install --save-dev babelify @babel/core @babel/preset-env browserify-tree-shake

步骤2：修改gulp里的browserify配置 #

关键是让babel保留ES模块语法（不要转成CommonJS），这样tree-shaking插件才能分析代码结构。修改你的gulp任务：

const browserify = require('browserify');
const treeShake = require('browserify-tree-shake');
const babelify = require('babelify');

gulp.task('bundle', function() {
  return browserify('./src/app.js', { debug: true })
    // 配置babelify，关闭模块转换
    .transform(babelify, {
      presets: [
        ['@babel/preset-env', { modules: false }]
      ]
    })
    // 启用tree-shaking插件
    .plugin(treeShake, { ignore: [] })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'));
});

这里的modules: false是核心——它告诉babel不要把ES模块转成CommonJS，因为tree-shaking依赖ES模块的静态结构来识别未使用的代码。

3. 排查是否有隐性的全量导入 #

有时候你可能没注意到，某些第三方插件、旧示例代码，甚至你自己写的某个模块里，可能偷偷用了import * as THREE from 'three'，这会直接把整个three库拉进打包文件。

你可以用browserify的--list命令排查打包的文件：

browserify ./src/app.js --list | grep three

如果输出里出现node_modules/three/build/three.js，说明还是有全量导入的地方，得顺着依赖链找到源头改掉。

4. 试试直接导入three.js的源码模块 #

如果上面的配置还是没生效，你可以跳过three.js的入口文件，直接导入源码里的具体模块：

import Scene from 'three/src/scenes/Scene.js';
import PerspectiveCamera from 'three/src/cameras/PerspectiveCamera.js';
import WebGLRenderer from 'three/src/renderers/WebGLRenderer.js';

这种方式更直接，绕开了可能的模块解析歧义，让tree-shaking更容易识别未使用的代码。

5. 验证打包结果 #

最后，用source-map-explorer可视化分析打包后的体积，确认按需导入是否生效：

npm install --save-dev source-map-explorer
source-map-explorer dist/bundle.js

这个工具会生成一个交互式图表，展示打包文件里每个模块的占比，你能清楚看到three.js的哪些部分被包含了，直观验证tree-shaking的效果。

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