lazy内置方法 Suspense内置组件

lazy是React提供的懒（动态）加载组件的方法，React.lazy()
能减少打包体积、延迟加载首屏不需要渲染的组件
依赖内置组件Suspense：给lazy加上loading指示器组件的一个容器组件
Suspense目前只和lazy配合实现组件等待加载指示器的功能
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。所以要用类返回render而不是函数
index.jsx

import Loading from './loading'
const MyMain = React.lazy(() => import('./main.jsx'))
function App() {return (<div>{/* 注意 fallback这里是组件 */}<React.Suspense fallback={<Loading />}><MyMain /></React.Suspense></div>)
}ReactDOM.render(<App />,document.getElementById('app')
)

main.jsx

// export function Main() {//     return (
//         <div>
//             显示内容
//         </div>
//     )
// }
// React.lazy 接受一个函数，这个函数需要动态调用 import()。
// 它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
export default class Main extends React.Component {render() {return (<div>显示内容</div>)}
}

Loading.jsx

export default function Loading() {return (<div><h1>Loading...</h1><h1>Loading...</h1><h1>Loading...</h1></div>)
}

路由懒加载

yarn add react-router react-router-dom
本地调试时，path和文件名同名，会变成访问文件
index.jsx

import Loading from './loading'
import React, { lazy, Suspense } from 'react'
import { BrowserRouter } from 'react-router-dom'
import { Switch, Route } from 'react-router'
const MyMain = lazy(() => import('./main.jsx'))
function App() {return (<div>{/* 注意 fallback这里是组件 */}<Suspense fallback={<Loading />}><div><MyMain /><Switch><Route path="/mypage1" component={lazy(() => import('./page1.jsx'))} /><Route path="/mypage2" component={lazy(() => import('./page2.jsx'))} /></Switch></div></Suspense></div>)
}// 路由懒加载
ReactDOM.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,document.getElementById('app')
);

14 代码分割之lazy:Suspense与路由懒加载相关推荐

react中使用lazy函数进行路由懒加载
react中使用lazy函数进行路由懒加载 import React, { Component,lazy,Suspense} from 'react' //1.通过React的lazy函数配合impo ...
React ----- 路由懒加载的几种实现方案
传统的两种方式 1.import() 符合ECMAScript提议的import()语法,该提案与普通 import 语句或 require 函数的类似,但返回一个 Promise 对象.这意味着模块 ...
Code Splitting代码分包（路由懒加载）
code split代码分包(路由懒加载) 前言,在应用打包结果过大时,按照设置的规则打包到不同的bundle中,提高应用响应速度.也就是当一个页面进行加载的时候如果太慢,那么你就可以考虑对工程进行 ...
React - 路由 lazyLoad 的使用（路由懒加载）
React - 路由 lazyLoad(路由懒加载) lazy是React提供的懒(动态)加载组件的方法,React.lazy() 路由组件代码会被分开打包,能减少打包体积.延迟加载首屏不需要渲染的组 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
前端学习（2742）：重读vue电商网站52之路由懒加载
当打包构建项目时,JavaScript 包会变得非常大,影响页面加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了. 具体需要 3 步: 安 ...
vue路由懒加载_优化vue项目的首屏加载速度
最近使用vue-cli3构建了一个小型的博客系统,完工之后,build打包出来发现一个chunk-vendors包就有1.1m,部署上去之后,访问的时候,首屏加载非常慢.居然需要21s,体验极差. 这 ...
路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
Vue项目开发中使用路由懒加载
Vue项目开发中使用懒加载一.使用路由懒加载的好处当打包项目时,JavaScript包会变的非常大,影响页面加载,要是通过把不同的路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应 ...

14 代码分割之lazy:Suspense与路由懒加载

lazy内置方法 Suspense内置组件

路由懒加载

14 代码分割之lazy:Suspense与路由懒加载相关推荐

最新文章

热门文章