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

最新推荐文章于 2025-03-25 18:00:22 发布

西树与前端

最新推荐文章于 2025-03-25 18:00:22 发布

阅读量533

点赞数

分类专栏： reactjs 文章标签： reactjs react redux

如需转载，请联系：https://shudong.wang/about

本文链接：https://blog.youkuaiyun.com/itnote/article/details/96325510

版权

reactjs 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种通过懒加载技术优化前端性能的方法。利用react-loadable实现按需加载，避免一次性加载所有JS文件，减轻了初次加载时的资源负担。通过具体示例展示了如何设置并使用懒加载组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章首发：https://shudong.wang/10373.html

优势

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

配置插件 react-loadable

yarn add react-loadable -S

封装高阶组件


// blog：shudong.wang
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>