Một dòng chỉ thị, và 223 kilobyte
Một trang marketing không state, không effect, không handler nào lại tự gửi mình sang trình duyệt dưới dạng JavaScript. Cách sửa là xoá một dòng.
Con số đến trước
PageSpeed chấm hiệu suất mobile 71 điểm. Đó là điểm số chứ không phải chẩn đoán, nên chúng tôi chạy production build và đọc bảng route. Trang chủ đang gửi 315 kB First Load JS. Phần còn lại của site chỉ quanh 90.
Trong đó có gì
File trang mở đầu bằng "use client". Một dòng đó biến cả cây React thành client component, và mọi thứ nó import đi theo: sáu trăm dòng layout, toàn bộ chữ trên trang, toàn bộ hình minh hoạ.
Chúng tôi kiểm xem nó thật sự cần trình duyệt để làm gì. Không useState. Không useEffect. Không một event handler nào. Nó là client component chỉ để gọi được hai hook đa ngôn ngữ, mà hai hook đó có bản chạy phía server với tên khác.
Đổi
Mười bốn component chuyển từ hook client sang hook server và thành async. Dòng chỉ thị bị xoá. Phần chữ gõ ở hero và các hàng FAQ vốn đã là client component riêng, giữ nguyên.
315 kB -> 91.8 kB
Chỗ đáng nhớ
Không ai viết "use client" một cách cẩu thả. Nó được thêm từ sớm, lúc trang thật sự cần một hook, rồi ở lại sau khi lý do đó đã bị refactor đi mất. Thỉnh thoảng nên mở bảng route ra đọc và hỏi xem trang nào đang nặng hơn vẻ ngoài của nó.
ToolGo Team
Sản phẩm & Kỹ thuật
Chúng tôi xây dựng các công cụ SaaS thực tế và chia sẻ những gì chúng tôi học được — từ quyết định sản phẩm đến kỹ thuật chuyên sâu.
