reactjs – 代码拆分导致在SPA的新部署后无法加载块

我们创建了一个AsyncComponent来加载块(即路由组件).当这个组件加载一个块并接收并发生错误时,我们只需要一个简单的页面重新加载来更新index.html,它就是对主块的引用.丑陋的原因在于,根据页面的外观或加载方式,用户可以在刷新前看到短暂的空白页面.它可能有点刺耳,但也许这也是因为我们不希望SPA自发刷新.

App.js

// import the component for the route just like you would when
// doing async components
const ChunkedRoute = asyncComponent(() => import('components/ChunkedRoute'))

// use it in the route just like you normally would
<Route path="/async/loaded/route" component={ChunkedRoute} />

asyncComponent.js

import React,{ Component } from 'react'

const asyncComponent = importComponent => {
  return class extends Component {
    state = {
      component: null,}

    componentDidMount() {
      importComponent()
        .then(cmp => {
          this.setState({ component: cmp.default })
        })
        .catch(() => {
          // if there was an error,just refresh the page
          window.location.reload(true)
        })
    }

    render() {
      const C = this.state.component
      return C ? <C {...this.props} /> : null
    }
  }
}

export default asyncComponent