javascript - Javascript 随机未在 Ruby on Rails 5.2.3 生产模式上加载
问题描述
我仍然是 Ruby on Rails 的新手。这个框架对我来说真的很棒。但是,自从我将它上传到生产环境中,我仍然不明白为什么 Ruby on Rails 5.2.3 在某些随机场合无法正确加载 JavaScript。有时它会在第一次尝试打开页面时正确加载,但如果没有,用户有时甚至需要刷新几次才能正确加载。我也从它说的浏览器中得到错误
获取 .../assets/jquery-ui-1.8.16.custom.css net::ERR_ABORTED 500
当我没有以任何方式导入甚至编写一行代码来导入该文件时,因为我使用了从 CDN 加载的 JQuery UI 1.12.1。
真正重要的是,为什么 Ruby on Rails 5.2.3 在某些随机 场合不能正确加载 JavaScript?
它不仅发生在生产模式上,而且在开发模式上,这个问题也会随机出现。
我将发布 application.js 和 application.scss 以及 application.html.erb 的头部,以提供在这种情况下我做错了什么的见解:
应用程序.js
//= require jquery3
//= require jquery-ui/core
//= require jquery-ui/widgets/slider
//= require rails-ujs
//= require popper
//= require cocoon
//= require social-share-button
//= require social-share-button/wechat
//= require rippleria/js/jquery.rippleria.min
//= require_tree .
应用程序.scss
/*
*= require gmaps-auto-complete
*= require social-share-button
*= require jquery-ui/core
*= require jquery-ui/slider
*/
@import "pretty-checkbox/dist/pretty-checkbox";
@import "rippleria/css/jquery.rippleria";
应用程序.html.erb
<%= stylesheet_link_tag 'application', media: 'all' %>
<%= stylesheet_link_tag 'sub/style' %>
<%= stylesheet_link_tag 'sub/components.min' %>
<%= stylesheet_link_tag 'sub/custom' %>
<%= stylesheet_link_tag 'sub/chat.min' %>
<%= javascript_include_tag 'application', async: Rails.env.production? %>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/galleria/1.5.7/galleria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.3/flatpickr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
如果你们能让我知道我可以采取哪些解决方案来避免这种随机行为,我将不胜感激?非常感谢您的宝贵时间。:)
解决方案
没关系,我已经解决了这个问题。Ruby on Rails 的主要问题是,如果我们通过下面写的依赖项使用 Rails 5.2.3 提供的 JQuery
gem 'jquery-rails'
它将使用以下行生成应用程序 CSS 文件
@import 'jquery-ui.1.8.6.custom.css'
尽管 assets 文件夹没有上面写的文件,但不由自主地导入 JQuery UI Custom CSS
解决方案:
我建议您反对使用 Rails 5.2.3 提供的 JQuery,并使用 CDN 方法更改 JQuery 以获得最佳性能。因此,您可以删除application.js上的以下行
//= require jquery3
然后在application.html.erb上的application.js之前加载 JQuery 的顺序,如下行:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<%= javascript_include_tag 'application', async: Rails.env.production?, :cache => 'cached/all' %>
希望我的解决方案能有所帮助。:)
推荐阅读
- .htaccess - 如何为 2 个不同的文件夹正确设置主机和 v-host?
- ruby-on-rails - 如何在 Ruby 中将毫秒的日期时间字符串转换为日期时间?
- python - ValueError:将加法/乘法的字符串转换为 int
- google-api - 谷歌的 ampUrls:batchGet 返回 404?
- nativescript - Gridlayout 排在另一排
- schema.org - 什么样的 Schema.org 标签用于多个链接组?
- amazon-web-services - AWS ECR 事件触发的 Cloudwatch 事件规则
- java - IntelliJ 和 Eclipse IDE 之间的不同编译时间
- android - 当我使用 LAN 时,Wifi 中的模拟器没有连接
- python-3.x - 如何按键合并两个数组和分组?