UniApp 微信小程序性能优化实战 - 记一次笔记应用开发优化历程

本文记录了在使用 UniApp 开发笔记应用小程序时遇到的性能问题及优化过程。通过与 AI 助手(cursor)的交互,一步步找到问题根源并解决。希望能给大家一些启发。

项目背景

最近在开发一个笔记应用小程序,使用 UniApp + Vue3 开发。随着功能不断增加,小程序包体积越来越大,加载速度也越来越慢。通过与 AI 助手(cursor)的交互,逐步发现并解决了这些问题。

遇到的问题

1. 包体积过大

• 首次预览时发现小程序包超过 2M
• 组件全量加载导致主包臃肿
• 静态资源未优化

2. 首页加载慢

• 数据请求过多(5个独立请求)
• 组件重复渲染
• 未使用缓存

3. 页面切换卡顿

• 页面未分包
• 组件预加载策略不当
• 数据未及时释放

优化方案

1. 开启组件按需注入

首先在 manifest.json 中配置微信小程序相关选项:

{
  "mp-weixin": {
    "appid": "",  // 小程序的 AppID
    "setting": {
      "urlCheck": false,      // 是否检查安全域名
      "es6": true,           // 是否启用 ES6 转 ES5
      "postcss": true,       // 是否启用 PostCSS
      "minified": true,      // 是否启用代码压缩
      "uglifyFileName": false,  // 是否混淆文件名
      "lazyCodeLoading": "requiredComponents"  // 开启组件按需注入
    },
    "usingComponents": true,    // 是否启用自定义组件
    "requiredComponents": [],   // 预加载的组件列表
    "lazyCodeLoading": "requiredComponents"  // 全局开启按需注入
  }
}

这些配置的作用:

1. 基础配置

• appid: 小程序的唯一标识,必须配置
• usingComponents: 启用自定义组件支持
• requiredComponents: 指定需要预加载的组件

2. 性能优化相关

• lazyCodeLoading: 开启组件按需注入,减少主包体积
• minified: 启用代码压缩,减小体积
• uglifyFileName: 是否混淆文件名(建议开发时关闭,方便调试)

3. 开发相关

• urlCheck: 开发时可关闭,方便使用本地服务器
• es6: 启用 ES6 转 ES5,提高兼容性
• postcss: 启用 CSS 预处理,支持新特性

这些配置对性能的影响:

1. 包体积优化

• 组件按需加载减少主包大小
• 代码压缩降低总体积
• 资源文件优化

2. 加载速度优化

• 预加载关键组件
• 按需加载非关键组件
• 减少不必要的转换

3. 开发体验优化

• 本地调试更方便
• 错误定位更准确
• 构建速度更快

在开发中遇到的问题及解决方案:

1. 组件加载问题

// 错误方式:全部预加载
"requiredComponents": ["*"]

// 正确方式:按需预加载
"requiredComponents": [
  "pages/index/components/stats",
  "pages/index/components/chart"
]

2. 开发环境配置

// 开发环境
"setting": {
  "urlCheck": false,
  "uglifyFileName": false
}

// 生产环境
"setting": {
  "urlCheck": true,
  "uglifyFileName": true
}

3. 自定义组件问题

// 必须开启自定义组件支持
"usingComponents": true,

// 使用 easycom 简化组件引入
"easycom": {
  "autoscan": true,
  "custom": {
    "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  }
}

2. 配置分包加载

在 pages.json 中配置:

{
  "pages": [
    // 主包页面
  ],
  "subPackages": [
    {
      "root": "pages/note",
      "pages": [
        "edit/edit",
        "detail/detail"
      ]
    },
    {
      "root": "pages/user",
      "pages": [
        "profile/profile",
        "settings/settings" 
      ]
    }
  ]
}

分包策略:

• 首页相关放主包
• 笔记编辑相关一个分包
• 用户中心相关一个分包

3. 优化数据加载

重构首页数据请求:

// 优化前:5个独立请求
const getUserInfo = async () => {
  const res = await api.user.info()
}
const getStats = async () => {
  const res = await api.note.stats() 
}
// ...5个请求

// 优化后:合并为1个请求
const loadDashboard = async () => {
  const res = await api.index.dashboard()
  // 一次请求获取所有数据
}

4. 使用缓存

// 缓存首页数据
const CACHE_KEY = 'dashboard_data'
const CACHE_TIME = 5 * 60 * 1000 // 5分钟

const loadData = async () => {
  // 读取缓存
  const cache = uni.getStorageSync(CACHE_KEY)
  if (cache && Date.now() - cache.time < CACHE_TIME) {
    return cache.data
  }
  
  // 请求新数据
  const res = await api.index.dashboard()
  
  // 写入缓存
  uni.setStorageSync(CACHE_KEY, {
    data: res.data,
    time: Date.now()
  })
  
  return res.data
}

优化效果

1. 包体积

• 主包从 2.3M 减少到 1.1M
• 分包大小控制在 500K 以内

2. 加载速度

• 首次启动快 50%
• 页面切换快 70%

3. 内存占用

• 峰值内存降低 40%
• 更少的内存泄漏

开发经验总结

1. 合理使用 AI 助手

• 描述问题要清晰
• 保持代码上下文
• 循序渐进地解决问题

2. 性能优化方法

• 提前规划分包
• 及时优化请求
• 合理使用缓存

3. 开发建议

• 组件按需加载
• 数据按需请求
• 及时清理内存

AI 助手(cursor)使用心得

在这个项目中,cursor 展现出了强大的代码理解和问题解决能力:

1. 精准定位问题

• 通过错误信息快速定位
• 结合上下文分析原因
• 提供可执行的解决方案

2. 代码重构建议

• 提供最佳实践参考
• 解释修改的原因
• 注意代码可维护性

3. 性能优化思路

• 从多个角度分析
• 循序渐进地优化
• 注重优化效果

结语

通过这次优化经历,不仅解决了项目中的性能问题,也体会到了 AI 辅助开发的强大之处。cursor 就像一个经验丰富的技术顾问,帮助我们:

1. 快速定位问题

2. 提供解决方案

3. 持续优化代码

4. 学习最佳实践

希望本文的经验分享能够帮助大家在 UniApp 小程序开发中少走弯路。同时也建议大家尝试使用 AI 助手来提升开发效率。

关于作者

如果本文章对您有所帮助，欢迎交流和探讨技术问题。

QQ： 313801120

更多文章： www.xiyueta.com/

希望能一起成长，共同探索更多开发技巧！