React实战-实现性能优化

✊不积跬步,无以至千里;不积小流,无以成江海

前情提要

将页面部署到 Netlify上(gitHubpage好像有点太慢所以没有选,因为没花钱买域名所以只能暂时用netlify做一下测试)

deploy后发现页面的下载速度如图:

基本维持在4s左右这个样子,接下来就想怎么能够优化这个时间。

动态import

优化的第一步是想要尝试动态import。思路是将首页变成两部分:当前要看的部分 & 以后要看的部分。

来到router.tsx,发现home文件是先打包好,然后再放到下面去用,那么实现方法可以为:

javascript 复制代码
// 1,用import()将路径变为动态
import('../pages/StatisticsPage')

// 2. 将前面加上箭头函数
() => import('../pages/StatisticsPage')

// 3. 用懒加载将函数包裹起来,并赋值
const StatisticsPage = lazy(() => import('../pages/StatisticsPage'))

// 4. 把page用suspense包起来
<Suspense> <StatisticsPage /> </Suspense>

// 5. 提供正在加载中需要显示的内容
<Suspense fallback={<Loading />}><StatisticsPage /></Suspense> }

需要注意的几个点:

  1. 动态引入需要默认的导出,但我们的文件都没有默认导出,所以要在最后加上默认导出 export default home
  2. 上面的操作能够保证对应页面只有访问到才能被加载。否则则不加载
  3. 由于我们首页的体积本来就很小,所以对home页面进行动态加载收益不大,对于那些页面上有很多图片的应该有很大帮助
  4. 动态加载就是懒加载
  5. 因为StatisticsPage页面比较大 所以对它下手了

打包后statastic页面大小为342KB

打包后index页面大小为139KB,压缩效率为64%

deploy后发现页面的下载速度如图:

实现页面速度从4s到0.9s的提升

Vite Code Splitting

第二步可以用手动分块的方法来实现对页面速度的优化,思路为:某个比较大的库单独打包,不要打包到index文件里面。vite.config.ts中添加代码如下:

python 复制代码
build: {
      rollupOptions: {
        output: {
          manualChunks(id: any) {
          //如果路径中包含echars 我就单独返回echarts的包
            if (id.includes('echarts')) {
              return 'echarts'
            }
            if (id.includes('node_modules')) {
              return 'vendor'
            }
          }
        }
      }
    },

打包结果如下:

index又变小了,从400多KB到了100多KB。

deploy后发现页面的下载速度如图:

平均时间缩短为0.8s左右:

极限最低时间可以到达0.6s左右

相关推荐
懒大王爱吃狼25 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
小牛itbull1 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
待磨的钝刨1 小时前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
逐·風4 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦5 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山6 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript