官方文档:http://guides.ruby-china.org/asset_pipeline.html

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

1、Asset Pipeline 是什么

Asset Pipeline 提供了用于连接、简化或压缩 JavaScript 和 CSS 静态资源文件的框架。有了 Asset Pipeline,我们还可以使用其他语言和预处理器,例如 CoffeeScript、Sass 和 ERB,编写这些静态资源文件。应用中的静态资源文件还可以自动与其他 gem 中的静态资源文件合并。例如,与 jquery-rails gem 中包含的 jquery.js 文件合并,从而使 Rails 能够支持 AJAX 特性。

Asset Pipeline 是通过 sprockets-rails gem 实现的,在 production.rb 配置文件中,通过 config.assets.css_compressor 和 config.assets.js_compressor 选项可以分别为 CSS 和 JavaScript 静态资源文件设置压缩方式:

config.assets.css_compressor = :yui

config.assets.js_compressor = :uglifier

2、Asset Pipeline 主要特性

  • 连接静态资源文件,目的是减少渲染网页时浏览器发起的请求次数。Web 浏览器能够同时发起的请求次数是有限的,因此更少的请求次数可能意味着更快的应用加载速度。Sprockets 把所有 JavaScript 文件连接为一个主 .js 文件,把所有 CSS 文件连接为一个主 .css 文件。后文会介绍,我们可以按需定制连接文件的方式。在生产环境中,Rails 会在每个文件名中插入 SHA256 指纹,以便 Web 浏览器缓存文件。当我们修改了文件内容,Rails 会自动修改文件名中的指纹,从而让原有缓存失效。

  • 简化或压缩静态资源文件。对于 CSS 文件,会删除空格和注释。对于 JavaScript 文件,可以进行更复杂的处理,我们可以从内置选项中选择处理方式,也可以自定义处理方式。

  • 可以使用更高级的语言编写静态资源文件,再通过预编译转换为实际的静态资源文件。默认支持的高级语言有:用于编写 CSS 的 Sass,用于编写 JavaScript 的 CoffeeScript,以及 ERB。

3、指纹识别是什么,为什么要关心指纹?

3.1 查询字符串的策略

以前 Rails 采用的策略,通过内置的辅助方法,为每一个指向静态资源文件的链接添加基于日期生成的查询字符串。在网页源代码中,会生成下面这样的链接:

/stylesheets/global.css?1309495796

使用查询字符串的策略有如下缺点:

  • 如果一个文件的两个版本只是文件名的查询参数不同,这时不是所有缓存都能可靠地更新该文件的缓存。

  • 在多服务器环境中,不同节点上的文件名有可能发生变化。当静态资源文件被部署到某个节点上时,无法保证文件的时间戳保持不变,这样,对于同一个文件的请求,不同服务器可能返回不同的文件名。

  • 缓存失效的情况过多。每次部署代码的新版本时,静态资源文件都会被重新部署,这些文件的最后修改时间也会发生变化。这样,不管其内容是否发生变化,客户端都不得不重新获取这些文件。

3.2 指纹识别

指纹是一项根据文件内容修改文件名的技术。一旦文件内容发生变化,文件名就会发生变化。对于静态文件或内容很少发生变化的文件,这项技术提供了确定文件的两个版本是否相同的简单方法,特别是在跨服务器和多次部署的情况下。

当一个文件的文件名能够根据文件内容发生变化,并且能够保证不会出现重名时,就可以通过设置 HTTP 首部来建议所有缓存(CDN、ISP、网络设备或 Web 浏览器的缓存)都保存该文件的副本。一旦文件内容更新,文件名中的指纹就会发生变化,从而使远程客户端发起对文件新副本的请求。这项技术称为“缓存清除”(cache busting)。

Sprockets 使用指纹的方式是在文件名中添加文件内容的哈希值,并且通常会添加到文件名末尾。例如,对于 CSS 文件 global.css,添加哈希值后文件名可能变为:

global-908e25f4bf641868d8683022a5b62f54.css

使用指纹可以避免使用查询字符串的这些缺点,并且能够确保文件内容相同时文件名也相同。Rails 的 Asset Pipeline 也采取了这种策略,在开发环境和生产环境中,指纹都是默认启用的。通过 config.assets.digest 配置选项,可以启用或禁用指纹。

Rails的静态资源管理(一)——Asset Pipeline是什么的更多相关文章

  1. Rails的静态资源管理(六)—— Asset Pipeline缓存存储方式、预处理、升级等

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  2. Rails的静态资源管理(五)—— 自定义 Asset Pipeline

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  3. Rails的静态资源管理(四)—— 生产环境的 Asset Pipeline

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  4. Rails的静态资源管理(二)—— 如何使用 Asset Pipeline

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  5. Rails的静态资源管理(三)—— 开发环境的Asset Pipelin

    官方文档:http://guides.ruby-china.org/asset_pipeline.html http://guides.rubyonrails.org/asset_pipeline.h ...

  6. 使用Asset Pipeline管理rails生产环境静态资源实现步骤

    1.    修改项目中指向静态资源文件的链接 a)     访问静态资源文件 <%= stylesheet_link_tag "application", media: &q ...

  7. 已有项目使用Asset Pipeline管理静态资源

    1.    修改项目中指向静态资源文件的链接 a) 访问静态资源文件 <%= stylesheet_link_tag "application", media: " ...

  8. Ruby Rails学习中:Sass 和 Asset Pipeline,布局中的链接(Rails路由,具名路由),用户注册: 第一步

    接上篇: 一.Sass 和 Asset Pipeline Rails 中最有用的功能之一是 Asset Pipeline, 它极大地简化了静态资源文件(CSS.JavaScript 和图像)的生成和管 ...

  9. node静态资源管理变迁之路

    使用express自带的,express.static,如:app.use(express.static('hehe')),就可以用localhost/hua.png,访问项目根目录下,hehe文件夹 ...

随机推荐

  1. 【计算机网络】OSI模型,TCPIP模型

    今天给大家分享的是两种模型的主要区别,夜视比较容易混淆的地方.我尽力用图形的方式来说问题,这样比较好理解~ (PS:画图真的不会,正在认真学,希望多多包含:)) 一.二者的模型对比 (这个图有点丑.. ...

  2. 【算法】fhqtreap初探

    NOIP回来就一直想着学平衡树...平衡树写久了调不出来真的会头脑发热.jpg 大概只写了几道题... fhqtreap是不需要旋转的平衡树,仅使用分裂合并,一样可以保持平衡树的性质,并且可以非常简单 ...

  3. 集成Facebook SDK

    1. 下载SDK https://developers.facebook.com/docs/ios?locale=zh_CN 2. 如何集成 https://developers.facebook.c ...

  4. VC 模拟CMD 匿名管道

    #include "stdafx.h" #include <Windows.h> #include <stdio.h> #include <stdli ...

  5. VC数据类型

    不同编码格式下的字符串处理及相互转化: ◆ 大家在编程时经常遇到的数据类型:● Ansi:char.char * .const char *CHAR.(PCHAR.PSTR.LPSTR).LPCSTR ...

  6. 在移动端做查看日志信息的js

    Vconsole.js下载这个js引入需要使用的html文件,当运行到页面是就会在右下角显示提示,点击就出出现像pc端上的控制台页面 在线查看的网址 http://console.hongliang. ...

  7. setWindowFlags的使用

    setWindowFlags的使用  setWindowFlags(Qt::FramelessWindowHint); //隐藏标题栏 setWindowFlags(Qt::WindowCloseBu ...

  8. 碰到错误Could not load the Tomcat server configuration at \Servers\MyEclipse Tomcat v8.5-config. The Servers project is closed.

    本人用的myeclipse是2017版. 可能解决的方法是: 双击MyEclipse Tomcat v8.5,然后就会弹出以下窗口,

  9. 搜索4--noi6264:走出迷宫

    搜索4--noi6264:走出迷宫 一.心得 可以去看看别人的代码,吸收精华 二.题目 6264:走出迷宫 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 当 ...

  10. 20个PHP面试题及答案

    php学了那么久了,先来小试牛刀,看下这些PHP程序员面试题都会不会?初级题目1.问题:请用最简单的语言描述PHP是什么?答:PHP全称:Hypertext Preprocessor,是一种用来开发动 ...