Question

我正在使用rails 4.2应用程序，似乎它会为每个页面加载我的所有样式表。

这是真的吗？如何比仅为相关样式表加载每个页面更好？

一方面，我知道他们在开始制作时都会被缩小，它会缩小总体大小并为整个网站缓存一个CSS。

另一方面，页面I可能有一些薄页面需要不超过几条css行才能正确呈现，这将无缘无故地获得文件的音调。它还要求我在选择类名时要非常严格和安全，以便不会发生冲突和不必要的覆盖。

JS资产怎么样？它的行为方式相同吗？（我想图像资产的答案是“地狱不！”）

Answer 1

是的，在开发过程中，您会看到很多文件（全部都是这样），在生产中，它们将被编译并缩小为单个文件。

客户端下载此文件后，它将被缓存，并且不需要再次请求在并发请求中加载其他样式表文件（除非已禁用缓存和turbolinks）。缺点是文件大小会更大，并使初始加载时间稍长。

你指出的一个问题是范围界定。根据我的经验，在开发时始终应用适当的范围会更好。在使用sass的rails中，很容易拥有漂亮而整洁的CSS。

对于javascript也是如此，但对于您指出的图像则不然。

那就是说。如果需要，有很多方法可以解决这个问题，但通常情况下我已经意识到单个文件的优点而不是缺点。

编辑：
哦，如果你是初次使用rails，请注意turbolinks可能会让你在开始时在js文件中弄乱页面，从而引起一些麻烦。但最终还是值得的。

Answer 2

这样做的优点和基本原理是减少第一页加载后发送到客户端的数据量。第一页加载会将所有js / css（编译为单个文件）拉下来，但随后可以缓存并减少每个后续页面加载的数量。

以下是纯理论上的，如果可能的话，尝试使用一个css / jss文件的默认值

如果你绝对想要削减它，那么你可以。您的application.css清单文件（或js）可能包含一行，例如：

[INFO] Scanning for projects... [INFO] [INFO] ------------------------------------------------------------------------ [INFO] Building Common 3.0 [INFO] ------------------------------------------------------------------------ [INFO] [INFO] --- maven-resources-plugin:2.6:resources (default-resources) @ Common --- [INFO] Using 'UTF-8' encoding to copy filtered resources. [INFO] Copying 0 resource [INFO] [INFO] --- maven-compiler-plugin:3.1:compile (default-compile) @ Common --- [INFO] Nothing to compile - all classes are up to date [INFO] [INFO] --- maven-resources-plugin:2.6:testResources (default-testResources) @ Common --- [INFO] Using 'UTF-8' encoding to copy filtered resources. [INFO] skip non existing resourceDirectory /Users/dwnz/Development/Server/code/product/Common/src/test/resources [INFO] [INFO] --- maven-compiler-plugin:3.1:testCompile (default-testCompile) @ Common --- [INFO] No sources to compile [INFO] [INFO] --- maven-surefire-plugin:2.12.4:test (default-test) @ Common --- [INFO] No tests to run. [INFO] [INFO] --- maven-jar-plugin:2.4:jar (default-jar) @ Common --- [INFO] [INFO] --- maven-install-plugin:2.4:install (default-install) @ Common --- [INFO] Installing /Users/dwnz/Development/Server/code/product/Common/target/Common-3.0.jar to /Users/dwnz/.m2/repository/com/mycompany/product/server/common/Common/3.0/Common-3.0.jar [INFO] Installing /Users/dwnz/Development/Server/code/product/Common/pom.xml to /Users/dwnz/.m2/repository/com/mycompany/product/server/common/Common/3.0/Common-3.0.pom [INFO] [INFO] --- maven-deploy-plugin:2.7:deploy (default-deploy) @ Common --- Uploading: http://maven.mycompany.com/server-product/com/mycompany/product/server/common/Common/3.0/Common-3.0.jar 213/213 KB ---->> Here it hangs *forever*!

说，需要此目录中的所有内容。然后你可以拆分它，所以application.css只需要应用程序文件夹中的所有内容（绝对需要知道）：

//= require_tree .

然后添加其他清单文件，例如管理部分，这样只有在admin.js中需要时才能加载管理样式/ JS

//=require_tree ./application

然后在你的布局文件中你可以做到

//=require_tree ./admin

你想要那些额外的样式，你可以添加它们。

= stylesheet_link_tag "application", media: "all" = yield :additional_stylesheets

注意：如果您使用turbolinks，这将导致问题。注意II：您可能需要将这些添加到application.rb中的预编译列表中：

- content_for :additional_stylesheets do = stylesheet_link_tag "admin", media: "all" end

您可以修改此工作流程，使其根本不包含任何CSS，只加载您需要的内容。

rails 4.2资产加载

2 个答案: