Short introduction into Rails 7 asset pipeline based on my contribution to Ruby on Rails documentation:
https://github.com/rails/rails/pull/47012
Presented at Poznan Ruby User Group 26.01.2023.
https://jmatuszewski.com
4. 1. Serving assets to clients
How it’s done:
1. Move the assets to /public folder
2. Add <link rel="stylesheet" type="text/css" href=“style.css"> to <head>
3. Users download style.css for all pages
GET /index
GET /style.css
/index
/style.css
{Rails.root}/public/style.css
5. 1.5. Caching
Serve asset only once, then use cache
GET /style.css
/style.css
Headers: Cache For 1 Week
100ms
GET /style.css
/style.css
0ms
6. 2. Fingerprinting for cache invalidation
<link rel="stylesheet" href=“style-{checksum of file content}.css”>
GET /style-aaaa.css
/style-aaaa.css
Headers: Cache For 1 Week
100m
s
GET /style-aaaa.css
/style-aaaa.css
0ms
GET /style-bbbb.css
/style-bbbb.css
Headers: Cache For 1 Week
100ms
7. 3. Transpiling
Change the format of delivered files into one recognised by browser
style.scss
Transpiler
style.css
Fingerprinting, Compression
Asset Pipeline
12. Importmaps = aliases?
Without npm or yarn
# config/importmap.rb
pin "vue", to: “https://ga.jspm.io/npm:vue@3.2.45/..."
// application.js
import Vue from "vue"
Allows you to use
13. My takeaways
For learning:
• Read all README’s
• Reading the setup code(lib/setup folder)
• Give thumbs on New Documentation