ReactJS: Tìm nạp trước (Prefetching)
Các component có thể tải được là hoàn toàn tương thích với các gợi ý của webpack gồm webpackPrefetch và webpackPreload.
Hầu hết thời gian, bạn muốn "tìm nạp trước" một component, điều đó có nghĩa là nó sẽ được tải khi trình duyệt không hoạt động. Bạn có thể làm điều đó bằng cách thêm vào /* webpackPrefetch: true */ bên trong câu lệnh import của mình.
import loadable from '@loadable/component' const OtherComponent = loadable(() => import(/* webpackPrefetch: true */ './OtherComponent'), )
Bạn có thể trích xuất tài nguyên được tải trước từ phía máy chủ để thêm
<link rel="prefetch">vào thẻ <head> của mình.
Tải trước một component theo cách thủ công
Có thể buộc tải trước một component. Nó có tác dụng tương tự như khi component được hiển thị lần đầu tiên.
Nó có thể hữu ích khi kích hoạt preload khi di chuột qua:
import loadable from '@loadable/component' const Infos = loadable(() => import('./Infos')) function App() { const [show, setShow] = useState(false) return ( <div> <a onMouseOver={() => Infos.preload()} onClick={() => setShow(true)}> Show Infos </a> {show && <Infos />} </div> ) }
preloadkhông có sẵn phía máy chủ (server-side), bạn chỉ gọi được nó là phía máy khách. Nếu bạn muốn sử dụng tìm nạp trước phía máy chủ, hãy sử dụng gợi ý webpack để thay thế.
preloadhoạt động tích cực và không quan tâm đến tình trạng mạng và sở thích tiết kiệm dữ liệu của người dùng. Bạn nên gọi nó một cách cẩn thận.