zoukankan      html  css  js  c++  java
  • 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()方法。

  • 相关阅读:
    高通、猎户机型Android典型bootloader分析
    Ubuntu 14.04 中安装 VMware10 Tools工具
    Linux内核中的GPIO系统之(3):pin controller driver代码分析
    linux内核中的GPIO系统之(2):pin control subsystem
    linux内核中的GPIO系统之(1):软件框架
    WINCE6.0组件选择说明
    看看,这就是微软的“万物互联”系统 window10 IOT
    高通平台 lcd driver 调试小结
    STM8S定时器工作
    开关笔记
  • 原文地址:https://www.cnblogs.com/chen-cong/p/12449307.html
Copyright © 2011-2022 走看看