对于页面性能优化,组件懒加载是个比较不错的方案,并且在整个项目打包后,如果未做代码分割,构建出的文件体积会非常大,也会出现比较常见的"访问项目某一页面,需要请求整个项目所有页面的资源"问题。接下来讲一下在React中懒加载我们的组件。
const Foo = React.lazy(() => import('../componets/Foo)); <Foo />上面的代码直接在函数中使用Foo组件页面加载时会出现白屏,所以需要Suspense来包裹,代码如下:
const Foo = React.lazy(() => import('../componets/Foo)); <React.Suspense fallback={<div>loading...</div>}> <Foo/> </React.Suspense>上述为基本使用,对于在当前页面想要懒加载其他组件的情况可以这样做:
// 堆代码 duidaima.com import { Spin } from 'antd'; const OtherComponent = React.lazy(() => import('./OtherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<Spin />}> <OtherComponent /> </Suspense> </div> ); }OtherComponent是通过懒加载加载进来的,所以渲染页面的时候可能会有延迟,但使用了Suspense之后,可优化交互。在<OtherComponent />外面使用Suspense标签,并在fallback中声明OtherComponent加载完成前做的事,即可优化整个页面的交互。fallback 属性接受任何在组件加载过程中你想展示的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置。你甚至可以用一个 Suspense 组件包裹多个懒加载组件。
import { Spin } from 'antd'; const OtherComponent = React.lazy(() => import('./OtherComponent')); const AnotherComponent = React.lazy(() => import('./AnotherComponent')); function MyComponent() { return ( <div> <Suspense fallback={<Spin />}> <section> <OtherComponent /> <AnotherComponent /> </section> </Suspense> </div> ); }在Ice.js项目中实践
import { Spin } from 'antd'; const appConfig: IAppConfig = { app: { rootId: 'ice-container', }, router: { fallback: <Spin />, type: 'browser', }, }; runApp(appConfig);在路由文件中使用懒加载的形式引入组件:
import { lazy, IRouterConfig } from 'ice'; import Layout from '@/layouts/BasicLayout'; const Home = lazy(() => import('@/pages/Home')); const routes: IRouterConfig[] = [ { path: '/', component: Layout, children: [ { path: '/home', component: Home, }, ], }, ]; export default routes;在build.json中配置懒加载模式构建,这样构建出来的产物会有多个javascript文件,实现代码分割:
{ // ... "router": { "lazy": true } }这样,就实现了代码分割的效果啦~如图: