Ghost fallback chunks / import: false behaviour with large transitive dep trees — Re.Pack MF
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 55/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 静か
- 技術スタック
- javascript, react, react-native, typescript
- 領域
- build-system, mobile
調査の方向性
host/webpack.config.mjs、app1/webpack.config.mjs、app1/src/App.tsx から始め、記載されている bundle コマンドで問題を再現します。生成された app1/build/ios/*.chunk.bundle ファイルを調べ、grep のカウントとサイズを期待される結果と比較します。moment は公開される chunk に含まれないはずで、そのサイズは約 50 KB のままになるはずです。
索引モデルが issue の本文から書いたものです。
説明
Environment
Re.Pack: @callstack/repack 4.4.1
webpack: 5.107.2
Platform: Android
Description
I've been working through the optimal shared config for a production React Native app with Module Federation and have a few questions based on testing against your example at repack-examples/module-federation/app1/webpack.config.mjs.
Observation 1 : Official example only shares react + react-native, The example only declares react and react-native as shared. In a real app with large SDKs (tracking, UI component libraries, animation, totalling ~80 MB
bundled), should these also be declared as shared singletons? If not, are two instances of a tracking SDK acceptable in a host+remote setup?
Observation 2 : eager: STANDALONE produces ~78 MB ghost fallback chunks for large packages
When I apply eager: STANDALONE (i.e. eager: false in APK builds) to a package with a large transitive dep tree (e.g. @shared/trackingsdk, whose tree totals ~78 MB), webpack generates ghost fallback chunks of ~78 MB.
This happens even after declaring all of the package's direct deps as shared — the
bloat comes from deeper transitive deps not in the shared scope. I found that eager: true eliminates the ghost chunks (code goes into the container instead), but multiplies APK size when adding more remotes (each container duplicates the ~80 MB).
Observation 3 : import: false doesn't suppress transitive bundling, I tried { singleton: true, eager: false, import: false } to avoid both the ghost chunk and the container copy — expecting webpack to generate only a
consume-shared stub. The container correctly shrank to ~50 KB, but the exposed module chunk (App_SRP_js.chunk.bundle) absorbed the full ~79 MB dep tree instead. The bytes moved files, not disappeared.
Questions:
- Is import: false supported in Re.Pack's ModuleFederationPlugin? The behaviour differs from webpack 5's documented spec.
- For packages with large transitive dep trees, what is the recommended approach to avoid both ghost chunks AND container bloat when the host always provides these deps?
- The comment in your example says "to be figured out" on the eager: STANDALONE line : is there an updated recommendation for production setups?
Reproducible Demo
Base repo: callstack/repack-examples (module-federation example)
Branch to fork: main
Step 1 — Add moment as a test package moment is used as the probe, 392 KB bundled, easy to detect with grep, no native deps.
cd module-federation
yarn add moment
Step 2 — Modify host webpack config, In host/webpack.config.mjs, add moment to the shared config so the host provides it:
shared: {
react: { singleton: true, eager: true },
'react-native': { singleton: true, eager: true },
moment: { singleton: true, eager: true }, // ← add this
},
Step 3 — Modify app1 (remote) webpack config, In app1/webpack.config.mjs, add moment with import: false:
shared: {
react: { singleton: true, eager: STANDALONE },
'react-native': { singleton: true, eager: STANDALONE },
moment: { singleton: true, eager: false, import: false }, // ← add this
},
Step 4 — Import moment in the exposed component, In app1/src/App.tsx, add a direct import:
import moment from 'moment';
// use it anywhere so webpack doesn't tree-shake it
console.log(moment().format('YYYY'));
Step 5 — Build and inspect
Build host (provides moment to shared scope)
cd host && yarn bundle:ios # or android
Build remote
cd app1 && yarn bundle:ios
Step 6 — Check remote output
Should print 0 — moment must NOT be in the exposed chunk
grep -c "isMoment|_isUTC|proto.format" app1/build/ios/*.chunk.bundle
Check bundle sizes
ls -lh app1/build/ios/*.bundle
Expected result
grep output
0 ← moment is consumed from shared scope, not bundled
Exposed module chunk
app1_src_App_tsx.chunk.bundle ~50 KB (just App.tsx, no moment)
Actual result
grep output
14 ← moment IS in the exposed module chunk
Exposed module chunk
app1_src_App_tsx.chunk.bundle ~450 KB (App.tsx + full moment library)
With import: false, webpack 5 MF spec says no local fallback should be generated — the module is consumed exclusively from the shared scope. However, Re.Pack's ModuleFederationPlugin compiles the package into the exposed module chunk instead. The bytes change location but are never absent.
- 主要言語
- Java
- スター
- 69
- フォーク
- 23
- PR マージ指標
- 30日以内にマージされた PR はありません
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/repack-examples のほかの issue
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
callstack/repack-examples#12 · コメント 2 件 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
callstack/repack-examples#11 · コメント 1 件 · リアクション 1 件 ·
-
question
難易度 3/5 1〜2日 初心者へのやさしさ 25/100
callstack/repack-examples#10 · コメント 4 件 ·
-
難易度 5/5 1週間以上 初心者へのやさしさ 20/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 30/100
callstack/repack-examples#7 · コメント 4 件 ·
callstack/repack-examples の issue をすべて見る
似ている issue
-
bug
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
apache/cloudstack#14222 ·
-
[BUG]茶杯方块在取茶时会引发崩溃 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
-
1.0.0-alpha2 Type/Improvement
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
wso2/dpdp-accelerator#272 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
infinispan/infinispan#18150 ·
-
area/frontend
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100