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

Question

rails 中 assets 文件夹背后的逻辑，我一理解就让它更快。但是，我的应用运行缓慢。我想我做错了什么。

因此，我在资产文件夹中有 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]>

抱歉这么长 post，有没有办法重新组织所有内容，以便它们中的任何一个都可以与其相关页面一起使用？。谢谢

Answer 1

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

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

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

希望对您有所帮助。

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

Separation of Css files in Rails (makes slow)

javascript

css

ruby-on-rails

structure

directory