js 模塊在多頁 web 應用程序中的使用（Closure 編譯器）

Question

我有一個 web 應用程序，其中包含幾個頁面，其中包含一些共享代碼的 js 文件。

- common1.js
- common2.js
- page1.js
- page2.js
- page3.js
...

共享文件與 page1 一起加載，單擊按鈕時，頁面更改為 page2 或 page3。 我使用 Closure Compiler，每一頁都是一個塊。

--js "../common1.js" \
--chunk common1.min:1 \
--js "../common2.js" \
--chunk common2.min:1:common1.min \
--js "../page1.js" \
--chunk page1.min:1:common2.min \
--js "../page2.js" \
--chunk page2.min:1:common2.min \

一切正常，塊已正確加載。 （高級優化）

不幸的是，我需要開始使用模塊。 我重構了 js 文件以使用導入/導出。 問題是所有代碼都移到了我的入口點，而其他塊是空的。

 --compilation_level ADVANCED_OPTIMIZATIONS \
 --language_out ECMASCRIPT_2021 \
 --dynamic_import_alias "dynamicImport" \
 --chunk_output_type "ES_MODULES" \

 --dependency_mode PRUNE_LEGACY \
 --entry_point "${JS_PATH}/page1.js" \

例如：page2 和 page3 是空的。

我究竟做錯了什么？ 我找到的唯一解決方案是單獨構建每個頁面。 但是，由於許多代碼是共享的，因此文件 output 會更大，因為共享代碼無法使用。 （它被緩存所以沒有加載時間）

Answer 1

每個單獨的文件都是一個單獨的入口點，您需要單獨編譯每個文件。

如果它們共享公共代碼，請將它們導入各自的頁面並單獨編譯文件。

如果您需要具有單個入口點的單獨塊，請嘗試使用動態導入。 這將按照您的預期創建塊。

參考： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#dynamic_imports

注意：Webpack 可以很好地處理動態塊。 但是我沒有用 Closure 測試這個。