react-rotuer动态加载模块

  • Z时代
  • 2024-01-10
  • 分类：综合

react

一、为什么要动态加载模块
　　webpack在打包react应用时会将整个应用打包成一个js文件，当用户首次访问时，会加载整个js文件，当应用规模越来越大时，这个js文件所包含的数据量也越来越大，网站首屏渲染的速度也就会变慢。
二、优化方法
　　常见的优化方法有一下3种：
　　1、多入口：利用webpack的entry配置多入口，将应用打包分割成多个js文件。适用于多页面应用。
　　2、去重：利用splitChunks去重，将公用的部分分离出来。
　　3、路由动态加载：利用import()方法细颗粒度的分割代码，将每一个路由到的组件从主bundle.js文件分离出来。
　　这里主要介绍路由动态加载的方法，社区已有较为成熟的第三方库react-loadable。本文讨论不借助第三方库来实现。webpack支持ECMA提案的import()方法，它返回的是一个promise对象，在webpack打包的时候会先遍历所有的import()方法，然后将每个import()的组件打包成独立的chunk，与主bundle.js文件分离。这样应用首屏渲染时加载的数据量就减少了，提高了首屏的速度。当路由跳转时，会异步加载相应的chunk。然后配合ssr技术有优化首屏加载的问题。
　　路由动态加载组件实现如下：

import * as React from 'react';
export default (loadComponent, loading = '加载中') => {
    return class AsyncComponent extends React.Component {
        state = {
            Child: null
        }
        async componentDidMount() {
            const { Child } = await loadComponent();
            this.setState({ Child })
        }
        render() {
            const { Child } = this.state;
            return Child ? <Child {...this.props} /> : loading
        }
    }
}

使用时routes.js

import AsyncComponent from './component/AsyncComponent';
export default [
    {
        name: '首页',
        path: '/',
        component: AsyncComponent(()=> import('./pages/home'))
    },
    {
        name: '详情',
        path: '/detail',
        component: AsyncComponent(()=> import('./pages/detail'))
    },
]

因为import()返回的是一个promise对象，所以可以再componentDidMount里使用await来等待异步加载组件，整个实现就是利用高阶组件和import()方法。

以上是 react-rotuer动态加载模块 的全部内容， 来源链接： utcz.com/z/383584.html

回到顶部