zoukankan      html  css  js  c++  java
  • loadable实现代码切割

    使用react-loadable实现代码分割

    在开发react单页面应用时,我们会遇到一个问题,那就是打包后的js文件特别巨大,首屏加载会特别缓慢。这个时候我们应该讲代码进行分割,按需加载,将js 拆分成若干个chunk.js,用到就加载,react-loadable就可以很好地解决这个问题。

    安装

    yarn add react-loadable

    基本使用

    假设现在项目中有个 home页面组件

    src/pages/home/index.js

    import React, { Component } from 'react'
    class Home extends Component {
        render(){
            return (
                <div>这个是home页面</div>
            )
        }
    }
    
    export default Home
     

    在没有使用react-loadable之前,在我们的route.js里面是直接import Home这个组件的

    router.js

    import React, { Fragment } from 'react'
    import { BrowserRouter, Route } from 'react-router-dom'
    
    import Home from '@pages/home'
    
    const Routes = () => (
        <BrowserRouter>
            <Route path="/home" component={Home}/>
        </BrowserRouter>
    );
    
    export default Routes

    运行项目后我们可以看chrome的network记录

     

    可以看到1.chunk.js是687k

    现在我们来添加react-loadable

    在home文件下新建一个loadable.js文件

    src/pages/home/loadable.js

    import React from 'react';
    import Loadable from 'react-loadable';
    
    //通用的过场组件
    const loadingComponent =()=>{
        return (
            <div>loading</div>
        ) 
    }
    
    
    export default Loadable({
        loader:import('./index.js'),
        loading:loadingComponent
    });

    然后再router里面调用

    import React, { Fragment } from 'react'
    import { BrowserRouter, Route } from 'react-router-dom'
    
    import Home from '@pages/home/loadable'
    
    const Routes = () => (
        <BrowserRouter>
            <Route path="/home" component={Home}/>
        </BrowserRouter>
    );
    
    export default Routes

    现在再看看chrome的network记录

     
    image

    这个时候1.chunk.js是156k,因为只加载首页所需的依赖,所以体积会小很多,而且这个差距会随着项目的增大而变大

    看代码,可以知道,工作原理其实就是在页面组件上有包了一成高级组件来代替原来的页面组件

    到这里,代码分割其实已经解决了,但是如果项目有100个页面,那laodable.js就需要写100遍,这样就感觉有点冗余了,所以这个我们可以封装一下

    首先,我们建一个util

    src/util/loadable.js

    import React from 'react';
    import Loadable from 'react-loadable';
    
    //通用的过场组件
    const loadingComponent =()=>{
        return (
            <div>loading</div>
        ) 
    }
    
    //过场组件默认采用通用的,若传入了loading,则采用传入的过场组件
    export default (loader,loading = loadingComponent)=>{
        return Loadable({
            loader,
            loading
        });
    }

    不难看出,我们可以将按需加载的组件和过渡组件通过参数传入最后返回包装后的组件,如此一来,home下面的laodable.js就不需要再建了

    router里面调用方式改为如下

    import React, { Fragment } from 'react'
    import { BrowserRouter, Route } from 'react-router-dom'
    import loadable from '../util/loadable'
    
    const Home = loadable(()=>import('@pages/home'))
    
    const Routes = () => (
        <BrowserRouter>
            <Route path="/home" component={Home}/>
        </BrowserRouter>
    );
    
    export default Routes

    封装之后,laodable只需写一次,改变的只是组件的引入方式,这样一来就方便多了,react-loadable是以组件级别来分割代码的,这意味着,我们不仅可以根据路由按需加载,还可以根据组件按需加载,使用方式和路由分割一样,只用修改组件的引入方式即可

  • 相关阅读:
    hibernate_0100_HelloWorld
    MYSQL子查询的五种形式
    JSF是什么?它与Struts是什么关系?
    nop指令的作用
    htmlparser实现从网页上抓取数据(收集)
    The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter. Struts tags are only usable when the
    FCKeditor 在JSP上的完全安装
    Java遍历文件夹的2种方法
    充电电池和充电时间说明
    吃知了有什么好处
  • 原文地址:https://www.cnblogs.com/it-Ren/p/13665366.html
Copyright © 2011-2022 走看看