踩坑记录——React.lazy

项目背景：一个页面内嵌三个页面组件，试图使用React.lazy懒加载实现分包加载性能优化，
原本使用的是alias export，引入失败。
经查官方文档和mentor讲解，用lazy懒加载的组件必须使用default export导出
React.lazy官方文档

问题解决。

可是就止步于此了吗，如果我就想用alias export导出该怎么办呢？

首先我们需要找出alias export和default export的不同，经控制台测试如下图 default export多了个default对象，那我们能否给alias export构造一个default属性来骗过React.lazy的检查呢？

从上图可以看出，import('')方法返回的是一个Promise，于是

const History = lazy(() => import('./pages/History').then(res => ({default:res.History})))

大功告成

经检验和实际预览效果，骗过了React.lazy。
不过这种方法只是技术层面的尝试，写法过于复杂，还是老老实实用export default吧

ps: 记得添加suspense和fallback机制，让分包加载的时候显示loading的状态

import React, {Suspense, lazy} from 'react'
import './App.css'
import {Header} from './components/Header'
import {Footer} from './components/Footer'
import {Loading} from './components/Loading'
import {Switch, Route} from 'react-router-dom'

// import {Home} from './pages/Home'
// import {History} from './pages/History'
// import {About} from './pages/About'
const Home = lazy(() => import('./pages/Home'))
  // .then(res => ({default: res.History} ) )
const History = lazy(() => import('./pages/History'))
const About = lazy(() => import('./pages/About'))

function App() {
  // .then(res => ({default:res.History}))
  // console.log('alias导出：',import('./pages/History').then(res => ({default:res.History})))
  // console.log('default导出：',import('./pages/Home'))
  return (
    <div className="app">
      <Header/>
      <main>
        <Suspense fallback={<Loading/>}>
          <Switch>
            {/*exact表示严格匹配模式，加了后代就无法匹配自己*/}
            <Route path="/" exact component={Home}/>
            <Route path="/history" component={History}/>
            <Route path="/about" component={About}/>
          </Switch>
        </Suspense>
      </main>
      <Footer/>
    </div>
  )
}

export default App