在 Rails 中分离 Css 文件（变慢）答案

【问题标题】：Separation of Css files in Rails (makes slow)在 Rails 中分离 Css 文件（变慢）
【发布时间】：2015-06-25 06:28:53
【问题描述】：

rails 中资产文件夹背后的逻辑，一旦我理解，它就会变得更快。但是，我的应用程序运行缓慢。我想我做错了什么。

所以，我在资产文件夹中有 css 文件和 js 文件。但其中一些仅适用于 1 页。但是所有文件都已加载。我猜是因为application.js有

//= require_tree .

对于 css 也一样。在这种情况下，无论我单击哪个页面，都会加载所有 css 和 js 文件。这是文件夹的层次结构；

这是加载的内容；

<html>
  <head>
    <title>Sign up | Ruby on Rails Tutorial Sample App</title>
    <link rel="stylesheet" media="all" href="/assets/account_activations-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/boats-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/carousel-956151185eb5b53745598c8940f18077.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/custom-77b5d56b10f05640161b7c57eb235662.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/main-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/password_resets-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/profiles-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/sessions-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/users-64e62ddc273c2f5847f30d698ca14b67.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application-cd159239290bb1f8647f0f7d39aa3ffc.css?body=1" data-turbolinks-track="true" />
    <script src="/assets/jquery-87424c3c19e96d4fb033c10ebe21ec40.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs-e27bd20a10d28155845a22d71ef94f2f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks-d9dcd5206ee131f11181e8ca09537148.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/affix-4aa497ad1a679d7fa3de7aa10db2c248.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/alert-f0634df255bb1dc37f98c8be82434bec.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/button-1189204cf501fc7ddbe0384f5c7a3e04.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/carousel-65843039ab1c8b32832fda680448146a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/collapse-4d358a4cbe9ca0a9cc3e124610787f88.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/dropdown-a234ed5390532f267df4f5a13236de95.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/tab-54d92c1012635a68526fcf2590679f4a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/transition-8cd2695d7ee2b30315b7e024422eb427.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/scrollspy-5e0c86e7fbc3752c3898df3c690e52fb.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/modal-b75feab289989a62ead5720c2b655fca.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/tooltip-5a9f4a24a67c380028b0164a546de5f4.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap/popover-9666a38e5d68a25bd4e839bee36f5d30.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-sprockets-3ca152e549e0b8086e1891275d70a987.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/account_activations-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/boats-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/main-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/password_resets-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/profiles-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/sessions-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/users-fcec5b5a277ac7c20cc9f45a209a3bcd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-1864dbf2e5658f9c8b55e81bcaaf8de2.js?body=1" data-turbolinks-track="true"></script>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="lRaTLkwxRWtgHZP3j1YyWpvkZoo09sR6R4WadYcI+g3I1JHsA3d64FPpW1a76heApiM6FnNRgnueX9aAX2pBNw==" />
    <!--[if lt IE 9]>

抱歉，这篇文章太长了，有没有办法重新组织所有内容，以便它们中的任何一个都适用于其相关页面？谢谢

【问题讨论】：

你在开发环境中吗？
是的，它还在开发环境中。

标签： javascript css ruby-on-rails structure directory

【解决方案1】：

是的，您是正确的，因为 //= require_tree . 加载了所有 js 文件，这就是 rails 所做的。但是您目前处于单独显示每个文件的开发环境中。是的，它会影响速度，但为了使其更快，rails 在生产模式下会将所有文件编译为一个（css 和 js 文件）。您可以在此处阅读更多相关信息：

http://guides.rubyonrails.org/asset_pipeline.html

还有一个建议是删除所有空白的 css 和 js 文件。我的意思是，当您生成资源、控制器或脚手架时，它会创建一个相同的 css 和 js 文件。因此，如果它没有被使用，请删除它。

希望这会有所帮助。

【讨论】：

谢谢，不知道它还会创建用于生成控制器的css，我会组织它。赞赏！。