Fullstack Developer.

Storefront gộp dữ liệu từ Shopify, Contentful và các nguồn khác. Nhiều component tự gọi lấy cùng một dữ liệu, còn các API lấy danh sách trả về dữ liệu quá lớn cho một request.

Tôi cho các component dùng chung một cache SWR cho mỗi loại dữ liệu thay vì gọi riêng, và chia các request danh sách lớn thành nhiều phần (chunking bằng lodash) để mỗi lần gọi đều nhỏ.

Số lần gọi GraphQL giảm 3 lần, response ở các trang danh sách cũng nhỏ hơn.

Storefront là bản Shopify Plus headless chạy Next.js 12 và GraphQL. Các trang chính có LCP kém: carousel dùng react-swiper chỉ chạy được ở client nên làm hỏng server-side rendering, nội dung chính chỉ hiện ra sau khi JavaScript tải xong.

Đầu tiên tôi cho carousel render lại được từ server để màn hình đầu không phải chờ code client. Chỉ vậy là chưa đủ, nên tôi rà tiếp phần còn lại của trang: cách Next.js 12 render và tải từng phần, cách ảnh được phục vụ từ Cloudinary, cho tới khi phần tử lớn nhất hiện ra sớm.

LCP giảm 76% và Core Web Vitals của cửa hàng về mức tốt.

Một codebase lớn vẫn dùng TailwindCSS v1. Mỗi lần build lại style mất khoảng một giây, làm chậm mọi thay đổi khi phát triển.

Tôi nâng dự án từ TailwindCSS v1 lên v3 với engine sinh class theo nhu cầu, cập nhật cấu hình và các class thay đổi giữa hai phiên bản.

Build nhanh hơn khoảng 3 lần: thời gian build lại giảm từ khoảng 1 giây xuống khoảng 300 ms.