react路由懒加载_vue-router实现路由懒加载

全栈程序员站长

发布于 2022-11-08 17:51:49

1.9K0

发布于 2022-11-08 17:51:49

文章被收录于专栏：全栈程序员必看

路由懒加载是什么意思? 在开发中 , 我们打开开发者工具, 会发现我们刚刚打开就会去加载所有页面.

路由懒加载就是只加载你当前点击的那个模块

按需去加载路由对应的资源, 可以提高加载速度 (一个页面加载过后再次访问不会重复加载)

实现原理：将路由相关的组件，不再直接导入了，而是改写成异步组件的写法，只有当函数被调用的时候，才去加载对应的组件内容

方法一: 重写

首先, 新建一个asynccComponent.js , 作为公共js

import {Component as ReactComponet} from 'react'
import React from "react";

export default function asyncComponent(getComponent) {

  return class AsyncComponent extends ReactComponet {

    state = {Component: null}

    componentDidMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {
          this.setState({Component})
        })
      }
    }

    render() {
      const {Component} = this.state
      if (Component) {
        return <Component {...this.props} />
      }
      return null
    }
  }
}

然后写一个async-page.js 引入需要按需加载的页面

import asyncComponent from './async-component'

export default asyncComponent(async () => {
  try {
    const module = await import('./b')
    return module.default
  } catch (e) {
    console.log(e);
  }
  return null
})

在index.js中

import React from 'react'
import { NavLink, Route } from 'react-router-dom'

import A from './async-page-a'
import B from './async-page-b'

export default class Lazy extends React.Component {
  render () {
    return (
      <div>
        <div>
          <NavLink to="/a">A啦啦</NavLink>
          <hr />
          <NavLink to="/b">B啦啦</NavLink>
        </div>
        <div>
          <Route path="/a" component={A} />
          <Route path="/b" component={B} />
        </div>
      </div>
    )
  }
}

方法二: lazy

1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包 const A = lazy(() => import('./a'))
2.通过指定在加载得到路由打包文件前显示一个自定义loading界面

<Suspense fallback={<h1>loading.....</h1>}>
  <Switch>
     <Route path="/a" component={A} />
     <Route path="/b" component={B} />
     <Redirect to="/a"/>
   </Switch>
 </Suspense>

Redirect : 匹配不上所有的路由就匹配Redirect 里的路由 Switch: 通常情况下，path和component是一一对应的关系。 Switch可以提高路由匹配效率(单一匹配)。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/185056.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年10月7日，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript