Buộc trình duyệt làm mới tệp CSS/JS lưu trong bộ nhớ Cache - how to?

Cache trình duyệt là nơi lưu trữ tạm thời các files của website như HTML, CSS, JS,  hình ảnh,... vào bộ nhớ máy tính của bạn. 

Mặc dù bạn không nhìn thấy, nhưng khi truy cập vào một website lần đầu tiên, trình duyệt cần tải tất cả những files đó để có thể hiển thị được trang web. 

Để quá trình này không phải lặp đi lặp lại, Cache lưu những file đó lại. Vì vậy, cache giúp người dùng duyệt website nhanh hơn và đem lại trải nghiệm mượt mà hơn. 

Cache - bộ nhớ đệm của website

Bên cạnh lợi ích đó, cache trình duyệt cũng đem lại cho chúng ta những rắc rối trong quá trình phát triển website. 

Ví dụ, khi chúng ta thay đổi một chi tiết trên website của mình nhưng lại thấy không được hiển thị. Nguyên nhân là trình duyệt đã cache lại các file của website sau lần truy cập đầu tiên. Từ lần tiếp theo, trình duyệt không tải lại các file đó nữa mà sẽ lấy các file đã tải trước đó để hiển thị. Vậy nên bạn không nhìn thấy những thay đổi mới. 

Ngoài ra, sau một thời gian sử dụng, trình duyệt lưu quá nhiều files vào cache khiến nó hoạt động chậm hơn và tốn tài nguyên máy tính của bạn hơn. 

Thông thường để giải quyết vấn đề này chúng ta sẽ phải tìm đến các phương pháp xóa cache thủ công gây mất thời gian và bất tiện. 

Vậy làm thế nào để có thể xóa cache tự động? Bài viết này, mình sẽ hướng dẫn các bạn cách sử dụng Laravel mix để tự động buộc trình duyệt làm mới tệp CSS/JS lưu trong bộ nhớ cache.

Laravel mix là gì ?

Laravel Mix cung cấp một API sạch, linh hoạt để định nghĩa các bước xây dựng webpack cơ bản cho ứng dụng Laravel của bạn. Nó quản lý tất cả tài nguyên (assets) như img, css, js trong dự án của bạn, đồng thời nó dựa trên base là webpack build tất cả các file css, js pre-processors như SCSS, SASS thành css, chuyển ES6 thành ES5 (trình duyệt không hiểu cú pháp ES6).

Lợi ích khi sử dụng Laravel mix trong website

• Tối ưu code, tối ưu trang web giúp giảm kích thước lưu trữ, tối ưu băng thông.

• Giúp website tải nhanh hơn, mang tới trải nghiệm tốt hơn cho người dùng

• Giúp Google đánh giá cao hơn và tăng thứ hạng SEO của website

• Tự động buộc trình duyệt làm mới tệp CSS/JS lưu trong bộ nhớ cache giúp hiển thị ngay lập tức những gì thay đổi trên website.

Có thể bạn quan tâm: Nâng cao hiệu năng của hệ thống với kỹ thuật caching

Cách sử dụng Laravel mix cho website

Bước 1: Cài đặt nodejs 

Bạn có thể vào trang chủ và tải về cài theo như hệ điều hành bạn đang dùng. Nodejs. 

Bước 2: Cài đặt npm hoặc yarn (yarn quản lý package nhanh hơn npm).

• Nếu bạn dùng npm thì chạy lệnh npm install. 

• Nếu bạn dùng yarn thì chạy lệnh yarn install

• Để cập nhật phiên bản của npm hoặc yarn chạy lệnh npm update hoặc yarn update.

Bước 3: Sau khi cài xong bạn chạy câu lệnh sau để chắc chắn là bạn đã cài đặt thành công

Dùng câu lệnh node -v để kiểm tra cài đặt nodejs

Dùng câu lệnh npm -v để kiểm tra cài đặt npm

Dùng lệnh yarn -v để kiểm tra cài đặt yarn (nếu dùng yarn)

Để cập nhật phiên bản npm hoặc yarn bạn có thể dùng  npm update hoặc  yarn update.

Bước 4: Config dự án sử dụng laravel mix

Trong thư mục root của dự án bạn sẽ thấy file webpack.mix.js là file thiết lập các entry point – là các điểm bắt đầu để Mix quét và thực hiện các kịch bản. Từ đây, Laravel Mix xác định được chính xác cách biên dịch các tài nguyên. Laravel Mix hỗ trợ rất nhiều các ngôn ngữ tiền xử lý CSS như Less, Sass, Stylus, …

• Để compile các css preprocessor ra các file css mà trình duyệt có thể hiểu được. Cú pháp thực hiện như sau:

• Cách sử dụng less(), sass(), stylus() để compile css preprocessor ra các file css mà trình duyệt có thể hiểu được.

Compile css preprocessor thành file css trình duyệt có thể hiểu được

• Cách sử dụng styles() và scripts()  để compile file css thông thường thành một file

Compile file css thông thường thành một file

• Cách dùng copyDirectory() để copy thư mục và copy()  để copy file

Copy thư mục hoặc copy file

• Đánh dấu phiên bản đầu ra:
  Tính năng này mình thấy rất hay và hữu dụng. Thông thường các trình duyệt sẽ cache các file css, js trong một khoảng thời gian nào đó. Dẫn tới các thay đổi mới nhất trên website của chúng ta sẽ không được hiển thị ngay lập tức. Để khắc phục điều này ta sẽ dùng phương thức version(). để buộc trình duyệt xóa cache và tải lại các file với phiên bản mới nhất.

Đánh dấu phiên bản đầu ra

• Cách chèn file đầu ra sau khi compile vào website bằng cách sử dụng phương thức mix()

Chèn file đầu ra vào mã HTML

• Các câu lệnh dùng để thực thi compile file như sau:

• npm run dev Câu lệnh này sẽ thực thi mix các file một lần.

• npm run watch Câu lệnh này sẽ thực thi mix các file hiện tại và theo dõi các file cần mix (là những file trong thư mục webpack.mix.js) khi có sự thay đổi thì nó sẽ mix cho chúng ta luôn. Cái này chúng ta rất hay sử dụng trong dự án nhé.

• npm run hot Câu lệnh này sẽ thực thi tất cả các tác vụ mix nhưng vẫn active và theo dõi sự thay đổi các tài nguyên. Nếu có sự thay đổi, nó sẽ thực hiện cập nhật các module có sự thay đổi đó và sau đó báo cáo với ứng dụng về sự thay đổi và cập nhật mã trong trình duyệt mà không có tải lại tài nguyên.

• npm run prod Thực thi tất cả các tác vụ Mix và tối ưu (minify) các file kết quả đầu ra, khi đó bạn có thể sử dụng các kết quả để triển khai ứng dụng trên máy chủ.

Kết luận

 

Trên đây mình đã hướng dẫn bạn cách để tự động buộc trình duyệt làm mới tệp CSS/JS lưu trong bộ nhớ Cache mà không cần phải xóa cache thủ công. Ngoài ra công ty Rabiloo còn cung cấp giải pháp phát triển website với nhiều năm kinh nghiệm hàng đầu. Hãy liên hệ ngay với chúng tôi ngay hôm nay để được tư vấn.