不是特定的 Rails 问题，而是 Rails 应用程序中的问题。
在我的应用程序中，我使用jsbundling-rails配置了esbuild.
这个 gem在我的文件中添加了build一行。package.json它可以工作并编译我所有的 JS 并且运行良好。但是，我发现生成的文件相当大，所以我开始寻找优化它的方法。
此时我的 esbuild 语句如下所示：
"build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds"
首先，我认为我可以尝试使我的进口有条件。例如，仅在实际需要时才导入它们。我在这里问了另一个关于如何做到这一点的问题。
我在这方面学到了很多东西，但归根结底，奇怪的是，这对我的 JS 的输出没有任何影响。
Chrome 目前说我的主 JS 文件有 91% 的代码未使用。看起来所有导入仍在一起编译，无论它们是静态导入还是动态导入。为什么会这样？
然后我进一步观察esbuild，我发现了--splitting旗帜。这听起来相当正确，所以我将我的build脚本更新为：
"build": "esbuild app/javascript/*.* --bundle --splitting --format=esm --sourcemap --outdir=app/assets/builds"
这导致大量输出 JS 文件（我认为它们被称为“块”。
我运行了我的应用程序，但 JS 无法加载。控制台说
未捕获的语法错误：无法在模块外使用 import 语句
我不是 100% 确定为什么会这样，但我只是猜测我需要添加type: "module"到我javascript_include_tag的 Rails 应用程序布局视图中。
这使得 JS 加载（这很好:-)）
但是...未使用的 JS 代码的百分比仍然是我的 application.js 的 84%
所以.....我的问题如下：
- 我的模块动态导入是否有效？
- 为什么静态或动态导入似乎没有区别？
- 如何有效减少输出代码的大小，减少主页上 JS 的未使用百分比？
这一切都开始了，因为我在我的网站上运行了谷歌的 Lighthouse 测试，它报告我的结构和可访问性几乎完美，但性能 < 40。我的目标是解决这个问题。
我期待收到您关于如何尝试解决此问题并提高我的 Lighthouse Performance 分数的想法。