Rails:导入CDN文件与使用资产进行引导

时间:2017-01-17 18:25:51

标签: javascript ruby-on-rails twitter-bootstrap performance

我是一个全新的开发人员(约3-4周),我一直在使用rubymine在rails应用程序上构建我的ruby。我为bootstrap-4安装了一个插件,它为引导页面提供的自动模板包括以下几行代码:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css"
        integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"
        integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>

我花了最近2个小时阅读CDN文件和资产管道,但我仍然不明白这里的最佳做法是什么:我应该删除这些CDN文件并用宝石和/或'require'替换它们资产管道中的线路,还是应该留在这里?我知道这可能取决于我的目标,但我的目标只是提供我的网站风格,而不会导致加载时间的大幅滞后。我的一个页面将有很多onclick功能和api调用,在应用程序的先前版本中,事情变得越来越慢(不确定是否是因为javascript,但我的直觉告诉我它可能有一些东西到做它)。

总之,我想要简单,我想了解我的代码,哈哈。我应该保留这些CDN代码行还是应该用资产管道中的内容替换它们?

干杯,迈克尔

1 个答案:

答案 0 :(得分:3)

  

CDN 会立即将您的内容放在很多地方,从而提供卓越的服务   覆盖给您的用户。

您可以阅读有关他们的更多信息here

在上述情况下,您使用 CDN(内容分发网络)会更好,因为它会改善您的网页加载时间。这是第一次在链接中指定的js,css文件,脚本标记将从最近的位置缓存,从下一个请求开始,它们将从浏览器的缓存中加载。

首次请求时,js / css将从最近的地理位置加载,加载时间将减少。

示例:

考虑您的应用程序在美国托管,以及用户从印度访问它。 如果您使用CDN,它将尝试从最近的地理位置加载资产,就好像您没有使用CDN那样它将从美国加载,因此需要更多的加载时间。

一般情况下,最好在以下情况下使用资产:

  • 它不是常见的css / js,也不是您自己的资产
  • 如果你觉得每天/每周/每月至少改变一次

每当您执行资产预编译时,rails会将哈希代码附加到所有资产的名称,以及维护资产版本的轨道方式。默认情况下,资产将根据应用程序的缓存设置进行缓存,应用程序将使用缓存版本,直到有新版本的资产可用。唯一的问题是,它将始终从您应用的托管位置首次加载,因此加载时间会略微增加。

但您可以使用 AWS S3 ,它允许您将资产存储在S3存储桶中,然后从S3存储桶创建自己的CDN 。您可以使用 asset_sync gem here阅读同步资产以及从S3存储桶创建 AWS Cloudfront (CDN){{} 3}}