Understand the basics of Asset Pipeline and how does it help in Rails applications.
What is Asset Pipeline?
Prior to Rails 3.1, this was achieved by using tools like Jammit and Sprockets.
Why Asset Pipeline?
The biggest advantage is better response times and hence better performance of the application. Here are other advantages:
1. It reduces the number of http requests (to fetch css and js files) to serve one page, which reduces page load time drastically.
2. Browsers have a limit on the number of requests that they can make in parallel to a given server, so reducing the number of http requests also allows browser to fetch resources in parallel, thereby making the page load faster.
3. It prevents the problems with some browsers which have limit on the number of css/js files it will render, and also on the number of lines in each file.
4. It makes it very easy to cache static assets.
5. It clears up too much junk data in public folder and makes css, js and images first class citizens of the app.
Let's have a look at the features of asset pipeline.
Asset Pipeline introduced a new concept called "pre-processors" for static assets. It enables us as developers to write modular and cleaner js and css code using high-level languages, which are pre-compiled to js and css. Default pre-processor for css is “SASS" and for js is "Coffee Script". All you need to take advantage of that is append a .scss extension to the css files and .coffee extension to js files. It also allows chaining multiple pre-processors, and you can use Ruby code within the css and js files, by simply adding .erb processor.
*= require theme *= require_tree */
This concatenates contents of this file and all other css files in current directory recursively into a single file. This pre-compiled file is saved in public/assets folder. All we have to do is include this file into our layout. The same is done for js files also.
Instead of requiring tree, files can be loaded in a specific order by specifying the file name like require theme in example above. Rails will look for these files in the following paths:app/assets – For application specific assets
lib/assets – For assets which are or can be shared across applications vendor/assets – For third party assets like js/css plugins
Additional load paths can be added to config.assets.paths in application.rb
By default Rails provides only one manifest file for each css and js. But, we can have more than one manifest files in our application. For example, if admin or blog section has a different layout and styles, it can be defined in new manifest file admin.css or blog.css, and require the related css files in them. Remember to add those to the config.assets.precompile list in environments/production.rb file.
Minification and Compression
After minification, Rails inserts a MD5 fingerprint into each filename, so the filename will become dependent on its contents and won't change until its content changes. So HTTP headers can be set to cache the file with a far future expiry date, and hence the browsers will request/load this file on the very first time the application is loaded, on all subsequent requests it will be picked directly from the cache. Here's how the file would be named: application-908e25f4bf641868d8683022a5b62f54.css
To further reduce the file size, Rails compresses the file by creating gzipped (.gz) version of assets. So, webservers can serve gzipped version of files which will be smaller in size and hence can be transmitted much faster over the network.
Asset pipeline can provide significant improvements in response times and performance of Rails apps, and modularize and clean-up assets, so start using it today. If you are on older versions of Rails, then don't worry you can use un-official Rails 2 version to take advantage of most of Asset pipeline features now.
Asset Pipeline in Ruby on Rails applications