Javascript 随机未加载到 Ruby on Rails 5.2.3 生产模式

Question

I am still a newbie at Ruby on Rails. This framework has been really amazing for me. However, since I uploaded it into the production, I still do not understand why Ruby on Rails 5.2.3 on some random occasion does not load JavaScript properly. Sometimes it loads properly at the first try on opening the page, but when it does not, user has to refresh even sometimes several times until it is loaded properly. Also I get error from the browser where it says

GET .../assets/jquery-ui-1.8.16.custom.css net::ERR_ABORTED 500

when I did not in any way import or even writes a single line of code to import that file since I used the JQuery UI 1.12.1 loaded from CDN.

What is really important is, why Ruby on Rails 5.2.3 on some random occasions does not load the JavaScript properly?

Not only does it happen on production mode, also on the development mode this problem occurs on random ocassions as well.

I will post the application.js and application.scss and also the head part of the application.html.erb to give the insights of what I am doing wrong in this case:

application.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 .

application.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";

application.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>

I would hugely appreciate it if you guys could let me know what solutions I can do in order to avoid such random behaviors? Thank you very much for your time. :)

Answer 1

Never mind, I already solved the problem. The main issue that Ruby on Rails had is that if we use the JQuery provided by Rails 5.2.3 by the dependency written below

gem 'jquery-rails'

it will generate the application CSS file with the following line

@import 'jquery-ui.1.8.6.custom.css'

that involuntarily imports JQuery UI Custom CSS although the assets folder does not have the file written above

SOLUTION:

I would recommend you AGAINST using the JQuery provided by Rails 5.2.3 and change the JQuery using CDN method for best performance. So you can remove the following line on application.js

//= require jquery3

then load order of JQuery before application.js on application.html.erb like the following line:

<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' %>

Hope my solution could help. :)