性能优化记录

news2024/11/16 17:30:57

您好，如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

前言

最近零零散散的对刚接手的一个新项目做了一些优化，白屏、打包相关的内容都涉及到了，写一篇文章来记录一下。

白屏相关

DNS预解析、资源预加载

对于项目中有很多静态资源涉及到的公共域名，如g.alicdn.cmon，采用DNS预连接 + 解析：

<link rel="preconnect" href="//g.alicdn.com" crossorigin />
<link rel="dns-prefetch" href="//g.alicdn.com" />

对于项目中一些必要的JS资源，采用资源预加载，可以大幅度缩短资源加载时间：

<link rel="preload" href="https://g.alicdn.com/eleme-risk/xxxxxxx-pc/0.0.99/js/index.js" as="script" />
<link rel="preload" href="//g.alicdn.com/alilog/mlog/aplus_v2.js" as="script" />

结果：整体白屏时间降低400~600ms。

页面级路由懒加载

原本项目打包出来的JS文件只有一个bundle.js，涵盖了整个项目的业务代码，对于业务方来说来说，可能访问最多的就是新增和详情两个页面，所以对于首屏加载是不友好的，应该优化成访问哪个页面加载对应页面的资源，基于Ice2.0调研，将路由中的组件都转换为懒加载模式：

routes.ts

import { lazy, IRouterConfig } from 'ice';
// ice不支持layout组件设置为懒加载
import Layout from '@/layouts/BasicLayout';

const Home = lazy(() => import(/* webpackChunkName: 'Home' */ '@/pages/Home'));
const NotFound = lazy(() => import(/* webpackChunkName: 'NotFound' */ '@/components/NotFound'));
const ManualDetect = lazy(() => import(/* webpackChunkName: 'ManualDetect' */ '@/pages/ManualDetect'));
const AddMission = lazy(() => import(/* webpackChunkName: 'addMission' */ '@/pages/ReconnaissanceMission/add-mission'));
const MissionDetail = lazy(
  () => import(/* webpackChunkName: 'missionDetail' */ '@/pages/ReconnaissanceMission/missionDetail'),
);
const NewMissionDetail = lazy(
  () => import(/* webpackChunkName: 'newMissionDetail' */ '@/pages/ReconnaissanceMission/newMissionDetail'),
);
const NoPermission = lazy(() => import(/* webpackChunkName: 'NoPermission' */ '@/pages/NoPermission'));
const Board = lazy(() => import(/* webpackChunkName: 'Board' */ '@/pages/Board'));
const BusinessInsight = lazy(() => import(/* webpackChunkName: 'BusinessInsight' */ '@/pages/BusinessInsight'));
const ChuangDaoInsight = lazy(() => import(/* webpackChunkName: 'ChuangDaoInsight' */ '@/pages/ChuangDaoInsight'));
const Report = lazy(() => import(/* webpackChunkName: 'Report' */ '@/pages/Report'));

const routes: IRouterConfig[] = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/manualDetect',
        component: ManualDetect,
      },
      {
        path: '/addMission',
        component: AddMission,
      },
      {
        path: '/MissionDetail',
        component: MissionDetail,
      },
      {
        path: '/newMissionDetail',
        component: NewMissionDetail,
      },
      {
        path: '/',
        exact: true,
        component: Home,
      },
      {
        path: '/noPermission',
        exact: true,
        component: NoPermission,
      },
      {
        path: '/board',
        exact: true,
        component: Board,
      },
      {
        path: '/businessInsight',
        exact: true,
        component: BusinessInsight,
      },
      {
        path: '/chuangDaoInsight',
        exact: true,
        component: ChuangDaoInsight,
      },
      {
        path: '/report',
        exact: true,
        component: Report,
      },
      {
        component: NotFound,
      },
    ],
  },
];

export default routes;

看一下效果。

在改动前是这样的：

在这里插入图片描述

无论访问哪个页面，请求固定的JS文件，大小为2.3MB。

改动以后发版：

首屏刷新：

在这里插入图片描述

切换一个路由：

在这里插入图片描述

效果很明显了，文件资源也小了很多，白屏时间自然就下降了。

详细的文章在这里：

React中的懒加载以及在Ice中实践

结果：白屏时间整体降低，请求资源大小整体下降。

构建相关

优化本地热更新时间

项目本地热更新时间比较慢，大约在8~9秒，基于ice运行时中间件在每次代码变更时加入缓存同时移除对node_module目录下的babel转换，可以写一段这样的代码：

module.exports = ({ onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {
    config.module
      .rule('tsx')
      .test(/\.jsx?|\.tsx?$/)
      .exclude.add(/node_modules/)
      .end()
      .use('babel-loader')
      .tap((options) => {
        return {
          ...options,
          cacheDirectory: true,
        };
      });
  });
};

在build.json中注入该插件：

{
  // ...
  "plugins": [
    "@ali/build-plugin-faas",
    [
      "build-plugin-ignore-style",
      {
        "libraryName": "antd"
      }
    ],
    "@ali/build-plugin-ice-def",
    "./src/index.ts"
  ]
}

在这里插入图片描述

结果：热更新时间降低到4秒左右，降低50%。

构建包大小优化

CDN资源替代项目依赖包

利用Webpack模块可视化工具，项目中的依赖是这样的：

在这里插入图片描述

在这里插入图片描述

从上图可以看到：在开发环境整个构建包体积达到了19.44MB，echarts、antv、moment这些包，体积都比较大，达到了MB量级，并且在项目中前两者使用频率很低，只有引用过一次，对于这种情况，考虑将依赖包转换为CDN引入的方式，原因如下：

  • 减少打包产物大小；
  • 减少白屏时间；
  • 版本固定，使用频率低，通过CDN单独引入还会有浏览器强缓存的效益；

通过Webpack中externals，取消对于node_modules中枚举包的计算，并且在项目index.html中从CDN引入所列举到的包。

{
	// ...
  "externals": {
    "echarts": "echarts",
    "moment": "moment"
  },
}

externals这里的key、value值分别对应npm中的包名和CDN引入后在window下的全局变量名，找包的CDN路径很简单，但是如何知道全局变量名是什么呢？

可以打开CDN链接，格式化代码，大概是这个样子的：

function(e, t) {
    "object" == typeof exports && "object" == typeof module ? //判断环境是否支持commonjs模块规范
    module.exports = t(require("vue")) :
    "function" == typeof define && define.amd ? //判断环境是否支持AMD模块规范
    define("ELEMENT", ["vue"], t) :
    "object" == typeof exports ? //判断环境是否支持CMD模块规范
    exports.ELEMENT = t(require("vue")) : 
    e.ELEMENT = t(e.Vue)
} ("undefined" != typeof self ? self: this,function(e){
    //省略...
});

从这个JS文件可以看到，这个全局变量是ELEMENT咯~这块更详细的教程可以看一下这篇文章，这位博主总结的很全：

Webpack系列』—— externals用法详解

代码分割

这里利用Webpack现有的能力，对使用频繁的第三方库和模块进行统一抽离，这一部分可以写在上面提到的Ice中间件里去：

module.exports = ({ onGetWebpackConfig }) => {
  onGetWebpackConfig((config) => {
    config.optimization.splitChunks({
      cacheGroups: {
        vendor: {
          priority: 1,
          test: /node_modules/,
          chunks: 'initial',
          minChunks: 1,
          minSize: 0,
          name: 'vendor',
          filename: 'vendor.js',
        },
        common: {
          chunks: 'initial',
          name: 'common',
          minSize: 100,
          minChunks: 3,
          filename: 'common.js',
        },
      },
    });
  });
};

抽离出来的模块如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-guxjcxoO-1685952375813)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e804109b80924185bf2062f63b0c70dc~tplv-k3u1fbpfcp-watermark.image?)]

结果：优化后的构建包体积为9.1MB，降低了50%以上大小。

写在最后

本文总结了一下博主近期性能优化的一些点，对于这些点有什么处理不好的地方可以一起讨论~

如果喜欢我的文章，可以关注我的公众号「量子前端」，将不定期关注推送前端好文~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/612068.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

chatgpt赋能python：Python同一行语句之间的分隔

chatgpt赋能python：Python同一行语句之间的分隔

Python同一行语句之间的分隔 在Python中&#xff0c;同一行内的语句通常使用分号 ‘;’ 分隔开来。分号作为语句之间的分隔符&#xff0c;可以使我们在同一行内写多条语句&#xff0c;从而减少代码行数&#xff0c;提高代码可读性和可维护性。 分隔符和代码风格 在使用分号进…
阅读更多...
[C++]基本知识与概念

[C++]基本知识与概念

C基础知识与概念 C与C基础C面向对象C STLC 内存管理C11新特性C linux编程I/O多路复用 前言 本文章适用于有一定C基础的新手同学快速掌握一些C的基本知识概念以及面试中可能会问的内容&#xff0c;如果你没有相应的基础学习又因为这篇文章缺少代码讲解所以可能会影响你的学习效率…
阅读更多...
Mysql安装教程(windows)

Mysql安装教程(windows)

本文主要讲解如何去安装使用Mysql 一、下载Mysql 1、官网在线下载 MySQL官网&#xff1a;https://www.mysql.com/downloads/ 下载版本&#xff1a;MySQL Installer for Window 2、云盘离线下载 https://pan.baidu.com/s/1dB7kFiwrKpF5W-5XPn2FeQ?pwdrvb9 提取码&#xff1a;…
阅读更多...
【图像任务】Transformer系列.2

【图像任务】Transformer系列.2

两篇改进Transformer结构的论文&#xff1a;MAN&#xff08;arXiv2022&#xff09;&#xff0c;ScalableViT&#xff08;ECCV2022&#xff09;. Multi-Scale Attention Network for Single Image Super-Resolution, arXiv2022 解读&#xff1a;【ARIXV2209】Multi-Scale Atten…
阅读更多...
Java课程设计-学生管理系统《控制台版本》

Java课程设计-学生管理系统《控制台版本》

博主介绍&#xff1a;✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…
阅读更多...
JavaEE(系列20) -- 网络编程之UDP和TCP套接字

JavaEE(系列20) -- 网络编程之UDP和TCP套接字

目录 1. 网络编程 2. UDP网络编程 2.1 DatagramSocket API 2.2 DatagramPacket API 2.3 基于UDP实现的回显服务器 2.3.1 UDP服务器设计步骤 2.3.2 服务器代码 2.3.3 客户端代码 2.3.4 基于UDP写一个字典服务器 3. TCP网络编程 3.1 ServerSocketAPI 3.2 SocketAPI …
阅读更多...
如何不出国一年内拿到加拿大女王大学金融硕士学位证书？

如何不出国一年内拿到加拿大女王大学金融硕士学位证书？

作为加拿大最好的公立大学之一&#xff0c;QueensUniversity位于安大略省的金斯顿市。最近&#xff0c;它在QS全球大学排名中跻身第209位&#xff0c;同时在加拿大的综合排名中名列第7位。这表明女王大学在学术研究和教育方面都有着出色的表现。Queens University坐落于安大略省…
阅读更多...
分布式光伏发电远程监控系统

分布式光伏发电远程监控系统

分布式光伏发电远程监控系统 项目背景 新能源、可再生能源接入电网是智能电网建设的重要组成&#xff0c;也是能源互联网发展的基础。近年来&#xff0c;太阳能光伏发电技术快速发展&#xff0c;光伏发电并网对配电网的影响也不断加深。电网调度人员需要人工参与光伏发电站的发…
阅读更多...
RK3588+FPGA+Cameralink高速相机解决方案

RK3588+FPGA+Cameralink高速相机解决方案

1. 视频接入&#xff0c;其中可见使用LVDS&#xff0c;红外使用cameralink 2. H264低倍率压缩编码本地存储 3. H264压缩使用同步422接口或者网口UDP协议输出实时码流 4. 使用串口进行通讯&#xff0c;进行类似于可见、红外或者激光器或者地面控制软件等之间的通讯 5. 使用网…
阅读更多...
SpringBoot3-基础配置和多环境开发

SpringBoot3-基础配置和多环境开发

1. 配置文件格式 提供三种属性配置方式&#xff0c;当三个配置文件都有&#xff0c;加载顺序从前至后 示例第二种&#xff08;主要也是用这个&#xff09;&#xff1a; 2. yaml格式 3. yaml读取数据格式的三种方式 第一种&#xff0c;使用Value读取单一属性数据 Value("${…
阅读更多...
基于redis实现消息队列（更推荐使用专业的mq）

基于redis实现消息队列（更推荐使用专业的mq）

目录 利用redis实现消息队列&#xff08;基于list&#xff0c;点对点模型&#xff09;——lpush存放队列&#xff08;lpush 队列名 队列内容&#xff08;可一次存放多个内容&#xff0c;用空格隔开&#xff09;&#xff09; brpop取队列&#xff08;brpop 队列名 等待时间单位秒…
阅读更多...
机器视觉日常习题（更新中。。。）

机器视觉日常习题（更新中。。。）

目录 第二讲 图像处理概述 第二讲 图像处理概述 几何变换&#xff1a;又称为图像空间变换&#xff0c;它将一幅图像中的坐标位置映射到另一幅图像中的新坐标位置。图像分割&#xff1a;把图像分成各具特色的区域并提取感兴趣目标的技术和过程。图像边缘&#xff1a; 平滑&#…
阅读更多...
【深入浅出 Spring Security（六）】一文搞懂密码的加密和比对

【深入浅出 Spring Security（六）】一文搞懂密码的加密和比对

Spring Security 中的密码加密 一、PasswordEncoder 详解常见的实现类&#xff08;了解&#xff09;DelegatingPasswordEncoder源码分析DelegatingPasswordEncoder 在哪实例化的&#xff1f; 二、自定义加密自定义方式一&#xff1a;使用{id}的形式自定义方式二&#xff1a;向S…
阅读更多...
程序员失业转行送外卖，晒出当天收入，还以为看错了！

程序员失业转行送外卖，晒出当天收入，还以为看错了！

在程序员的共识中&#xff0c;30岁之前自己是很受企业欢迎的&#xff0c;有经验有技术&#xff0c;能够为公司创造足够多的价值。 但是一旦超过了35岁&#xff0c;如果没有做到架构师或者成为管理人员&#xff0c;那很可能是连工作都找不到的。而且这个年龄的程序员还要面临着…
阅读更多...
700MHz设备对广播电视信号的干扰有哪些？

700MHz设备对广播电视信号的干扰有哪些？

700MHz&#xff0c;由于其较长的波长&#xff0c;良好的传播与覆盖特性&#xff0c;不仅一直被多国用作广播电视信号频率&#xff0c;4G LTE和5G NR也同样看好这一频段&#xff0c;并在此频段上进行了相应的部署和规划。目前已经有超过45个国家和地区&#xff0c;将700MHz频段部…
阅读更多...
【网络安全】企业应急响应基础技能

【网络安全】企业应急响应基础技能

windows 任务计划列表 1. 计算机管理窗口,选择 系统工具 中 任务计划程序 中的 任务计划程序库选项 可以查看任务计划的名称,状态,触发器等详细信息 2.powershell中输入get-scheduledtask 可以查看当前系统所有任务计划信息 任务路径,名称,状态等详细信息 3.命令行中输入s…
阅读更多...
C++11：右值引用，实现移动语义和完美转发

C++11：右值引用，实现移动语义和完美转发

目录 1、右值引用 2、移动语义&#xff08;std::move&#xff09; 3、完美转发&#xff08;std::forward&#xff09; 1、右值引用 右值引用&#xff08;Rvalue reference&#xff09;是C11引入的一个新特性&#xff0c;它是一种新的引用类型&#xff0c;用于表示将要被移动…
阅读更多...
5个小时，搭出2套应用，这一低代码平台很强劲！

5个小时，搭出2套应用，这一低代码平台很强劲！

现代管理学之父德鲁克提及创新本质时&#xff0c;说了两点&#xff1a; 一是让昂贵的东西变得便宜&#xff0c;老百姓能用&#xff1b;二是让高门槛东西变得低门槛&#xff0c;普通人可用。 而低代码正符合这两个条件。 一、背景 所谓低代码&#xff0c;是一种软件开发方法&…
阅读更多...
常用的LED显示屏驱动芯片和控制系统

常用的LED显示屏驱动芯片和控制系统

常用的LED显示屏驱动芯片包括以下几种&#xff1a; TPIC6B595&#xff1a;这是一种串行输入、并行输出的LED显示屏驱动芯片&#xff0c;适用于驱动7段数码管等简单的LED显示屏。 MAX7219/MAX7221&#xff1a;这是一种常用的LED显示屏驱动器&#xff0c;可驱动8x8点阵LED显示屏。…
阅读更多...
npm 发布新包或者新模块后，无法下载最新版本，如何解决？

npm 发布新包或者新模块后，无法下载最新版本，如何解决？

目录 1、方法一&#xff1a;在npm官网搜索对应的模块&#xff0c;看看是否有最新版本的存在&#xff1f; 2、方法二&#xff1a;排查本地使用的是什么镜像&#xff1f; 3、方法三&#xff1a;将淘宝镜像切换成npm镜像 1、方法一&#xff1a;在npm官网搜索对应的模块&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023