Uniapp 性能优化实战：减少首屏加载时间的 7 种有效方法

码上前端

于 2025-04-30 11:31:18 发布

阅读量1.2k

点赞数 35

分类专栏： uniapp 文章标签： vue.js javascript 前端 node.js 前端框架 uni-app 性能优化

本文链接：https://blog.csdn.net/qq_65243376/article/details/147628276

版权

uniapp 专栏收录该内容

20 篇文章

订阅专栏

前言：家人们，大家好！今天分享一篇文章给大家！要是文章对你有帮助，激发了你的灵感，

求个收藏 + 关注啦～后续还有超多惊喜，别错过！

一、分包加载：拆分主包体积

原理：UniApp 主包体积过大时，下载和解析耗时增加。通过分包将非首屏资源（如次级页面、图片库）分离，减少主包大小。
实践：

在 page.json 中配置分包：

{
  "subPackages": [
    {
      "root": "subpkg", // 分包根目录
      "pages": ["home/index", "about/index"], // 分包内页面
      "name": "subpkg" // 分包名称
    }
  ],
  "mainPages": ["pages/index/index"] // 首屏页面保留在主包
}

主包仅包含首屏必需的组件和逻辑，非首屏页面通过 uni.navigateTo({ url: '/subpkg/home/index' }) 跳转时异步加载。

二、静态资源优化：压缩 + CDN 加速

原理：图片、字体等静态资源占比高，压缩后可减少传输耗时，CDN 就近分发降低延迟。
实践：

图片压缩：使用工具（如 TinyPNG）压缩图片，或在构建时通过 uni-build 插件自动压缩：

// vue.config.js 配置 image-webpack-loader
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true }); // 开发环境跳过压缩
  }
};

CDN 替换：在 vue.config.js 中配置生产环境静态资源路径：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? 'https://your-cdn-domain.com/' : '/'
};

三、路由懒加载：延迟非首屏组件加载

原理：首屏路由直接加载，其他路由组件在跳转时动态加载，避免一次性加载所有组件。
实践：

在 page.json 中使用字符串路径代替 require 引用（UniApp 自动处理懒加载）：

{
  "pages": [
    { "path": "pages/index/index" }, // 首屏页面直接加载
    { "path": "pages/detail/index" } // 跳转时懒加载
  ]
}

复杂场景可手动控制懒加载（如条件路由）：

// 在逻辑中动态导入组件
const DetailPage = () => import('@/pages/detail/index.vue');
uni.navigateTo({ component: DetailPage });

四、减少首屏渲染节点：精简 DOM 结构

原理：首屏 DOM 节点过多会增加渲染树构建时间，导致白屏 / 加载动画延迟。
实践：

组件拆分：将首屏复杂组件拆分为基础组件，避免嵌套过深；
条件渲染：使用 v-if 替代 v-show 隐藏非首屏必需内容（如登录后的用户信息），减少初始渲染节点；
骨架屏占位：首屏加载时显示骨架屏（可通过 uni-skeleton 插件快速实现），提升用户感知：

<template>
  <view>
    <uni-skeleton v-if="!isLoaded" :rows="3" :cols="2" /> <!-- 骨架屏 -->
    <view v-else>真实内容</view>
  </view>
</template>
<script>
export default {
  data() { return { isLoaded: false }; },
  onLoad() {
    setTimeout(() => { this.isLoaded = true; }, 1000); // 模拟数据加载
  }
};
</script>

五、使用缓存：存储首屏数据与资源

原理：通过本地缓存（如 uni.setStorage）存储首屏所需的静态数据或资源路径，减少重复请求。
实践：

数据缓存：首次加载后存储接口数据，下次进入首屏时优先读取缓存：

// 加载数据时
uni.request({
  url: '/api/init-data',
  success: (res) => {
    uni.setStorageSync('initData', res.data); // 存储缓存
    this.renderData(res.data);
  }
});

// 下次加载时
const cachedData = uni.getStorageSync('initData');
if (cachedData) this.renderData(cachedData); // 先渲染缓存数据，再异步更新

资源缓存：通过 Cache-Control 头设置静态资源缓存策略，配合 CDN 长期缓存不变资源。

六、预加载：提前加载非首屏关键资源

原理：在首屏加载完成后，利用空闲时间预加载次级页面的组件或数据，减少后续跳转延迟。
实践：

组件预加载：在首屏页面的 onReady 钩子中预加载常用次级页面：

onReady() {
  // 预加载“我的”页面组件
  import('@/pages/mine/index.vue');
}

数据预加载：根据用户行为预判，提前加载可能访问的数据（如电商首屏预加载热门商品分类）。

七、服务端优化：接口合并与按需返回

原理：首屏可能依赖多个接口，合并请求或优化字段返回，减少网络耗时。
实践：

接口合并：将多个独立接口合并为一个批量接口（如通过服务端 merge 方法）：

// 合并前：多次请求
uni.request({ url: '/api/user' });
uni.request({ url: '/api/order' });

// 合并后：单次请求
uni.request({ url: '/api/init', data: { type: 'user,order' } });