问题标签 [jsbundling-rails]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
ruby-on-rails - 使用 jsbundling-rails 时第三方库中的 CSS 资产路径
我正在将我的 Rails 应用程序更新到版本 7。作为其中的一部分,我已经删除了 Webpacker,并试图将我的整个资产解决方案移动到新的 jsbundling-rails 和 cssbundling-rails gems。到目前为止,它工作得非常好,而且简单得多。
似乎不起作用的事情之一是 CSS 文件中引用的图像,这些文件是 3rd 方库(如 Photoswipe)的一部分。
库本身可以工作,但图像失败。Photoswipe 包含一个用于皮肤路径的 SCSS 变量,当我使用 Webpack 时,我将这一行设置如下:
这现在失败了,我已经尝试了很多东西的组合,但我似乎无法让这些图像正常工作。
这不仅仅是一个 Photoswipe 问题,它发生在许多其他引用图像的库中。
有什么建议么?
webpack - 将 webpack 与 js_bundling 和 rails 7 一起使用
我目前正在使用带有 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 如何使用这些包含。
javascript - 减少 Rails 应用程序中的 Javascript 大小并提高性能分数。也许ESBuild有问题?
不是特定的 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%
所以.....我的问题如下:
- 我的模块动态导入是否有效?
- 为什么静态或动态导入似乎没有区别?
- 如何有效减少输出代码的大小,减少主页上 JS 的未使用百分比?
这一切都开始了,因为我在我的网站上运行了谷歌的 Lighthouse 测试,它报告我的结构和可访问性几乎完美,但性能 < 40。我的目标是解决这个问题。
我期待收到您关于如何尝试解决此问题并提高我的 Lighthouse Performance 分数的想法。