proto.lib

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.

ApplicationTrung bình2026-08-25
App Shell + Route Code Splitting

Tags

#code-splitting#bundling#lazy-loading#prefetch#app-shell#spa

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

Navigation API: điều hướng SPA thay History API

Navigation API cho SPA đăng ký intercept() để nhận toàn bộ điều hướng — link click, back/forward, submit form — commit khi dữ liệu đã sẵn sàng, giữ scroll và trạng thái focus, đồng thời báo lỗi điều hướng thất bại đúng cách thay vì im lặng.

#navigation-api#spa#routing#history-api
ApplicationCơ bản

IntersectionObserver: tải/mount theo tầm nhìn

IntersectionObserver theo dõi khi phần tử giao với viewport để tải hoặc mount nội dung đúng lúc — rootMargin nạp trước khi tới nơi, threshold chọn tỉ lệ hiện ra để kích hoạt, unobserve sau khi tải xong; dùng cho ảnh, danh sách dài và đo impression thay vì gắn scroll listener tốn hiệu năng.

#intersectionobserver#lazy-loading#viewport#impression-tracking
ApplicationCơ bản

Feature detection và fallback cho API trình duyệt mới

Khi dùng một API trình duyệt mới, code phải TEST sự tồn tại của API đó (không đoán qua user agent), dùng ngay nếu có, và chạy đường fallback chậm hơn nếu không — lý tưởng là tách fallback ra khỏi bundle hiện đại để trình duyệt mới không phải tải phần code không dùng tới.

#feature-detection#progressive-enhancement#browser-compat#fallback