🚀Lỗi file tài nguyên không update bản mới📌
📦 Các file tài nguyên như .css, .js, .json khi thay đổi trên host
➡️ máy user chưa update ngay lập tức
❗ Nguyên nhân: browser vẫn dùng cache cũ
🛠️ Khắc phục:
🔧 Cách 01: Tắt cache bằng DevTools
👉 Mở Developer Tool (Ctrl + Shift + I)
👉 Tab Network
👉 Tick ✅ Disable cache
📌 p/s:
❌ Phải làm thủ công từng máy
💀 Không khả thi nếu có hàng ngàn / triệu user
🔁 Cách 02: Versioning file (khuyên dùng)
👉 Sửa link file để “đánh lừa” browser là file mới
💡 Ví dụ:
drM.css → drM.css?ver=1.0
📈 Khi update:
drM.css?ver=1.1 → 2.0 → 3.0...
📌 p/s:
✅ Chỉ cần sửa link 1 lần trên server
🔥 Cách này chuẩn production
⏱️ Cách 03: Gắn timestamp (Date.now)
👉 Tương tự cách 02 nhưng dùng thời gian:
drM.css?time=1710000000
📌 p/s:
⚠️ Nhược điểm:
🔄 Mỗi lần user refresh → browser luôn nghĩ là file mới (do chuỗi Date.now phía sau luôn thay đổi)
🐢 → Load lại toàn bộ → app chậm
🎯 Kết luận nhanh:
| 🔢 | ⚙️ Phương pháp | 💡 Đánh giá |
|---|---|---|
| 1️⃣ | Disable cache | ❌ Dev only |
| 2️⃣ | Version file | ✅ Best practice |
| 3️⃣ | Timestamp | ⚠️ Dễ gây chậm |
💡 Pro tip nâng cao (chuẩn dev xịn):
👉 Dùng hash file tự động (Webpack / Vite)
app.abc123.css
🔥 Khi file đổi → hash đổi → auto update cache
✨🤖 Made by AI • Clean Code & Smart Cache 🚀
Hiểu đơn giản: hash file = đổi tên file mỗi lần nội dung thay đổi 🔥
→ Browser thấy tên mới ⇒ tự động tải bản mới (không dính cache)
🧠 Nguyên lý hoạt động
👉 Thay vì:
app.css
👉 Build tool sẽ tạo:
app.abc123.css
📌 abc123 = hash (mã băm) từ nội dung file
🔄 Khi bạn sửa code:
app.css (nội dung mới)
➡️ build lại → thành:
app.xyz789.css
💥 Tên file đổi → browser không thể dùng cache cũ nữa
⚙️ Ví dụ với Vite
1️⃣ Cấu hình (thực ra gần như không cần 😄)
Vite mặc định đã bật hash khi build:
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
entryFileNames: "assets/[name].[hash].js",
chunkFileNames: "assets/[name].[hash].js",
assetFileNames: "assets/[name].[hash].[ext]"
}
}
}
}
2️⃣ Build project
npm run build
📦 Output:
dist/
├── index.html
├── assets/
│ ├── app.a1b2c3.js
│ ├── style.d4e5f6.css
3️⃣ HTML tự update link luôn
Vite sẽ tự sửa:
<link rel="stylesheet" href="/assets/style.d4e5f6.css">
<script src="/assets/app.a1b2c3.js"></script>
👉 Bạn không cần chỉnh tay như ?ver=1.0
⚙️ Ví dụ với Webpack
output: {
filename: '[name].[contenthash].js',
}
👉 contenthash = hash theo nội dung file
🚀 So sánh nhanh
| 🔢 | Cách | 🧠 Cơ chế | ⚡ Hiệu quả |
|---|---|---|---|
| 1️⃣ | ?ver=1.0 | Fake query | ✅ OK |
| 2️⃣ | ?time=now | Luôn đổi | ❌ chậm |
| 3️⃣ | Hash file | Đổi tên file thật | 🔥 BEST |
💡 Ưu điểm cực mạnh
✅ Không cần nhớ tăng version
✅ Không load lại file nếu không đổi
✅ Tối ưu performance (cache đúng chuẩn)
✅ Scale tốt cho hàng triệu user
🎯 Khi nào nên dùng?
👉 Làm SPA / dashboard / web app
👉 Dùng build tool (Vite, Webpack, Parcel...)
👉 Production thực tế (không ai dùng ?ver lâu dài)
🧠 Insight quan trọng (level senior)
👉 Browser cache theo URL tuyệt đối
/app.css → cache A
/app.abc123.css → cache B (file mới)
➡️ Đổi tên = đổi cache key 💥
Mình có thể:
👉 Setup full pipeline Vite + PHP (CI3)
👉 Auto build + deploy + cache control luôn 🚀
✨⚙️ Made by AI • Hashing Like a Pro 🚀
Nhận xét
Đăng nhận xét