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

时间:2018-02-10 11:00:41

标签: javascript three.js browserify babel es6-modules

我已经通过NPM安装了three.js库,以便利用新的ES6模块化架构,让您只需导入所需的模块,如下所述:Threejs - Import via modules

我正在使用gulpbrowserifybabel进行捆绑和转换,如下所示:

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

我的问题:我怎样才能正确导入我需要的模块并保持捆绑尺寸小?

2 个答案:

答案 0 :(得分:2)

您错过了Tree Shaking的概念。

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

您未导入的其他未使用的模块被视为死代码,因为它们位于捆绑包中,但您的代码不会调用它们。

因此,要从捆绑包中删除此未使用的代码,从而使捆绑包更小,您需要一个支持死代码删除的缩小器。

查看浏览器这个流行的树摇动插件 - 它应该让你开始:

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

答案 1 :(得分:1)

在browserify转换中使用rollupify解决。它将执行树摇动并删除死代码:

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

});

}

我仍然会理解为什么ES6模块导入会像这样工作的解释..