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 测试这个。