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

Posted 2023-02-19

【中文标题】如何使用 WebPack 或 Rollup 摇树 Three.js？

【英文标题】：How do I tree shake Three.js using WebPack or Rollup?

【发布时间】：2017-05-23 04:02:00

【问题描述】：

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

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

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

【问题讨论】：

总的来说，我认为 JS 开发人员必须开始了解如何在 Rollup 和 Webpack 中实现 tree shaking，目前它们的工作方式有太多的魔力。我也遇到过同样的问题几次，很难判断库是否真的尽可能小。

我最近一直在试验这个，也许你有兴趣看看？ repo

【参考方案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 有更多相关信息。

【讨论】：

感谢您的帮助。但是，我仍然得到一个相同大小的大文件。不管有没有别名，Webpack 已经在使用 three 中的模块文件。这只是写三的方式吗？

很快会再看一遍，并在此处进行相应更新。

@Chris：我重新检查过，不幸的是，这可能和现在一样好。如果您查看未缩小的输出，您会看到很多“未使用的和谐导出”cmets，因此 webpack 确实意识到它们是不需要的。但是，如果在代码中的其他地方使用了未使用的导出，webpack 目前无法删除它们，即使它们被同样未使用的其他类使用。汇总在这里也没有提供任何更好的结果。

这是我怀疑的，但我希望这是我忽略的问题。我很感激你花时间来看看这个。也许这是我可以向 three.js 人介绍的东西。

【参考方案2】：

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

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

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

编辑：查看https://github.com/mrdoob/three.js/issues/10328#issuecomment-290233801了解更多信息