ไฟล์ CSS และ JS เดินทางยังไง — fingerprinting, Propshaft และ importmap

asset คืออะไร — ของในร้านที่ไม่ได้ทำใหม่ทุกจาน

หน้าเว็บหนึ่งหน้าไม่ได้มีแค่ HTML · HTML บอกว่ามีอะไรบนหน้า แต่หน้าตามาจากไฟล์ CSS · การขยับได้มาจากไฟล์ JavaScript · และยังมีรูป ฟอนต์ ไอคอนอีก
ไฟล์พวกนี้ที่ไม่ใช่ HTML เรียกรวม ๆ ว่า asset · ต่างจาก HTML ตรงที่ทุกคนได้ไฟล์เดียวกันเป๊ะ ไม่ต้องทำใหม่ต่อคำขอ

เทียบกับร้านอาหาร: HTML คือจานอาหารที่ครัวทำใหม่ทุกออร์เดอร์ (บทความไม่เหมือนกันแต่ละหน้า) · ส่วน asset คือของตกแต่งร้านและเมนูเล่ม — พิมพ์ครั้งเดียว ทุกโต๊ะใช้เล่มเดียวกัน

ในแอปของเรา asset อยู่ตรงนี้:

แล้วเบราว์เซอร์รู้ได้ยังไงว่าต้องไปเอาไฟล์พวกนี้? เพราะ layout เขียนบอกไว้ใน <head> · ดูสองบรรทัดนี้ใน app/views/layouts/application.html.erb:

<%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
<%= javascript_importmap_tags %>

• stylesheet_link_tag :app — helper ที่เขียนแท็ก <link rel="stylesheet"> ให้ ทุกไฟล์ CSS ในแอป (:app = "เอาของแอปทั้งหมด") · ของเรามีสองไฟล์ จึงได้สองบรรทัด
• "data-turbo-track": "reload" — ป้ายให้ Turbo คอยดูว่าชื่อไฟล์นี้เปลี่ยนไหม ถ้าเปลี่ยนให้โหลดใหม่ทั้งหน้า (Turbo คือตัวที่ทำให้เปลี่ยนหน้าโดยไม่โหลดใหม่ทั้งหน้า — ละเอียดบท 130) · ตอนนี้แค่รู้ว่ามี
• javascript_importmap_tags — helper ที่เขียนส่วน JavaScript ทั้งหมดให้ (หัวข้อ importmap ท้ายบท)

เปิด server (bin/dev แบบบท 120) แล้วดูว่าเบราว์เซอร์ได้อะไรจริง — ตัดเอาเฉพาะช่วงนั้นของ <head>:

$ curl -s localhost:3000/posts | sed -n '/rel="stylesheet"/,/type="module"/p'
    <link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />
    <script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "/assets/application-bfcdf840.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-9fd88cd5.js",
    …
  }
}</script>
<link rel="modulepreload" href="/assets/application-bfcdf840.js">
…
<script type="module">import "application"</script>

sed -n '/A/,/B/p' แปลว่า "พิมพ์ตั้งแต่บรรทัดที่มี A ถึงบรรทัดที่มี B" — แค่ตัดให้สั้น ไม่ต้องจำ · สังเกตบรรทัดแรก: ไฟล์ของเราชื่อ application.css แต่ในหน้าเว็บกลายเป็น application-8b441ae0.css · เลขต่อท้ายนี้คือพระเอกของบท · แต่ก่อนจะรู้ว่ามันมาทำไม ต้องรู้จัก cache ก่อน

ส่วน <script type="importmap"> · modulepreload · <script type="module"> คือส่วนของ JavaScript · ตอนนี้ข้ามไปก่อน เดี๋ยวแกะทีละบรรทัดในหัวข้อ importmap · … คือบรรทัดที่เราตัดออกให้สั้น

cache ของเบราว์เซอร์ — ลูกค้าประจำที่จำเมนูเล่มเก่า

เบราว์เซอร์ฉลาดพอจะไม่โหลดไฟล์เดิมซ้ำ ๆ · ไฟล์ไหนเคยโหลดแล้ว มันจะเก็บสำเนาไว้ในเครื่อง ครั้งหน้าใช้สำเนาเลย ไม่ต้องรอเน็ต · ที่เก็บสำเนานี้เรียกว่า cache (อ่านว่า "แคช")
เก็บไว้นานแค่ไหน — server เป็นคนบอก ผ่าน header (หัวจดหมาย) ที่แนบมากับไฟล์

ไอเดียเดียวกับ includes ใน Day 2 (บท 114): ของที่หยิบมาแล้ว อย่าเดินไปขอซ้ำ · ต่างกันแค่ includes ลดการเดินไปตู้เก็บแฟ้ม ส่วน cache ลดการเดินไปขอไฟล์จาก server

เราเปิดหน้าเว็บด้วย Chrome จริง แล้ววัดว่าไฟล์ CSS แต่ละไฟล์ต้องโหลดผ่านเน็ตกี่ byte (0 = ไม่ได้โหลดเลย หยิบจากสำเนา):

หน้าที่สองไม่โหลด CSS ผ่านเน็ตเลยสักไบต์ · นี่คือสิ่งที่ทำให้เว็บเปิดหน้าถัดไปเร็ว (ตัวเลขรวม header ด้วย จึงมากกว่าขนาดไฟล์นิดหน่อย · ของคุณดูได้ในแท็บ Network ของ DevTools แบบบท 56 คอลัมน์ Size — ไฟล์ที่หยิบจากสำเนาจะขึ้นเป็นคำว่า memory cache หรือ disk cache แทนตัวเลข · ถ้าติ๊ก Disable cache ไว้ จะโหลดใหม่ทุกครั้ง)
แต่ข้อดีนี้มีด้านมืด: ถ้าเราแก้ไฟล์ CSS แล้วชื่อไฟล์ยังเหมือนเดิม เบราว์เซอร์จะคิดว่า "อันนี้มีแล้ว" แล้วใช้สำเนาเก่าต่อไป

สามปัญหาที่ asset pipeline มีไว้แก้

asset pipeline คือชื่อรวมของ "ขั้นตอนที่พาไฟล์ asset จากโฟลเดอร์ของเราไปถึงเบราว์เซอร์" · สไลด์หน้า 24 บอกว่ามันเกิดมาเพื่อแก้สามปัญหาที่ทุกเว็บเจอ ไม่ว่าเขียนด้วยภาษาอะไร:

ทำไมข้อ 2–3 สำคัญน้อยลง (แค่รู้ไว้ ไม่ต้องลงลึก):

• HTTP/2 — "ภาษาที่เบราว์เซอร์คุยกับ server" รุ่นใหม่ ส่งหลายไฟล์พร้อมกันบนสายเดียวได้ ไฟล์เยอะจึงไม่ต้องต่อคิวเหมือนเมื่อก่อน
• gzip · brotli — วิธีบีบอัดข้อมูลที่ server (หรือตัวกลางหน้า server) ทำให้อัตโนมัติตอนส่ง ไม่ต้องบีบไว้ล่วงหน้าเอง
• ES module — การเขียน import … from ที่เบราว์เซอร์ทุกตัวเข้าใจเองแล้ว ไม่ต้องมีเครื่องมือมัดรวมให้ก่อน (หัวข้อ importmap)

แต่ข้อ 1 ไม่มีเทคโนโลยีไหนมาช่วย เพราะมันเป็นเรื่องของชื่อ · สไลด์สรุปว่านี่คือเหตุผลที่ Rails 8 ยอมทิ้งเครื่องมือมัดรวมไฟล์ แต่ยังเก็บ fingerprinting ไว้

fingerprinting — เปลี่ยนเนื้อใน ชื่อเปลี่ยนตาม

ทางแก้ข้อ 1 ง่ายจนน่าตกใจ: ถ้าเนื้อไฟล์เปลี่ยน ก็เปลี่ยนชื่อไฟล์ด้วย · ชื่อใหม่ที่เบราว์เซอร์ไม่เคยเห็น = ต้องโหลดใหม่แน่นอน
เลขท้ายชื่อคำนวณจากเนื้อไฟล์ทุกตัวอักษร เรียกว่า hash — คิดว่าเป็น "ลายนิ้วมือของเนื้อไฟล์" ก็ได้: เนื้อเดิมได้เลขเดิมทุกครั้ง · แก้แม้ตัวเดียวได้เลขใหม่ทันที

/* เปิด /posts แล้ว /posts/30 ไปแล้ว (สำเนาของ CSS ทั้งสองไฟล์อยู่ในเครื่อง) */
/* จากนั้นเพิ่มบรรทัดนี้ใน app/assets/stylesheets/application.css แล้วเปิด /posts อีกครั้ง */
body { background: #fffbeb; }

ทีนี้ดูด้วยตาตัวเองผ่าน curl · เปิด app/assets/stylesheets/application.css ไปล่างสุด (ต่อจากบรรทัด */) เว้นบรรทัดว่างหนึ่งบรรทัด แล้วเพิ่มบรรทัดนี้ (ทำให้พื้นหลังเป็นสีครีม):

 */

body { background: #fffbeb; }

ทำไมต้องเว้นบรรทัดให้ตรง? เพราะเลขคำนวณจากทุกตัวอักษร รวมบรรทัดว่าง · เราลองไม่เว้นบรรทัด ได้ application-6b521159.css แทน · ถ้าเลขของคุณไม่ตรงกับในบท ไม่ผิด — ที่ต้องเห็นคือเลขเปลี่ยน

บันทึกไฟล์ แล้วขอหน้าเว็บใหม่ — ไม่ต้อง restart server ไม่ต้องสั่ง build อะไร:

$ curl -s localhost:3000/posts | grep stylesheet
    <link rel="stylesheet" href="/assets/application-ab636f88.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />

• application-8b441ae0 กลายเป็น application-ab636f88 — เพราะเนื้อเปลี่ยน
• tailwind-798e8e3d เหมือนเดิม — เราไม่ได้แตะไฟล์นั้น เลขจึงไม่เปลี่ยน
• ไม่ต้อง build เพราะในเครื่องเรา (development) Rails คำนวณลายนิ้วมือใหม่ทุกครั้งที่มีคนขอหน้า

แล้วชื่อเก่ายังขอได้ไหม? และชื่อใหม่ server แนบหัวจดหมายอะไรมา?

$ curl -sI localhost:3000/assets/application-8b441ae0.css
HTTP/1.1 404 Not Found
…

$ curl -sI localhost:3000/assets/application-ab636f88.css
HTTP/1.1 200 OK
content-type: text/css; charset=utf-8
vary: Accept-Encoding
etag: "ab636f88"
cache-control: public, max-age=31536000, immutable
set-cookie: __profilin=p%3Dt; path=/; httponly; samesite=lax
content-length: 522

• 404 Not Found — ในเครื่องเรา Rails เสิร์ฟเฉพาะไฟล์ "ฉบับปัจจุบัน" ชื่อเก่าจึงหาไม่เจอแล้ว
• cache-control: public, max-age=31536000, immutable — "เก็บไว้ได้หนึ่งปี และไฟล์ชื่อนี้ไม่มีวันเปลี่ยนเนื้อ (immutable) ไม่ต้องมาถามซ้ำ" · กล้าสั่งแบบนี้ได้เพราะถ้าเนื้อเปลี่ยน ชื่อก็เปลี่ยนไปแล้ว
• content-type: text/css = "นี่คือไฟล์ CSS" · content-length: 522 = ขนาด 522 byte
• บรรทัดที่เหลือ (vary · etag · set-cookie) ไม่เกี่ยวกับบทนี้ ข้ามได้

ก่อนไปต่อ ลบบรรทัด body { … } ที่เพิ่งเพิ่มออก (หรือ git restore app/assets/stylesheets/application.css) · เนื้อไฟล์กลับเป็นเหมือนตอนแรกทุกตัวอักษร แล้วเลขจะเป็นอะไร? เก็บไว้ทายในภารกิจท้ายบท

สไลด์หน้า 25 ให้จำประโยคนี้ไว้: "ไม่ต้องไปลบของเก่า — ให้ key เปลี่ยน แล้วของเก่าจะหมดความหมายไปเอง" · key ในที่นี้คือชื่อไฟล์ · หลักการเดียวกันนี้จะกลับมาอีกครั้งตอนเรียนเรื่อง cache ของหน้าเว็บใน Day 3 ครึ่งหลัง (ยังไม่มาในชุดนี้)

Propshaft — พนักงานที่ติดเลขรุ่นแล้ววางบนชั้น

คนที่คำนวณลายนิ้วมือ · เสิร์ฟไฟล์ที่ /assets/… · และบอก stylesheet_link_tag ว่าตอนนี้ไฟล์ชื่ออะไร คือ gem ชื่อ Propshaft · เป็นค่าเริ่มต้นของ Rails 8 และทำแค่นั้นจริง ๆ — ไม่มัดรวมไฟล์ ไม่แปลงภาษา ไม่บีบไฟล์
รุ่นก่อนหน้าคือ Sprockets ที่ทำทุกอย่างเอง (สไลด์หน้า 26):

เหตุผลเบื้องหลัง (สไลด์): Sprockets เกิดตอนที่เบราว์เซอร์ทำอะไรเองไม่ค่อยได้ เครื่องมือจึงต้องทำแทนหมด · ทุกวันนี้เบราว์เซอร์ทำเองได้เกือบหมดแล้ว (หัวข้อสามปัญหา) เครื่องมือที่ทำเยอะเลยกลายเป็นภาระแทน

เทียบกับ Next.js (บท 70): งานมัดรวม · บีบ · แปลง TypeScript ทั้งหมดซ่อนอยู่ใน npm run build ที่เครื่องมือของ Next.js ทำให้ · Rails 8 แยกงานออกเป็นชิ้นเล็ก ๆ แล้วให้ Propshaft ถือแค่ชิ้นที่เล็กที่สุด

ในเครื่องเรา vs ตอนขึ้นเครื่องจริง

ในเครื่องเรา (development) Propshaft คำนวณสด ๆ ทุกครั้งที่มีคนขอ — ที่เห็นไปเมื่อกี้ · แต่บนเครื่องจริง (production) ไม่มีใครอยากให้คำนวณซ้ำทุกคำขอ · จึงมีคำสั่งทำทีเดียวตอน deploy: bin/rails assets:precompile = "ทำไฟล์ asset ทุกไฟล์ให้มีชื่อพร้อม digest แล้ววางไว้ใน public/assets/"

ลองรันตามในเครื่องได้ · แต่รันแล้วต้องเก็บกวาดตามกล่อง ⚠️ ข้างล่างทันที ไม่งั้นแก้ CSS ต่อจากนี้จะไม่เห็นผล

$ bin/rails assets:precompile
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 81ms
Warning: You are precompiling assets in development. Rails will not serve any changed assets until you delete public/assets/.manifest.json

• บรรทัดก่อน Warning — tailwindcss-rails แอบสั่ง build Tailwind ให้ก่อน เพื่อให้ได้ tailwind.css ฉบับล่าสุด (เวลา ms ของคุณจะต่าง)
• Warning: … — "คุณกำลัง precompile ในเครื่อง development · Rails จะไม่เสิร์ฟไฟล์ที่แก้ใหม่จนกว่าคุณจะลบ public/assets/.manifest.json" · จำไว้ เดี๋ยวเจอกับดัก

$ ls public/assets
action_cable-5212cfee.js
…
application-8b441ae0.css
application-bfcdf840.js
controllers
…
tailwind-798e8e3d.css
trix-4bf79781.js
trix-65afdb1d.css
turbo-736fb387.js
turbo.min-5eb167c2.js.map
turbo.min-9fd88cd5.js

ได้ไฟล์ของเราพร้อมชื่อชุดเดียวกับที่เห็นในหน้าเว็บ · มีไฟล์ของ gem อื่นติดมาด้วย (trix action_cable ฯลฯ) เพราะ Propshaft คัดลอกทุกไฟล์ในโฟลเดอร์ที่มันดูแล ไม่ได้ดูว่าใช้จริงไหม · และมีไฟล์ซ่อนหนึ่งไฟล์ (ชื่อขึ้นต้นด้วยจุด) คือ ตารางแมปชื่อ:

$ head -c 260 public/assets/.manifest.json
{"tailwind.css":{"digested_path":"tailwind-798e8e3d.css","integrity":null},"application.css":{"digested_path":"application-8b441ae0.css","integrity":null},"application.js":{"digested_path":"application-bfcdf840.js","integrity":null},"controllers/hello_controll

(head -c 260 = เอาแค่ 260 ตัวอักษรแรก ไฟล์จริงยาวกว่านี้ จึงขาดกลางคำ · "integrity":null ไม่ต้องสนใจ)

อ่านว่า "application.css → ตอนนี้ชื่อ application-8b441ae0.css" · บนเครื่องจริง stylesheet_link_tag เปิดตารางนี้ดูว่าจะเขียนชื่ออะไรลงใน HTML · และ config/environments/production.rb ของแอปนี้ตั้งหัวจดหมายของไฟล์ใน public/ ไว้ว่า:

config.public_file_server.headers = { "cache-control" => "public, max-age=#{1.year.to_i}" }

1.year.to_i = จำนวนวินาทีในหนึ่งปี · คือ "เก็บสำเนาได้หนึ่งปี" แบบเดียวกับที่เห็นในเครื่องเรา

$ bin/rails assets:clobber
$ ls public/assets app/assets/builds
ls: public/assets: No such file or directory
app/assets/builds:
tailwind
$ bin/rails tailwindcss:build
≈ tailwindcss v4.3.3

/*! 🌼 daisyUI 5.7.50 */
Done in 90ms
$ ls app/assets/builds
tailwind
tailwind.css

importmap — JavaScript โดยไม่มี node_modules

ตอนทำ Next.js (บท 70) สิ่งแรกที่ทำคือ npm install แล้วได้โฟลเดอร์ node_modules ก้อนโต · ก่อนขึ้นเครื่องจริงต้อง npm run build ให้เครื่องมือมัด JavaScript ทั้งหมดเป็นก้อน · ในโปรเจกต์ Rails ของเรา:

$ ls node_modules package.json
ls: node_modules: No such file or directory
ls: package.json: No such file or directory

ไม่มีทั้งคู่ · แต่ไฟล์ app/javascript/application.js ของเราเขียนแบบนี้:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "@hotwired/turbo-rails"
import "controllers"

import "…" แบบไม่มี from = "โหลดไฟล์นั้นมารันเลย" ไม่ได้หยิบตัวแปรอะไรออกมาใช้ · "@hotwired/turbo-rails" ไม่ใช่ที่อยู่ไฟล์ — มันเป็นแค่ชื่อเล่น · เบราว์เซอร์เปล่า ๆ ไม่รู้ว่าชื่อนี้คือไฟล์ไหน · ใน Next.js เครื่องมือ build ไปหาใน node_modules ให้ · ใน Rails 8 ใช้วิธีที่เบราว์เซอร์เข้าใจเอง ชื่อ import map = "สมุดรายชื่อที่บอกเบราว์เซอร์ว่า ชื่อเล่นนี้ → ไฟล์ที่อยู่ตรงไหน"

สมุดนี้เราเขียนที่ config/importmap.rb (ไฟล์จริงของแอป):

# Pin npm packages by running ./bin/importmap

pin "application"
pin "@hotwired/turbo-rails", to: "turbo.min.js"
pin "@hotwired/stimulus", to: "stimulus.min.js"
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
pin_all_from "app/javascript/controllers", under: "controllers"

• pin "application" — จดชื่อ application → ไฟล์ application.js (ไม่มี to: = ชื่อไฟล์เหมือนชื่อเล่น)
• pin "@hotwired/turbo-rails", to: "turbo.min.js" — ชื่อเล่น @hotwired/turbo-rails → ไฟล์ turbo.min.js (.min = ฉบับที่บีบช่องว่างออกแล้ว)
• สองบรรทัด @hotwired/stimulus… — แบบเดียวกัน แต่เป็นของ Stimulus (ตัวช่วยเขียน JS เล็ก ๆ ผูกกับ HTML — บท 134)
• pin_all_from "app/javascript/controllers", under: "controllers" — จดทุกไฟล์ในโฟลเดอร์นั้นทีเดียว โดยขึ้นต้นชื่อเล่นด้วย controllers/ (ใช้ในบท 134)

ดูสมุดฉบับที่ Rails แปลงแล้ว (มีชื่อพร้อม digest) ด้วยคำสั่งอ่านอย่างเดียว:

$ bin/importmap json
{
  "imports": {
    "application": "/assets/application-bfcdf840.js",
    "@hotwired/turbo-rails": "/assets/turbo.min-9fd88cd5.js",
    "@hotwired/stimulus": "/assets/stimulus.min-4b1e420e.js",
    "@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
    "controllers/application": "/assets/controllers/application-3affb389.js",
    "controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
    "controllers": "/assets/controllers/index-ee64e1f1.js"
  }
}

นี่คือก้อนเดียวกับที่อยู่ใน <script type="importmap"> ของหน้าเว็บ (หัวข้อแรก) · ไฟล์ JS ก็ได้ fingerprint เหมือน CSS เพราะ Propshaft คนเดิมเป็นคนเสิร์ฟ · ทีนี้ไล่ตามลำดับที่เบราว์เซอร์ทำ:

แล้ว turbo.min.js อยู่ไหน ในเมื่อโปรเจกต์ไม่มี node_modules? ถาม Propshaft ว่ามันหาเจอที่ไหน:

$ bin/rails runner 'puts Rails.application.assets.load_path.find("turbo.min.js").path'
…/gems/turbo-rails-2.0.23/app/assets/javascripts/turbo.min.js

อยู่ใน gem turbo-rails ที่ลงมากับ Gemfile — library JS ที่ Rails ใช้ประจำมากับ gem เลย ไม่ต้องผ่าน npm · (bin/rails runner '…' = รันโค้ด Ruby หนึ่งบรรทัดในแอปโดยไม่ต้องเปิด console · load_path = รายชื่อโฟลเดอร์ที่ Propshaft ไล่หาไฟล์ ซึ่งรวมโฟลเดอร์ใน gem ด้วย · ส่วนหน้า path ของคุณจะต่างตามเครื่อง)

อยากเพิ่ม library ใหม่ทำยังไง

สไลด์หน้า 27 ยกตัวอย่าง bin/importmap pin sortablejs (library ลากวางรายการ) · คำสั่งนี้ไปถามบริการ CDN ชื่อ jspm.io แล้วดาวน์โหลดไฟล์ JS มาเก็บใน vendor/javascript/ (โฟลเดอร์เก็บโค้ดของคนอื่นที่เอามาใช้) พร้อมเพิ่มบรรทัด pin ลงใน config/importmap.rb · บทนี้ไม่ได้รันคำสั่งนี้ (ไม่ได้ใช้ library นั้น และไม่อยากโหลดของจากเน็ตเข้าโปรเจกต์โดยไม่จำเป็น) — ถ้าวันหนึ่งต้องใช้ ให้เปิดดูไฟล์ที่ได้มาก่อน commit

ทางเลือกทั้งหมด — เลือกจากสองคำถาม

สไลด์หน้า 28 รวมเครื่องมือที่ Rails มีให้เลือก · ไม่ต้องจำชื่อ gem และไม่ต้องรู้จักชื่อเครื่องมือในวงเล็บ — จำเกณฑ์เลือก:

✅ = แอปของเราใช้ตัวนี้ (ดูได้จาก Gemfile) · ไม่มี Node ในโปรเจกต์เลยสักตัว · เวลาต้องเลือก ถามตัวเองสองข้อ:

1. JS เยอะแค่ไหน? — แค่ปุ่มเปิด/ปิด ตัวนับอักษร (Stimulus · บท 134) → importmap พอ · ทั้งหน้าเป็นแอปแบบ React → ต้อง bundler
2. ยอมมีขั้น build ไหม? — มี build = ได้ TypeScript · tree-shaking แต่ต้องดูแล Node และรอ build ทุกครั้ง

$ curl -s localhost:3000/posts | grep stylesheet
    <link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />

$ curl -s localhost:3000/posts | grep stylesheet      # #fef3c7
    <link rel="stylesheet" href="/assets/application-6c48751d.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />

$ curl -s localhost:3000/posts | grep stylesheet      # #dcfce7
    <link rel="stylesheet" href="/assets/application-3cafeaa9.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />

$ curl -s localhost:3000/posts | grep stylesheet      # หลัง git restore
    <link rel="stylesheet" href="/assets/application-8b441ae0.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/tailwind-798e8e3d.css" data-turbo-track="reload" />

$ git restore app/assets/stylesheets/application.css
$ bin/rails assets:clobber
$ bin/rails tailwindcss:build

แบบฝึกหัด

ติดตรงไหน ลองถามผู้สอนหรือ AI ด้วยประโยคในกล่องศัพท์ได้เลย · หรือแปะผล curl -sI ของไฟล์ที่สงสัยแล้วถามว่า "ทำไมไฟล์นี้ cache แบบนี้"

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Asset Pipeline § Fingerprinting: Versioning with Digest-Based URLs — อ่านถึงหัวข้อ Manifest Files แล้วหยุด · ยืนยันเรื่องชื่อ + digest และตาราง .manifest.json ที่เราเปิดดู
• Rails Guides — Asset Pipeline § Sprockets vs. Propshaft — อ่านแค่ Load Order กับ Precompilation · ที่มาของตาราง Sprockets/Propshaft ในบทนี้
• Rails Guides — Working with JavaScript in Rails § Import Maps — อ่านหัวข้อ Import Maps และ Choosing Between Import Maps and a JavaScript Bundler · เกณฑ์เลือกเดียวกับสองคำถามท้ายบท
• github.com/rails/propshaft — อ่าน README ส่วนแรกกับหัวข้อ Usage · บอกตรง ๆ ว่า Propshaft ไม่ทำอะไรและทำแค่สี่อย่าง (รวม digest และ manifest) · Usage ยืนยันว่า precompile คัดลอกทุกไฟล์ใน load path ไป public/assets (ที่มาของ trix ที่เราไม่ได้ใช้)
• github.com/rails/importmap-rails — อ่าน README ส่วน Usage กับ Using npm packages via JavaScript CDNs · อธิบายว่า bin/importmap pin โหลดไฟล์มาไว้ vendor/javascript
• MDN — HTTP caching § Cache Busting — อ่านหัวข้อ Cache Busting และย้อนไปอ่าน What's lost by no-store · เรื่องเดียวกับ fingerprinting เล่าจากฝั่งเบราว์เซอร์ และตรงกับ quiz ข้อ 1
• MDN — <script type="importmap"> — ดูตัวอย่างแรกของหน้าพอ · ยืนยันว่า import map เป็นของมาตรฐานเบราว์เซอร์ ไม่ใช่ของ Rails