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

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