1. 首页
  2. 技术
  3. 前端
  4. reactjs

【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

原创文章,作者:stark,如若转载,请注明出处:https://shudong.wang/10373.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

400-800-8888

在线咨询:点击这里给我发消息

邮件:starkwang312@gmail.com

工作时间:周一至周五,9:30-18:30,节假日休息