モジュールがロードされているかどうかの動的ルートコード分割チェック

Question

私はコード分割の問題は、モジュールが大きければ、ユーザが空白の画面と遅延を初めて見ることになります。

function errorLoading(err) { 
     console.error('Dynamic page loading failed', err); 
    } 

    function loadRoute(cb) { 
     return (module) => cb(null, module.default); // I can't find any flag here 
    } 

    const routes = { 
     component: App, 
     childRoutes: [ 
     { 
      path: '/', 
      getComponent(location, cb) { 
      System.import('pages/Home') 
       .then(loadRoute(cb)) 
       .catch(errorLoading); 
      } 
     } 
     ] 
    }; 

export default() => <Router history={browserHistory} routes={routes} />; 

ここでは、動的ルートにコード分割ベースを使用した実例を示します。

https://github.com/ModusCreateOrg/react-dynamic-route-loading-es6/blob/master/client/pages/routes.js

モジュールがロードされているかいないかどうかはどのように確認できますか？ローディングインジケータを置く必要があります。

Answer 1

これを有効にするには、getComponentフックの代わりにコンポーネントコードでバンドルを動的にロードする必要があります。

私のアプリには、必要に応じてバンドルを動的にロードするLazyComponentというコンポーネントがあります。また、それはあなたの大切なバンドルがロードされている間、あなたが何かを表示することができます：

class LazyComponent extends React.Component { 
    constructor() { 
    this.state = {Component: null}; 
    super(); 
    } 

    componentDidMount() { 
    const pageName = this.props.location.params.page; 
    System.import(`pages/${pageName}.js`).then(
     Component => this.setState({Component}), 
     error => this.setState({error}) 
    ) 
    } 

    render() { 
    const { Component, error } = this.state; 

    // render error message when bundle has failed to load 
    if(error) { 
     return <div>{error.message}</dib> 
    } 

    // render loader while component is not ready 
    if(!Component) { 
     return <div>Loading...</div> 
    } 

    // render the component itself 
    return <Component {...this.props} /> 

    } 
} 

次にあなたがこのために一般的にあなたのルート定義

const routes = { 
    component: App, 
    childRoutes: [ 
    { 
     path: '/', 
     component: LazyComponent 
    } 
    ] 
};