加载数十个 jquery 资产的 Rails 应用程序

Posted 2023-05-09

技术标签:

【中文标题】加载数十个 jquery 资产的 Rails 应用程序【英文标题】：Rails app loading dozens of jquery assets 【发布时间】：2019-02-23 03:01:28 【问题描述】：

我的 rails 应用程序生成一个 html 页面，其中包含大约 40 个链接和 80 个脚本。这不可能是正常的，不是吗？我想知道我是否可以减少这些，如果它可能有助于解决我的应用程序在 heroku 上引发的内存错误。或者它是否可以帮助我的应用提高性能。

已编译的 html（我只会包含前四个链接标签和前四个脚本标签，除非我收到将它们全部发布的请求。）

<html>
<head>
  <title>Dr. Macejkovic | Mr. Z School </title>
  <link rel="stylesheet" media="all" href="/assets/jquery-ui/theme.self-830c3407ba1359ea36eee978235be14de5b78dacfa658a31226fe4f2b0faa7e7.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/core.self-e4bdefd3813c8a715955a6c65b9e730846dcae6a0576618563d635ff0b18a3ca.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/accordion.self-aa0730fc025317fed4feff2aa5fc07cba5a545dfc5c913a2984ba6f8695b29fb.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/jquery-ui/autocomplete.self-f0b810a4a7bb8c90994675d7c5bfe636d615a5785cf81cae3340aa5e6adc55ca.css?body=1" data-turbolinks-track="true" />

#40 additional similar link tags omitted

  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="lQ2XTs3tTFNf+nuVR2NS9FPk/R4JWOO75SVBJuxfok547SCaN2KooB44hVwjJo1Pl5oX+bahrG8OdUyow5u6eQ==" />
   <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
 <![endif]-->
  <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap.self-d0e973a52d36a01036265aeefaf2d1ae3499d2cb231a9be3bd846432daf231de.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1" data-turbolinks-track="true"></script>

  #80 additional similar script tags omitted
</head>

宝石文件

source 'https://rubygems.org'

gem 'rails',          '5.0.0'
gem 'bcrypt',         '3.1.11'
gem 'faker',          '1.6.3'
gem 'will_paginate',           '3.1.0'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'bootstrap-sass', '3.3.6'
gem 'puma',           '3.4.0'
gem 'sass-rails',     '5.0.5'
gem 'uglifier',       '3.0.0'
gem 'coffee-rails',   '4.2.1'
gem 'jquery-rails',   '4.1.1'
gem 'jquery-ui-rails'
gem 'turbolinks',     '5.0.0'
gem 'jquery-turbolinks'
gem 'jbuilder',       '2.4.1'
gem 'best_in_place', '~> 3.1'
gem 'responders', '~> 2.2'
gem 'carrierwave', '0.11.2'
gem 'mini_magick', '~> 4.3'
gem 'figaro'
gem 'fog-aws', '0.12.0'

group :development, :test do
  gem 'sqlite3', '1.3.11'
  gem 'byebug',  '9.0.0', platform: :mri
end

group :development do
  gem 'web-console',           '3.1.1'
  gem 'listen',                '3.0.8'
  gem 'spring',                '1.7.1'
  gem 'spring-watcher-listen', '2.0.0'
end

group :test do
  gem 'rails-controller-testing', '0.1.1'
  gem 'minitest-reporters',       '1.1.9'
  gem 'guard',                    '2.13.0'
  gem 'guard-minitest',           '2.4.4'
  gem 'capybara'
  gem 'poltergeist', '~> 1.10'
  gem 'database_cleaner'
end

group :production do
  gem 'pg', '0.18.4'
end

App/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= full_title(yield(:title)) %> </title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>

  <%= csrf_meta_tags %>
  <%= render 'layouts/shim' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
</head>
<body>
  <%= render 'layouts/header' %>

  <div class="container">
    <% flash.each do |message_type, message| %>
        <%= content_tag(:div, message, class: "alert alert-#message_type") %>
    <% end %>
    <%= yield %>
    <%= render 'layouts/footer' %>
    <%= debug(params) if Rails.env.development? %>
  </div>


</body>
</html>

提前感谢您的任何见解。

附：这个问题只是我试图解决内存错误的步骤之一。如果您有一些明确的建议或推荐的文章，我也将不胜感激。我正在阅读这篇文章http://www.schneems.com/2015/05/11/how-ruby-uses-memory.html，但我正在努力弄清楚如何将此信息应用于我的应用程序。

【问题讨论】：

当你在 heroku 上说内存错误时，你到底是什么意思？根据您用于前端管理的内容，这 4 个链接对于许多使用 bootstrap css（jquery、jquery ujs、turbolinks 和 bootstrap）的 rails 项目来说似乎是相当标准的。通过将所有这些都放在 html 正文的末尾，您将获得渲染提升，但如果您的所有插件都没有以支持它的方式编写，则可能会导致问题。感谢您的评论。尾部日志中的特定错误为“Ruby 中超出 R14 内存配额”。它导致我的用户看到“应用程序错误”死页。这四个链接只是一个示例。我省略了大多数以使这个问题易于管理。完整的 html 头部大约有 40 个链接标签和 80 个脚本标签。我最终尝试链接到 jquery，但这导致其中大部分停止工作。好的，是的，服务器上的内存不会与 ruby 内存变高有关。这些链接是在服务器上生成的，但从 Ruby/Rails 内存的角度来看，它们基本上是免费的 b/c，它们不会下载它们或做任何事情，它们只是用资产指纹标记它们，然后将它们内联到您的 html 中。酷。谢谢。所以听起来不值得为了记忆而修剪那些。是否值得尝试修剪它们以加快页面加载速度？是的，但这取决于前端 javascripts 处理那些在绘制 html 上的所有内容后在页面末尾加载的内容的能力。 【参考方案1】：

以上通过gems加载的附加js文件

gem 'jquery-rails',   '4.1.1'
gem 'jquery-ui-rails'
gem 'turbolinks',     '5.0.0'
gem 'jquery-turbolinks'

当你在 gem 文件中包含这些 gem 时，js 文件将被添加到

app/assets/javascripts/application.js

例如：

//= require jquery
//= require jquery_ujs

如果您不需要那些 jquery 和 turbo 链接，您可以对这些 gem 执行操作。

有关更多信息，您可以查看那些 gems 文档。

对于 jquery： https://www.rubydoc.info/gems/jquery-rails/4.3.3

【讨论】：

这是否意味着每个使用这四个 gem 的人也会在他们的 html 中找到 100 多个 js 标签？所以没有办法在不移除宝石的情况下削减其中一些？ @JeffZivkovic 我给出的示例使用一些 gem 将包含一些 javascript 链接，相同的规则不适用于所有 gem。

以上是关于加载数十个 jquery 资产的 Rails 应用程序的主要内容，如果未能解决你的问题，请参考以下文章

一些资产没有加载到旧的 Rails 3-2-stable 应用程序中

由于rails资产，jQuery事件多次触发？

Rails 应用程序未在弹性 beantalk aws 上加载资产

使用单独的脚本文件和 Rails 资产

数十个用户的数十个资源的Keycloak授权服务

Rails 4：资产未在生产中加载