【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 (
      

{error.stack ? error.stack : ''}

) } return
} 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')


    

打包后会产生很多 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

你可能感兴趣的:(【reactjs性能优化】react-loadable 异步路由加载)