ReactJS: import full động
Giải phóng thời gian, khai phóng năng lực
Webpack chấp nhận import full động, bạn có thể sử dụng chúng để tạo component có thể tải và tái sử dụng được.
import loadable from '@loadable/component' const AsyncPage = loadable(props => import(`./${props.page}`)) function MyComponent() { return ( <div> <AsyncPage page="Home" /> <AsyncPage page="Contact" /> </div> ) }
Sử dụng thuộc tính động
Nếu bạn sử dụng plugin Babel, các thuộc tính động được hỗ trợ ngay lập tức. Nếu không, bạn phải thêm chức năng cacheKey
: nó lấy prop và trả về một key cache.
import loadable from '@loadable/component' const AsyncPage = loadable(props => import(`./${props.page}`), { cacheKey: props => props.page, }) function MyComponent() { const [page, setPage] = useState('Home') return ( <div> <button onClick={() => setPage('Home')}>Go to home</button> <button onClick={() => setPage('Contact')}>Go to contact</button> {page && <AsyncPage page={page} />} </div> ) }
Giải phóng thời gian, khai phóng năng lực