3

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

file1.js

import { foo } from 'ReallyHeavyPackage'

export function a(): string {
    console.log("called a()");
}

export function b(): string {
    return foo();
}

file2.js

import { a } from './file1.js'

a();

file3.js

import { b } from './file1.js'

b();

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

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

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

4

2 に答える 2