【reactjs性能优化】react-loadable 异步路由

优势

每个路由使用不同的chunk，没必要一次加载所以js

配置插件 react-loadable

yarn add react-loadable -S

封装高阶组件

import React from 'react'
import Loadable from 'react-loadable'
import { isDevEnv } from '@/utils/env'

const Loading = (props) => {
  const { error } = props
  const isDev = isDevEnv
  if (error && isDev) {
    return (
      <div>
        <p>{error.stack ? error.stack : ''}</p>
      </div>
    )
  }
  return <div />
}

const loadableComponent = (loader, render) => {
  const config = {
    loader,
    loading: Loading,
    delay: 1000,
  }
  if (render) {
    config.render = render
  }
  return Loadable(config)
}

export default loadableComponent

使用方式

注意路由引入的方式使用 import的方式引入 const Stark = () => import('views/Stark')
使用 la高阶组件包含 路由组件 component={la(Stark)}

import la from './loadableComponent'

const Stark = () => import('views/Stark')

<Switch>
    <Route path="/home" component={la(Stark)} key="home" exact />
</Switch>

打包后会产生很多 chunk

2019-07-08-15-32-59

每个路由使用不同的chunk，没必要一次加载所以js

2019-07-08-15-38-45 2019-07-08-15-39-02 2019-07-08-15-39-23