• react-rotuer动态加载模块


    一、为什么要动态加载模块
      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()方法。

  • 相关阅读:
    Python挂载杂记
    Python Log的使用, 模块化
    Python实现图片长宽比例缩放和填充
    系统监控与硬盘
    linux基础三
    linux基础二
    linux基础一
    网络基础
    操作系统
    计算机硬件基础
  • 原文地址:https://www.cnblogs.com/chen-cong/p/12449307.html
Copyright © 2020-2023  润新知