javascript - three.js ES6 如何只导入特定模块

Question

我已经安装了 three.js通过 NPM 库来利用新的 ES6 模块化架构，它应该让你只导入你需要的模块，如下所述:Threejs - Import via modules .

我正在使用 gulp , browserify和 babel用于捆绑和转译，像这样:

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'; // about 500 Kb size, same as before example

我还尝试了以下方法:

// 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

我的问题:如何正确地只导入我需要的模块并保持较小的包大小？

Answer 1

您缺少 Tree Shaking 的概念.

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

您未导入的其他未使用模块被视为无效代码，因为它们在包中，但您的代码未调用它们。

因此，要从 bundle 中删除这些未使用的代码，从而使 bundle 更小，您需要一个支持无用代码删除的压缩器。

查看这个流行的 browserify tree shaking 插件——它应该可以帮助您入门:

https://github.com/browserify/common-shakeify