Javascript three.js ES6如何仅导入特定模块

我通过NPM安装了library，以利用新的ES6模块化体系结构，该体系结构应允许您只导入所需的模块，如下所述：

我正在使用，用于捆绑和传输，如下所示：

gulp.task("build_js", () => {

return browserify({
    entries: "./public/app/app.js",
    cache: {},
    dev: true
})
    .transform(babelify, {presets: ["env"], plugins: ["syntax-async-functions", "transform-async-to-generator"], sourceMaps: true})
    .bundle()
    .pipe(source("app.bundle.min.js"))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: mode}))
    .pipe(uglify())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(config.build.js))

});

我只想导入所需的模块，并保持捆绑包的大小较小，但我注意到browserify生成的捆绑包大小相同，无论是导入所有模块还是只导入一个模块

如果在app.js中导入所有模块，我得到的包大小约为500Kb：

// app.js

import * as THREE from 'three'; // about 500 Kb size

但是，如果我尝试使用ES6语法只导入一个特定的模块，我得到了相同的包大小（它将再次导入所有模块）：

我还尝试了以下方法：

// app.js

import { Vector3 } from "three/build/three.module.js";

但我得到了以下错误：

SyntaxError: 'import' and 'export' may only appear at the top level (45590:0) while parsing /Users/revy/proj001/node_modules/three/build/three.module.js

---

我的问题是：如何正确地只导入我需要的模块，并保持捆绑包的小尺寸？

您缺少了

---

按名称导入模块时，其他模块不会自动从捆绑包中删除。绑定器始终包含代码中的每个模块，并忽略您指定为导入名称的内容

您没有导入的其他未使用的模块被视为死代码，因为它们在捆绑包中，但是您的代码没有调用它们

因此，要从bundle中删除这些未使用的代码，从而使bundle更小，您需要一个支持删除死代码的minifier

查看这个流行的browserify摇树插件-它应该可以让你开始：

使用内部browserify变换求解。它将执行树震动并删除死代码：

gulp.task("build_js", () => {

return browserify({
    entries: "./public/app/app.js",
    cache: {},
    dev: true
})
    .transform(rollupify, {config: {}})    // <---
    .transform(babelify, {presets: ["env"], plugins: ["syntax-async-functions", "transform-async-to-generator"], sourceMaps: true})
    .bundle()
    .pipe(source("app.bundle.min.js"))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: mode}))
    .pipe(uglify())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(config.build.js))

});

}

gulp.task（“build_js”，（）=>{
返回浏览器化({
条目：“./public/app/app.js”，
缓存：{}，
戴夫：没错
})
.transform（rollupify，{config:{}}}）//我不明白。当我导入模块时，我希望只导入与该模块相关的代码（以及该模块在可传递依赖路径中所需的模块）。这不是死代码，这是我在应用程序中需要的代码。不应该导入不在可传递依赖路径中的模块，或者我遗漏了什么？捆绑程序总是包含所有内容，除非您使用树抖动工具。您认为只包含显式导入的代码是错误的。我不是这方面的专家，但这似乎是错误的。如果您
import{Vector3}从“./path/Vector3
您只导入了
Vector3
而不是其他所有模块？否则怎么可能，导入其余模块的部分是什么？是因为
…从“三”导入的吗？'from
path/where/ThreeClass
应该可以工作？是的，我想这很有意义，
从“三”导入所有模块并生成死代码，这可能会被树震动。但是，直接从模块导入不应该导致死代码？如果尝试从'three/src/math/Vector3
import{Vector3}，会发生什么情况
gulp.task("build_js", () => {

return browserify({
    entries: "./public/app/app.js",
    cache: {},
    dev: true
})
    .transform(rollupify, {config: {}})    // <---
    .transform(babelify, {presets: ["env"], plugins: ["syntax-async-functions", "transform-async-to-generator"], sourceMaps: true})
    .bundle()
    .pipe(source("app.bundle.min.js"))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: mode}))
    .pipe(uglify())
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest(config.build.js))

});

}