在 react.js 中異步導入 npm 模塊

Question

我在 React.js 項目中使用包裹作為打包器。

如何在react.js 中異步加載 npm 模塊？

只有一個頁面使用了一個特定的 npm 模塊，所以我不需要在第一次加載時加載它。

通過避免這種情況，我想減少bundle size 。

你能告訴我正確的方法嗎？

========================

而且，如果我對包大小優化和延遲加載有任何錯誤理解，請告訴我。

Answer 1

通過使用 動態導入，您可以在真正需要包時導入包。

Answer 2

您可以在useEffect鈎子中使用動態導入，例如：

const Page = (props) => {
    useEffect(
        () => {
            const [momentjsPromise, cancel] = makeCancelable(import("moment"));

            momentjsPromise.then((momentjs) => {
                // handle states here
            });

            return () => {
                cancel?.();
            };
        },
        [
            /* don't forget the dependencies */
        ],
    );
};

Answer 3

您可以使用動態導入。

假設您要導入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 一起拆分。

這兩種模式應該適用於任何捆綁器，但它僅適用於客戶端。