jQuery元素使用|站点速度101

我有一个添加了宝石的应用程序：

gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-ui-sass-rails'
gem "twitter-bootstrap-rails"

当然，我还有很多其他的宝石，但这些正是我现在想要关注的

网站加载速度有点慢，在我的

application.js

中，我只需调用jquery.all就可以获得我加载的所有jquery内容（我认为我甚至不需要）

我的应用程序没那么大，我想我不需要jquery提供的所有东西。但是因为我是一个新手（大家好），我不太清楚我在application.js中需要使用哪些插件、小部件和元素，所以我不必只调用jquery.all

除此之外，很多想法都不是从TurboLink加载的，用户必须对页面进行F5操作才能加载所有元素

例如：这是每个页面上加载的内容：

 <link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/twitter-bootstrap-static/fontawesome.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/bootstrap_and_overrides.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/devise-forms.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/flat-ui.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/flatuipro-demo.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/pages.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/shows.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/styles.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.core.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.widget.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.accordion.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.position.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.menu.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.autocomplete.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.datepicker.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.mouse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.draggable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.resizable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.dialog.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.droppable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-blind.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-bounce.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-clip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-drop.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-explode.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fade.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-fold.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-highlight.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-pulsate.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-scale.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-shake.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-slide.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.effect-transfer.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.progressbar.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.selectable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.slider.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.sortable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.spinner.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tabs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.all.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.masonry.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/twitter/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.ui.touch-punch.min.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-select.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap-switch.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatui-checkbox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatui-radio.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.tagsinput.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.placeholder.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.stacktable.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatuipro.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/clips.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/flatuipro-demo.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/shows.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

有人能给我解释一下Turbolinks到底发生了什么，以及如何处理jQuery的混乱局面吗

---

，

我不熟悉turbo链接，但我肯定会建议摆脱那种

/=require jquery.ui.all

调用。处理jQuery UI内容的一种简单方法是手动调用head标记中的库进行开发：

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

---

一旦你知道你需要库的哪些部分，只需下载一个定制包，其中只包含你需要的功能，然后把js文件放到你的

assets/javascripts

文件夹中。您可以对大多数需要的库执行此操作，因为其中一些库的功能可能是多余的。

/=require_树。

清单文件末尾的调用将调用

资产/javascripts文件夹中的所有js文件。
嗨，Mini John，你听说过rails资产管道吗。你应该通过这个链接。希望你能找到你所有的答案。嘿：）默认情况下启用资产管道。我正在使用它。是的，它在默认情况下是启用的。但是您可以根据自己的需要在application.js和application.css中进行更改，无论您想要什么库。我想我将首先只需要那些我需要的库，通过//=require。但问题是我不知道我需要什么样的库：）目前我想这是一个解决方案。非常感谢。
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" src="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">