在Rails中有效地加载CSS和JS(“对所有静态资产使用CDN”)

问题描述 投票:0回答:1

[我在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个回答
0
投票

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

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

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

3)不确定您的意思吗?但是正确的方法是在rails6及更高版本上使用webpacker

© www.soinside.com 2019 - 2024. All rights reserved.