three.js - 如何使用 WebPack 或 Rollup 摇树 Three.js？

Question

我有一个 Three.js 场景，它只使用了库的一部分。

import {
    Scene,
    PerspectiveCamera,
    WebGLRenderer,
    BoxGeometry,
    MeshBasicMaterial,
    Mesh} from 'three';

但我最终还是得到了整个库中的大部分(如果不是全部的话)(缩小了约 500Kb)。有没有人有这方面的运气？我有一个 example GitHub这显示了我正在使用的代码。

Answer 1

我目前在一个项目中使用 WebPack2 并切换到使用内置的 tree-shaking。让我们来看看这些步骤:

显然，通过 npm 安装当前的 three.js:npm install three

在 webpack-config 中，我们需要覆盖当你 import {Something} from 'three'; 时发生的事情在你的代码中。为此，我使用 alias-setting使用较新的 three.js 版本中包含的备用模块构建:

 {
   resolve: {
     extensions: ['.js'],
     modules: [SRC_PATH, 'node_modules'],
     alias: {
       'three': path.join(__dirname, 'node_modules/three/build/three.module.js')
     }
   }
 }

现在，如果您使用 babel 转译您的 javascript，您需要确保不包含将 es6-modules 编译为 commonjs 的插件。否则 babel-tree-shaking 根本找不到任何 es6-modules 来摇动(如果你已经在使用 es2015-preset，你可以使用 babel-preset-es2015-native-modules 代替)。 this blog-post 中有更多相关信息。 .