問題タブ [tree-shaking]

複数の反応コンポーネントのライブラリがあり、ライブラリをツリーシェイキング可能にして、次のようなコンポーネントをインポートしたときに

バンドル全体をインポートしません。

私のindex.jsは次のようになります

そして、webpackを使用してバンドルします

そしてもちろん、私のbabel設定には

このセットアップでは、1 つのコンポーネントのみをインポートすると、バンドル全体が含まれます (インポートするときにも webpack を使用しています)。これを防ぐにはどうすればよいですか？

webpack バンドルを小さくする演習を行っています。webpack のバンドル アナライザーを使用すると、一度しか使用されていないにもかかわらず、非常に重いパッケージが 2 つの異なる非同期チャンクに含まれていることがわかりました。コードを掘り下げた後、おそらく次のシナリオが原因であることがわかりました。

file1.js

file2.js

file3.js

file1 は重いパッケージをグローバルにインポートし、file2 は file1 から関数をインポートするため、実際にパッケージを使用している関数をインポートしていなくても、依存関係として重いパッケージを取得すると想定しています。それが使用されている唯一の場所であるため、file3 のチャンクだけに大きな依存関係が含まれていることを期待します (むしろ、希望します)。

このようなインポートを処理する特定の方法はありますか? おそらく、これを支援するためにwebpackでできる魔法の構成、モジュール/関数を構造化するより良い方法、または関数/モジュール/パッケージをインポートするより良い方法ですか?

私はwebpack 4を使用しており、ES2017を使用しています