问题标签 [jsbundling-rails]

我正在将我的 Rails 应用程序更新到版本 7。作为其中的一部分，我已经删除了 Webpacker，并试图将我的整个资产解决方案移动到新的 jsbundling-rails 和 cssbundling-rails gems。到目前为止，它工作得非常好，而且简单得多。

似乎不起作用的事情之一是 CSS 文件中引用的图像，这些文件是 3rd 方库（如 Photoswipe）的一部分。

库本身可以工作，但图像失败。Photoswipe 包含一个用于皮肤路径的 SCSS 变量，当我使用 Webpack 时，我将这一行设置如下：

这现在失败了，我已经尝试了很多东西的组合，但我似乎无法让这些图像正常工作。

这不仅仅是一个 Photoswipe 问题，它发生在许多其他引用图像的库中。

有什么建议么？

我目前正在使用带有 webpack（不是 webpacker）的新 rails 7 和js_bundling gem 构建应用程序。但我无法让 javascript 工作。

我目前正在assets/builds/application.js使用运行正常的 webpack 将所有资源打包到其中，然后assets/config/manifest.js以下列方式包含它们：

最后我用javascript_include_tag "application", 'data-turbolinks-track': 'reload'在我views/layouts/application.html.erb的包括它。我看不到包含的真正来源，也没有我尝试过的包含实际工作的包含。

提前感谢您对更改内容的任何建议。我对捆绑的概念相当陌生，因此也欢迎解释 Rails 如何使用这些包含。

不是特定的 Rails 问题，而是 Rails 应用程序中的问题。

在我的应用程序中，我使用jsbundling-rails配置了esbuild.

这个 gem在我的文件中添加了build一行。package.json它可以工作并编译我所有的 JS 并且运行良好。但是，我发现生成的文件相当大，所以我开始寻找优化它的方法。

此时我的 esbuild 语句如下所示：

首先，我认为我可以尝试使我的进口有条件。例如，仅在实际需要时才导入它们。我在这里问了另一个关于如何做到这一点的问题。

我在这方面学到了很多东西，但归根结底，奇怪的是，这对我的 JS 的输出没有任何影响。

Chrome 目前说我的主 JS 文件有 91% 的代码未使用。看起来所有导入仍在一起编译，无论它们是静态导入还是动态导入。为什么会这样？

然后我进一步观察esbuild，我发现了--splitting旗帜。这听起来相当正确，所以我将我的build脚本更新为：

这导致大量输出 JS 文件（我认为它们被称为“块”。

我运行了我的应用程序，但 JS 无法加载。控制台说

未捕获的语法错误：无法在模块外使用 import 语句

我不是 100% 确定为什么会这样，但我只是猜测我需要添加type: "module"到我javascript_include_tag的 Rails 应用程序布局视图中。

这使得 JS 加载（这很好:-)）

但是...未使用的 JS 代码的百分比仍然是我的 application.js 的 84%

所以.....我的问题如下：

1. 我的模块动态导入是否有效？
2. 为什么静态或动态导入似乎没有区别？
3. 如何有效减少输出代码的大小，减少主页上 JS 的未使用百分比？

这一切都开始了，因为我在我的网站上运行了谷歌的 Lighthouse 测试，它报告我的结构和可访问性几乎完美，但性能 < 40。我的目标是解决这个问题。

我期待收到您关于如何尝试解决此问题并提高我的 Lighthouse Performance 分数的想法。