【问题标题】：Load CSS and JS efficiently in Rails ("Use a CDN for all static assets")在 Rails 中高效加载 CSS 和 JS（“为所有静态资产使用 CDN”）
【发布时间】：2020-06-05 00:35:18
【问题描述】：

我在 www.webpagetest.org 上进行了分析，它告诉我这一点..

> Use a CDN for all static assets: 89/100
> 
> FAILED - https://fonts.googleapis.com/css?family=Montserrat:400,700
> FAILED - https://fonts.googleapis.com/css?family=Kaushan+Script FAILED
> - https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic
> FAILED -
> https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700
> FAILED - https://maps.googleapis.com/maps/api/js?key=ABCDEFG=places

我按如下方式加载这些 CSS 和 JS 脚本：

我的布局文件中的头部部分

<HEAD>
  ... code...
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'%>
  <%= javascript_include_tag "https://maps.googleapis.com/maps/api/js?key=ABCDEFG&libraries=places", :defer => "defer" %>
  ... code ...
</HEAD>

assets/stylesheets 文件夹中的application.scss

@import "bootstrap";

/* Font-Awesome CDN */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css');

/* Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Kaushan+Script');
@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700');

我正在尝试优化页面的加载，

1) “对所有静态资产使用 CDN”是什么意思？我以为这些来自 CDN？

2) 有效加载此 CSS 和 JS 代码的最佳方法是什么。

3) 应该下载所有这些文件，而不是从我的服务器引用 URL？

【问题讨论】：

标签： css ruby-on-rails ruby-on-rails-6 google-webfonts

【解决方案1】：

1) 对所有静态资产均使用 CDN 基本上是加载你的照片以及引导文件或谷歌字体......你可以使用 CDN 或内容分发网络

例如，您可以使用 Amazon s3 存储桶来保存您网站上的照片，这样当访问者请求您的网站时加载速度会更快，因为有 2 个不同的服务器提供该网站。一个提供html，而CDN负责重图像视频或大型css/JS文件。

2) 我加载 CSS 和 JS 文件最有效的方式是异步的

3) 不确定您的意思？但正确的方法是在 rails6 及以上版本使用 webpacker

【讨论】：