proto.lib

Bundle Budget + Tree Shaking

CI enforce ngân sách kích thước theo từng entry point; bundler phân tích graph import để loại export không dùng (tree shaking), và một import bất cẩn (cả thư viện icon/date, hoặc module có side effect mà bundler không chứng minh được là an toàn để xoá) sẽ bị chặn lại như một regression, gắn diff vào đúng pull request.

ApplicationTrung bình2026-08-25
Bundle Budget + Tree Shaking

Tags

#bundle-size#tree-shaking#ci#performance-budget#side-effects#bundling

Tài liệu tham khảo

Mở rộng

Animation gốc là một file HTML tự chứa, có thể nhúng lại ở bất kỳ trang nào khác. Mở file gốc

Liên quan

ApplicationTrung bình

Server Components & Streaming Boundaries

Server Component chạy trên server, fetch dữ liệu và render ra kết quả tuần tự hoá, không đóng gói code vào bundle; chỉ phần được đánh dấu "use client" tại boundary mới có JS gửi xuống trình duyệt để hydrate, còn payload được stream về theo từng phần khi resolve xong.

#react-server-components#streaming#hydration#bundle-size
ApplicationTrung bình

App Shell + Route Code Splitting

Bundle được chia theo route: chỉ shell và route đầu tiên tải ngay, các route khác được split thành chunk riêng và chỉ fetch khi người dùng điều hướng tới (hoặc prefetch khi có ý định), giúp giảm chi phí parse/execute JS lúc tải trang lần đầu.

#code-splitting#bundling#lazy-loading#prefetch
ApplicationTrung bình

Web Locks API: nhiều tab phối hợp không tranh việc

Web Locks API cho phép nhiều tab của cùng một app xin cùng một khoá tên; chỉ một tab giữ được lock chạy việc như sync dữ liệu hay refresh token, các tab khác chờ hoặc bỏ qua tuỳ chế độ, và lock tự động nhả khi tab đóng hay reload — khác cờ localStorage vốn không tự dọn khi tab crash.

#web-locks#navigator-locks#multi-tab#token-refresh