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

Question

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

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

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

score 4 · Accepted Answer

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

显然，通过 npm 安装当前的 three.js：npm install three
在 webpack-config 中，我们需要覆盖你import {Something} from 'three';在代码中发生的事情。为此，我使用 resolver-config 的别名设置来使用更新的 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改用）。在这篇博文中有更多相关信息。

score 1 · Accepted Answer

我相信您的问题是您需要从不在 build/ 目录中的三个 src/ 树运行导入，您需要克隆三个以拥有一个本地 src/ 树来运行您的应用程序。

特别是，您可以使用 src/Three.js，它是所有三个模块的巨大导出器。或者简单地更改您的导入以引用 src//module.js。

然后汇总将具有运行的各个模块，从而省略未使用的代码。

2 回答 2