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 を使用しており、組み込みのツリーシェーキングの使用に切り替えました。手順を見てみましょう。

もちろん、npm 経由で現在の three.js をインストールします。npm install three
webpack-config では、コード内で何が起こるかをオーバーライドする必要がありますimport {Something} from 'three';。これを行うには、resolver-config のalias-settingを使用して、新しい three.js バージョンに含まれている代替の module-build を使用します。
```
 {
   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代わりに使用できます)。このブログ投稿には、それに関する詳細情報があります。

2 に答える 2