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

要使其正常工作，您需要在组件代码中动态加载bundle而不是getComponent hook。

在我的应用程序中，有一个名为LazyComponent的组件，可在需要时动态加载bundle。此外，它允许您在加载大包时显示某些内容：

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
    }
  ]
};

动态路径代码拆分检查是否加载了模块

1 个答案: