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是以组件级别来分割代码的,这意味着,我们不仅可以根据路由按需加载,还可以根据组件按需加载,使用方式和路由分割一样,只用修改组件的引入方式即可

posted @   一路向北√  阅读(331)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人

web应用开发&研究 -

业精于勤而荒于嬉。

工作,使我快乐。


Font Awesome | Respond.js | Bootstrap中文网

点击右上角即可分享
微信分享提示