DailyUp

Appearance

可以从三个方面回答性能优化：

  • 项目架构
  • 项目开发
  • 项目部署

项目架构 ​

架构设计主要考虑两个方面的因素：

  • 协同开发
    • 多个开发人员能够有效地一起工作，减少冲突和重复工作
  • 模块解耦
    • 在设计和开发过程中，使各模块之间的依赖最小化

Service网络请求模块 ​

  • 对axios进行统一封装，然后对网络请求、错误处理、数据格式化进行统一的处理
  • 可以在services目录下为不同的页面或模块创建独立的文件，比如userService.js、homeService.js、loginService.js

Utils工具封装模块 ​

将项目中通用的工具函数封装在utlils目录下，比如日期格式化函数、数据处理函数等

Store状态管理模块 ​

  • 在vue项目中，可以通过pinia的模块化设计来管理状态
  • 每个页面或功能模块有自己的store模块

Webpack和Vite的优化 ​

  • 代码分割
  • 动态导入
  • Tree Shaking

使用版本控制和分支策略 ​

  • git flow工作流
  • 代码审查CR

其他方面 ​

  • CI/CD实现自动化部署
  • 文档和沟通

项目开发 ​

合理使用v-if和v-show ​

避免不必要的组件重渲染 ​

  • 比如使用key确保组件的唯一性，避免不必要的DOM更新

组件懒加载 ​

使用Vue的computed来缓存计算结果 ​

合理使用keep-alive ​

防抖和节流 ​

使用Web Workers ​

  • 将繁重计算任务移到web workers中，避免阻塞主线程，保持UI流畅性

避免内存泄漏 ​

  • 在组件销毁时清理定时器、事件监听器，闭包小心内存泄漏

使用现代图片格式和精灵图 ​

  • 使用webp、avif等格式减少图片文件大小，加快加载速度，对图片进行压缩处理
  • 精灵图的使用，页面只需要发送一次请求来加载这张大图，而不是每个小图标发送多个请求，可以显著地减少http请求的数量，降低网络开销

图片懒加载 ​

CSS选择器优化 ​

  • 使用简单有效的选择器，避免复杂的选择器链，提高渲染性能

避免回流和重绘 ​

  • 尽量减少DOM操作，使用批量更新，优化回流和重绘性能
  • 使用transform和opacity进行动画效果，避免触发回流

使用CSS动画 ​

  • 优先使用CSS动画而非js动画，提升性能

服务端渲染SSR ​

  • SSR是在服务器端预先渲染页面，并将完整的HTML发送到客户端
  • SSR是提高了首屏渲染速度，特别适用于SEO需求强的项目和需要快速加载的应用

第三方包按需引入 ​

  • 比如element-plus和antd

使用虚拟列表 ​

  • 在处理长列表时，使用虚拟滚动技术，只渲染可视区域的元素，提升性能

使用React.memo ​

类组件使用PureComponent，函数组件使用React.memo

使用 useCallback 和 useMemo ​

  • useCallback 用于缓存函数引用，避免子组件因为传入函数变化而重渲染。

  • useMemo用于缓存计算结果，避免每次渲染时都重新计算。

代码分割和懒加载 ​

通过 React.lazy 和 Suspense 实现动态加载组件，可以有效减少初始加载时间，提高页面的首屏性能

避免不必要的副作用 ​

确保 useEffect 中的依赖数组正确配置，避免不必要的副作用执行

项目部署 ​

CDN的使用和配置 ​

  • 通过将资源缓存到离用户更近的服务器上，CDN可以显著地减少资源加载时间，提升用户体验
  • 选择可靠的CDN提供商，比如阿里云、腾讯云
  • 配置构建工具（比如Webpack或Vite）输出静态资源的路径为CDN URL

首屏渲染速度优化 ​

  • 将首屏渲染所需的关键CSS内联到HTML中，减少CSS阻塞渲染的时间，也可以整合网络请求
  • 使用async或defer属性来异步加载js脚本，避免阻塞渲染

HTTP缓存策略 ​

  • HTTP缓存策略通过在客户端缓存静态资源，避免重复请求，减少服务器负载和页面加载时间
  • 根据文件的特性，设置强制缓存（Cache-Control和Expires），比如js文件、css文件等
  • 对于频繁更新的文件，使用协商缓存（Etag和Last-Modified），比如HTML页面经常变更

代码压缩和优化 ​

  • 去除多余空格、注释、代码缩短，使用TreeShaking

  • 使用TerserPlugin对js代码进行压缩

  • 使用mini-css-extract-plugin对CSS代码进行分离

  • 使用css-minimizer-webpack-plugin对CSS代码进行压缩

  • 使用splitChunks提取公共的包

  • 使用TinyPNG工具对图片进行压缩，减少图片文件的大小

  • 对于图标和简单的图形，可以使用SVG格式，这种格式不仅文件小，而且可以无损缩放

  • 服务器配置中开启gzip压缩来实现文件压缩

减少和优化资源请求 ​

  • 减少DNS查询：通过将对个资源托管在同一域名下，减少DNS查询的时间
    • 对于必须跨域的资源使用DNS预解析(<link rel="dns-prefetch" href="xxx.com">)
  • 通过异步加载或延迟加载（比如使用async或defer）来减少第三方脚本对页面加载速度的影响
  • 预加载和预获取
    • 使用<link rel="preload" href="xxx">来预加载关键资源
    • 使用<link rel="prefetch" href="xxx">来获取未来可能需要的资源