[英]import npm modules asynchronously in react.js
我在 React.js 项目中使用包裹作为打包器。
如何在react.js 中异步加载 npm 模块?
只有一个页面使用了一个特定的 npm 模块,所以我不需要在第一次加载时加载它。
通过避免这种情况,我想减少bundle size 。
你能告诉我正确的方法吗?
========================
而且,如果我对包大小优化和延迟加载有任何错误理解,请告诉我。
通过使用 动态导入,您可以在真正需要包时导入包。
您可以在useEffect
钩子中使用动态导入,例如:
const Page = (props) => {
useEffect(
() => {
const [momentjsPromise, cancel] = makeCancelable(import("moment"));
momentjsPromise.then((momentjs) => {
// handle states here
});
return () => {
cancel?.();
};
},
[
/* don't forget the dependencies */
],
);
};
您可以使用动态导入。
假设您要导入my-module
:
const Component = () => {
useEffect(() => {
import('my-module').then(mod => {
// my-module is ready
console.log(mod);
});
}, []);
return <div>my app</div>
}
另一种方法是对Component
本身进行代码拆分:
// ./Component.js
import myModule from 'my-module';
export default () => <div>my app</div>
// ./App.js
const OtherComponent = React.lazy(() => import('./Component'));
const App = () => (
<Suspense>
<OtherComponent />
<Suspense>
);
my-module
将与 Component 一起拆分。
这两种模式应该适用于任何捆绑器,但它仅适用于客户端。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.