2026年 跨端性能优化实战：React Native/uni-app/ 小程序 从踩坑到落地

2026年 跨端性能优化实战：React Native/uni-app/ 小程序 从踩坑到落地

前言

在之前的文章中，我们按照"基础优化 → 性能监控 → 框架优化 → 工程化管控 → 跨端优化"的顺序，逐步深入前端性能优化领域。前四篇文章分别介绍了通用的前端性能优化策略、性能监控体系、框架级的性能优化技巧以及工程化全流程管控，为我们打下了坚实的基础。

但随着移动互联网的发展，跨端开发已成为前端的主流趋势，而跨端性能问题与Web端有很大差异，无法直接套用Web端的优化方案。作为一名前端架构师，我曾遇到过这样的挑战：

• 一个React Native电商应用，商品列表滚动时卡顿严重，即使做了Web端常用的代码分割，问题依然存在
• 一个uni-app企业应用，页面跳转时白屏时间过长，影响用户体验
• 一个小程序表单页面，提交时卡顿甚至崩溃，用户投诉不断

本文作为系列的第五篇，将基于前四篇的优化逻辑，分享跨端特有的性能优化技巧，帮助你解决这些高频痛点，构建更快、更流畅的跨端应用。

一、通用跨端优化：复用Web端逻辑，适配跨端场景

1. 跨端包体积优化深度解析

1.1 React Native 分包与体积优化

React Native 包体积优化策略：

实战配置：

// app.json
{
"expo": {
"name": "MyApp",
"slug": "my-app",
"version": "1.0.0",
// … 其他配置
"assetBundlePatterns": [
"**/*"
],
"plugins": [
[
"expo-router",
{
"origin": "https://myapp.com"
}
],
// 资源优化插件
[
"expo-optimize",
{
"images": true,
"fonts": true
}
]
]
}
}

// babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// 按需加载插件
['babel-plugin-import', {
libraryName: '@ant-design/react-native',
libraryDirectory: 'es',
style: false
}],
// 移除未使用的代码
'react-native-paper/babel',
// 代码压缩
['babel-plugin-transform-remove-console', {
exclude: ['error', 'warn']
}]
]
};
};

// metro.config.js
const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 优化 Metro 配置
config.resolver.resolveRequest = (context, moduleName, platform) => {
// 自定义解析逻辑，优化依赖解析
return context.resolveRequest(context, moduleName, platform);
};

config.transformer = {
…config.transformer,
babelTransformerPath: require.resolve('metro-react-native-babel-transformer'),
// 优化 transformer 配置
minify: true,
minifyOptions: {
compress: {
drop_console: true
}
}
};

module.exports = config;

优化效果：

1.2 uni-app 主包瘦身与性能优化

uni-app 包体积优化策略：

实战配置：

// vue.config.js
const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
configureWebpack: {
plugins: [
// 移除console
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 10,
minChunkSize: 100
}),
// 包体积分析
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: 'bundle-report.html',
openAnalyzer: false
})
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
name: 'vendor',
test: /[\\\\/]node_modules[\\\\/]/,
chunks: 'all',
priority: 10,
// 分离大型依赖
enforce: true
},
common: {
name: 'common',
minChunks: 2,
chunks: 'all',
priority: 5,
reuseExistingChunk: true
}
}
}
}
},
// 分包配置
chainWebpack: config => {
// 压缩 HTML
config.plugin('html').tap(args => {
args[0].minify = {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
};
return args;
});

// 资源优化
config.module
.rule('images')
.use('url-loader')
.loader('url-loader')
.tap(options => {
return {
limit: 8192,
fallback: {
loader: 'file-loader',
options: {
name: 'static/img/[name].[hash:8].[ext]'
}
}
};
});
}
};

1.3 小程序分包加载与启动优化

小程序包体积优化策略：

实战配置：

// app.json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"subpackages": [
{
"root": "packageA",
"name": "pack1",
"pages": [
"pages/cat/cat",
"pages/dog/dog"
],
"independent": true
},
{
"root": "packageB",
"pages": [
"pages/apple/apple",
"pages/banana/banana"
]
}
],
"preloadRule": {
"pages/index/index": {
"network": "all",
"packages": ["pack1"],
"preloadStorage": true
}
},
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}

// 小程序启动优化
// app.js
App({
onLaunch(options) {
// 1. 启动时间监控
this.startTime = Date.now();

// 2. 分包预下载
this.preloadSubpackages();

// 3. 第三方 SDK 懒加载
this.lazyLoadSDKs();

// 4. 数据预加载
this.preloadData();
},

// 分包预下载
preloadSubpackages() {
wx.preloadSubpackage({
root: 'packageA',
success: function() {
console.log('分包预下载成功');
},
fail: function() {
console.log('分包预下载失败');
}
});
},

// 第三方 SDK 懒加载
lazyLoadSDKs() {
// 延迟加载统计 SDK
setTimeout(() => {
this.loadAnalyticsSDK();
}, 1000);

// 延迟加载地图 SDK
setTimeout(() => {
this.loadMapSDK();
}, 2000);
},

// 数据预加载
preloadData() {
// 预加载首页数据
wx.request({
url: 'https://api.example.com/home',
success: (res) => {
// 存储到缓存
wx.setStorageSync('homeData', res.data);
}
});
}
});

优化效果：

2. 跨端缓存策略深度优化

2.1 React Native 多级缓存方案

缓存策略：

实战实现：

// utils/cache.js
import AsyncStorage from '@react-native-async-storage/async-storage';

// 内存缓存类（LRU 算法）
class MemoryCache {
constructor(maxSize = 100) {
this.cache = new Map();
this.maxSize = maxSize;
}

get(key) {
if (this.cache.has(key)) {
// 移动到最前面，表示最近使用
const value = this.cache.get(key);
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
return null;
}

set(key, value) {
if (this.cache.size >= this.maxSize) {
// 删除最久未使用的项
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
this.cache.set(key, value);
}

remove(key) {
this.cache.delete(key);
}

clear() {
this.cache.clear();
}
}

// 全局内存缓存实例
const memoryCache = new MemoryCache();

class CacheManager {
// 存储数据
static async set(key, value, expiration = 24 * 60 * 60 * 1000) {
try {
const item = {
value,
expiry: Date.now() + expiration
};

// 先存到内存缓存
memoryCache.set(key, item);

// 再存到磁盘缓存
await AsyncStorage.setItem(key, JSON.stringify(item));
return true;
} catch (error) {
console.error('Cache set error:', error);
return false;
}
}

// 获取数据
static async get(key) {
try {
// 先从内存缓存获取
let item = memoryCache.get(key);

if (!item) {
// 内存缓存没有，从磁盘缓存获取
const itemStr = await AsyncStorage.getItem(key);
if (!itemStr) return null;

item = JSON.parse(itemStr);
// 更新到内存缓存
memoryCache.set(key, item);
}

// 检查是否过期
if (Date.now() > item.expiry) {
await this.remove(key);
return null;
}

return item.value;
} catch (error) {
console.error('Cache get error:', error);
return null;
}
}

// 清除缓存
static async remove(key) {
try {
// 从内存缓存清除
memoryCache.remove(key);
// 从磁盘缓存清除
await AsyncStorage.removeItem(key);
return true;
} catch (error) {
console.error('Cache remove error:', error);
return false;
}
}

// 清除所有缓存
static async clear() {
try {
// 清除内存缓存
memoryCache.clear();
// 清除磁盘缓存
await AsyncStorage.clear();
return true;
} catch (error) {
console.error('Cache clear error:', error);
return false;
}
}

// 获取缓存大小
static async getCacheSize() {
try {
const keys = await AsyncStorage.getAllKeys();
let totalSize = 0;

for (const key of keys) {
const value = await AsyncStorage.getItem(key);
if (value) {
totalSize += value.length;
}
}

return totalSize;
} catch (error) {
console.error('Get cache size error:', error);
return 0;
}
}

// 缓存预热
static async preload(keys, dataMap) {
try {
for (const key of keys) {
if (dataMap[key]) {
await this.set(key, dataMap[key]);
}
}
return true;
} catch (error) {
console.error('Cache preload error:', error);
return false;
}
}
}

// 使用示例
export default CacheManager;

2.2 小程序 Storage 优化与安全

优化策略：

实战实现：

// utils/storage.js
class StorageManager {
// 存储数据（带过期时间）
static set(key, value, expire = 24 * 60 * 60 * 1000) {
try {
const item = {
value,
expire: Date.now() + expire,
timestamp: Date.now()
};
wx.setStorageSync(key, item);
return true;
} catch (error) {
console.error('Storage set error:', error);
return false;
}
}

// 获取数据
static get(key) {
try {
const item = wx.getStorageSync(key);
if (!item) return null;

if (Date.now() > item.expire) {
wx.removeStorageSync(key);
return null;
}

return item.value;
} catch (error) {
console.error('Storage get error:', error);
return null;
}
}

// 批量获取
static getBatch(keys) {
try {
const result = {};
const items = wx.getStorageSync(keys);

keys.forEach((key, index) => {
const item = items[index];
if (item) {
if (Date.now() > item.expire) {
wx.removeStorageSync(key);
result[key] = null;
} else {
result[key] = item.value;
}
} else {
result[key] = null;
}
});

return result;
} catch (error) {
console.error('Storage getBatch error:', error);
return {};
}
}

// 批量存储
static setBatch(dataMap, expire = 24 * 60 * 60 * 1000) {
try {
const batch = {};
const expireTime = Date.now() + expire;

Object.keys(dataMap).forEach(key => {
batch[key] = {
value: dataMap[key],
expire: expireTime,
timestamp: Date.now()
};
});

wx.setStorageSync(batch);
return true;
} catch (error) {
console.error('Storage setBatch error:', error);
return false;
}
}

// 清除缓存
static remove(key) {
try {
wx.removeStorageSync(key);
return true;
} catch (error) {
console.error('Storage remove error:', error);
return false;
}
}

// 清除过期缓存
static clearExpired() {
try {
const keys = wx.getStorageInfoSync().keys;
const now = Date.now();

keys.forEach(key => {
try {
const item = wx.getStorageSync(key);
if (item && item.expire && now > item.expire) {
wx.removeStorageSync(key);
}
} catch (error) {
console.error('Clear expired error:', error);
}
});

return true;
} catch (error) {
console.error('Clear expired error:', error);
return false;
}
}

// 获取存储信息
static getInfo() {
try {
return wx.getStorageInfoSync();
} catch (error) {
console.error('Get storage info error:', error);
return null;
}
}
}

// 使用示例
module.exports = StorageManager;

2.3 uni-app 请求缓存与网络优化

优化策略：

实战实现：

// utils/request.js
import StorageManager from './storage';

class RequestManager {
constructor() {
this.baseURL = 'https://api.example.com';
this.timeout = 10000;
this.retryCount = 3;
this.retryDelay = 1000;
}

// 带缓存的请求
async requestWithCache(options) {
const { url, method = 'GET', data = {}, cache = false, cacheTime = 5 * 60 * 1000, headers = {} } = options;

// 生成缓存key
const cacheKey = `api_${url}_${JSON.stringify(data)}_${method}`;

// 如果启用缓存且有缓存数据，直接返回
if (cache) {
const cachedData = StorageManager.get(cacheKey);
if (cachedData) {
return cachedData;
}
}

// 检查网络状态
const networkType = uni.getNetworkTypeSync().networkType;
if (networkType === 'none') {
throw new Error('网络连接失败');
}

// 带重试机制的请求
let lastError;
for (let i = 0; i < this.retryCount; i++) {
try {
const response = await uni.request({
url: this.baseURL + url,
method,
data,
timeout: this.timeout,
headers: {
'Content-Type': 'application/json',
…headers
}
});

const result = response[1];

if (result.statusCode >= 200 && result.statusCode < 300) {
// 如果启用缓存，存储数据
if (cache) {
StorageManager.set(cacheKey, result.data, cacheTime);
}
return result.data;
} else {
lastError = new Error(`HTTP error! status: ${result.statusCode}`);
}
} catch (error) {
lastError = error;
if (i < this.retryCount – 1) {
// 重试延迟
await new Promise(resolve => setTimeout(resolve, this.retryDelay * (i + 1)));
}
}
}

throw lastError;
}

// GET 请求
get(url, data = {}, options = {}) {
return this.requestWithCache({
url,
method: 'GET',
data,
…options
});
}

// POST 请求
post(url, data = {}, options = {}) {
return this.requestWithCache({
url,
method: 'POST',
data,
…options
});
}

// 批量请求
async batchRequest(requests) {
try {
const promises = requests.map(req => {
return this.requestWithCache(req);
});

const results = await Promise.all(promises);
return results;
} catch (error) {
console.error('Batch request error:', error);
throw error;
}
}
}

// 使用示例
export default new RequestManager();

3. 跨端监控体系深度解析

3.1 多维度指标采集系统

监控指标体系：

实战实现：

// utils/monitor.js
class PerformanceMonitor {
constructor() {
this.metrics = [];
this.sessionId = this.generateSessionId();
this.startTime = Date.now();
}

// 生成会话ID
generateSessionId() {
return 'session_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
}

// 采集启动时间
collectStartupTime() {
const platform = this.getPlatform();

if (platform === 'Web' && typeof performance !== 'undefined') {
const navigationStart = performance.timing.navigationStart;
const loadEventEnd = performance.timing.loadEventEnd;
const startupTime = loadEventEnd – navigationStart;

this.metrics.push({
name: 'startupTime',
value: startupTime,
timestamp: Date.now(),
platform: platform
});
} else if (platform === 'ReactNative') {
// React Native 启动时间采集
const startupTime = Date.now() – this.startTime;
this.metrics.push({
name: 'startupTime',
value: startupTime,
timestamp: Date.now(),
platform: platform
});
} else if (platform === 'WeChatMiniProgram') {
// 小程序启动时间采集
const startupTime = Date.now() – this.startTime;
this.metrics.push({
name: 'startupTime',
value: startupTime,
timestamp: Date.now(),
platform: platform
});
} else if (platform === 'UniApp') {
// uni-app 启动时间采集
const startupTime = Date.now() – this.startTime;
this.metrics.push({
name: 'startupTime',
value: startupTime,
timestamp: Date.now(),
platform: platform
});
}
}

// 采集页面切换时间
collectPageTransitionTime() {
const platform = this.getPlatform();

if (platform === 'ReactNative') {
// RN 页面切换时间采集
this.setupRNPageTransitionMonitor();
} else if (platform === 'WeChatMiniProgram') {
// 小程序页面切换时间采集
this.setupMiniProgramPageTransitionMonitor();
} else if (platform === 'UniApp') {
// uni-app 页面切换时间采集
this.setupUniAppPageTransitionMonitor();
}
}

// React Native 页面切换监控
setupRNPageTransitionMonitor() {
// 这里需要根据具体的导航库实现
// 例如使用 React Navigation 的事件系统
console.log('RN page transition monitor setup');
}

// 小程序页面切换监控
setupMiniProgramPageTransitionMonitor() {
if (typeof wx !== 'undefined' && wx.onAppRoute) {
wx.onAppRoute((res) => {
const startTime = Date.now();
// 监控页面切换
setTimeout(() => {
const transitionTime = Date.now() – startTime;
this.metrics.push({
name: 'pageTransitionTime',
value: transitionTime,
from: res.from,
to: res.to,
timestamp: Date.now(),
platform: 'WeChatMiniProgram'
});
}, 100);
});
}
}

// uni-app 页面切换监控
setupUniAppPageTransitionMonitor() {
if (typeof uni !== 'undefined' && uni.navigateTo) {
const originalNavigateTo = uni.navigateTo;
uni.navigateTo = function(options) {
const startTime = Date.now();
originalNavigateTo({
…options,
success: function(res) {
setTimeout(() => {
const transitionTime = Date.now() – startTime;
PerformanceMonitor.instance.metrics.push({
name: 'pageTransitionTime',
value: transitionTime,
to: options.url,
timestamp: Date.now(),
platform: 'UniApp'
});
if (options.success) {
options.success(res);
}
}, 100);
}
});
};
}
}

// 采集网络请求耗时
collectNetworkMetrics() {
const platform = this.getPlatform();

if (platform === 'Web' && typeof window !== 'undefined') {
// Web 网络监控
this.setupWebNetworkMonitor();
} else if (platform === 'ReactNative') {
// RN 网络监控
this.setupRNNetworkMonitor();
} else if (platform === 'WeChatMiniProgram') {
// 小程序网络监控
this.setupMiniProgramNetworkMonitor();
} else if (platform === 'UniApp') {
// uni-app 网络监控
this.setupUniAppNetworkMonitor();
}
}

// Web 网络监控
setupWebNetworkMonitor() {
const originalFetch = window.fetch;
window.fetch = async function(…args) {
const startTime = Date.now();
try {
const response = await originalFetch(…args);
const endTime = Date.now();
const url = args[0];

PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: typeof url === 'string' ? url : url.toString(),
status: response.status,
timestamp: Date.now(),
platform: 'Web'
});

return response;
} catch (error) {
const endTime = Date.now();
const url = args[0];

PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: typeof url === 'string' ? url : url.toString(),
status: 'error',
error: error.message,
timestamp: Date.now(),
platform: 'Web'
});

throw error;
}
};
}

// 小程序网络监控
setupMiniProgramNetworkMonitor() {
if (typeof wx !== 'undefined' && wx.request) {
const originalRequest = wx.request;
wx.request = function(options) {
const startTime = Date.now();
const originalSuccess = options.success;
const originalFail = options.fail;

options.success = function(res) {
const endTime = Date.now();
PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: options.url,
status: res.statusCode,
timestamp: Date.now(),
platform: 'WeChatMiniProgram'
});
if (originalSuccess) {
originalSuccess(res);
}
};

options.fail = function(err) {
const endTime = Date.now();
PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: options.url,
status: 'error',
error: err.errMsg,
timestamp: Date.now(),
platform: 'WeChatMiniProgram'
});
if (originalFail) {
originalFail(err);
}
};

return originalRequest(options);
};
}
}

// uni-app 网络监控
setupUniAppNetworkMonitor() {
if (typeof uni !== 'undefined' && uni.request) {
const originalRequest = uni.request;
uni.request = function(options) {
const startTime = Date.now();
const originalSuccess = options.success;
const originalFail = options.fail;

options.success = function(res) {
const endTime = Date.now();
PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: options.url,
status: res.statusCode,
timestamp: Date.now(),
platform: 'UniApp'
});
if (originalSuccess) {
originalSuccess(res);
}
};

options.fail = function(err) {
const endTime = Date.now();
PerformanceMonitor.instance.metrics.push({
name: 'networkRequest',
value: endTime – startTime,
url: options.url,
status: 'error',
error: err.errMsg,
timestamp: Date.now(),
platform: 'UniApp'
});
if (originalFail) {
originalFail(err);
}
};

return originalRequest(options);
};
}
}

// 无痕上报
report() {
if (this.metrics.length === 0) return;

const data = {
metrics: this.metrics,
sessionId: this.sessionId,
platform: this.getPlatform(),
timestamp: Date.now(),
appVersion: this.getAppVersion()
};

// 批量上报，减少网络请求
const batchSize = 50;
const batches = [];
for (let i = 0; i < data.metrics.length; i += batchSize) {
batches.push({
…data,
metrics: data.metrics.slice(i, i + batchSize)
});
}

// 根据平台选择上报方式
const platform = this.getPlatform();
batches.forEach(batch => {
if (platform === 'WeChatMiniProgram' && typeof wx !== 'undefined' && wx.request) {
// 小程序
wx.request({
url: 'https://monitor.example.com/api/report',
method: 'POST',
data: batch,
success: () => {
// 清理已上报的指标
this.metrics = this.metrics.slice(batchSize);
}
});
} else if (platform === 'UniApp' && typeof uni !== 'undefined' && uni.request) {
// uni-app
uni.request({
url: 'https://monitor.example.com/api/report',
method: 'POST',
data: batch,
success: () => {
this.metrics = this.metrics.slice(batchSize);
}
});
} else if (typeof fetch !== 'undefined') {
// React Native 或 Web
fetch('https://monitor.example.com/api/report', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(batch)
}).then(() => {
this.metrics = this.metrics.slice(batchSize);
});
}
});
}

// 获取平台信息
getPlatform() {
if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
return 'ReactNative';
} else if (typeof wx !== 'undefined' && wx.getApp) {
return 'WeChatMiniProgram';
} else if (typeof uni !== 'undefined' && uni.navigateTo) {
return 'UniApp';
} else if (typeof window !== 'undefined') {
return 'Web';
}
return 'Unknown';
}

// 获取应用版本
getAppVersion() {
const platform = this.getPlatform();
if (platform === 'WeChatMiniProgram' && typeof wx !== 'undefined') {
const app = getApp();
return app.version || 'unknown';
} else if (platform === 'UniApp' && typeof uni !== 'undefined') {
const info = uni.getAppInfo();
return info.version || 'unknown';
}
return 'unknown';
}

// 初始化监控
init() {
this.collectStartupTime();
this.collectPageTransitionTime();
this.collectNetworkMetrics();

// 定期上报
setInterval(() => {
this.report();
}, 60000); // 1分钟上报一次
}
}

// 单例模式
PerformanceMonitor.instance = new PerformanceMonitor();
export default PerformanceMonitor.instance;

// 使用示例
// import monitor from './utils/monitor';
// monitor.init();

3.2 性能分析与告警系统

性能分析工具：

告警系统：

// utils/alert.js
class AlertSystem {
constructor() {
this.thresholds = {
startupTime: 3000, // 3秒
pageTransitionTime: 1000, // 1秒
networkRequest: 2000, // 2秒
memoryUsage: 300, // 300MB
errorRate: 0.05 // 5%
};
}

// 检查性能指标
checkMetrics(metrics) {
const alerts = [];

metrics.forEach(metric => {
if (this.thresholds[metric.name] && metric.value > this.thresholds[metric.name]) {
alerts.push({
type: 'performance',
name: metric.name,
value: metric.value,
threshold: this.thresholds[metric.name],
timestamp: metric.timestamp,
platform: metric.platform
});
}
});

return alerts;
}

// 发送告警
sendAlert(alert) {
// 根据告警级别选择不同的通知方式
if (alert.type === 'performance') {
// 性能告警
this.sendPerformanceAlert(alert);
} else if (alert.type === 'error') {
// 错误告警
this.sendErrorAlert(alert);
}
}

// 发送性能告警
sendPerformanceAlert(alert) {
console.log('Performance alert:', alert);
// 这里可以集成邮件、短信、微信通知等
}

// 发送错误告警
sendErrorAlert(alert) {
console.log('Error alert:', alert);
// 这里可以集成错误监控平台
}
}

// 使用示例
export default new AlertSystem();

二、React Native 优化：解决卡顿与内存问题

1. 虚拟列表：FlashList 替代 FlatList

// components/VirtualList.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlashList } from '@shopify/flash-list';

const VirtualList = ({ data, renderItem, keyExtractor, estimatedItemSize = 100 }) => {
return (
<FlashList
data={data}
renderItem={renderItem}
keyExtractor={keyExtractor}
estimatedItemSize={estimatedItemSize}
// 性能优化配置
removeClippedSubviews={true}
maxToRenderPerBatch={10}
windowSize={10}
initialNumToRender={5}
testID="virtual-list"
/>
);
};

// 使用示例
const ProductList = ({ products }) => {
const renderProduct = ({ item }) => (
<View style={styles.productItem}>
<Text style={styles.productName}>{item.name}</Text>
<Text style={styles.productPrice}>${item.price}</Text>
</View>
);

return (
<VirtualList
data={products}
renderItem={renderProduct}
keyExtractor={(item) => item.id}
estimatedItemSize={80}
/>
);
};

const styles = StyleSheet.create({
productItem: {
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0'
},
productName: {
fontSize: 16,
fontWeight: '500'
},
productPrice: {
fontSize: 14,
color: '#666',
marginTop: 4
}
});

export default ProductList;

2. 桥接优化：减少 JS 和原生通信

// utils/bridgeOptimizer.js
class BridgeOptimizer {
constructor() {
this.queue = [];
this.isProcessing = false;
this.batchInterval = 100; // 批处理间隔
}

// 批量处理原生调用
batchNativeCall(method, params) {
return new Promise((resolve, reject) => {
this.queue.push({ method, params, resolve, reject });

if (!this.isProcessing) {
this.processQueue();
}
});
}

// 处理队列
processQueue() {
this.isProcessing = true;

setTimeout(() => {
if (this.queue.length > 0) {
const batch = […this.queue];
this.queue = [];

// 批量调用原生方法
this.callNativeBatch(batch).then(results => {
batch.forEach((item, index) => {
item.resolve(results[index]);
});
}).catch(error => {
batch.forEach(item => {
item.reject(error);
});
}).finally(() => {
this.isProcessing = false;
if (this.queue.length > 0) {
this.processQueue();
}
});
} else {
this.isProcessing = false;
}
}, this.batchInterval);
}

// 调用原生批处理方法
callNativeBatch(batch) {
return new Promise((resolve, reject) => {
// 这里需要原生实现批处理方法
// 示例：NativeModules.BatchProcessor.processBatch(batch, (results) => {
// resolve(results);
// }, (error) => {
// reject(error);
// });

// 模拟实现
setTimeout(() => {
const results = batch.map(() => ({ success: true }));
resolve(results);
}, 50);
});
}
}

// 使用示例
export default new BridgeOptimizer();

3. 渲染优化：避免过度 re-render

// components/OptimizedComponent.js
import React, { memo, useCallback, useMemo } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

// 纯展示组件使用 memo
const ItemComponent = memo(({ item, onPress }) => {
console.log('ItemComponent rendered:', item.id);

return (
<TouchableOpacity style={styles.item} onPress={() => onPress(item)}>
<Text style={styles.itemText}>{item.name}</Text>
</TouchableOpacity>
);
});

const OptimizedList = ({ items, onItemPress }) => {
// 使用 useCallback 缓存回调函数
const handleItemPress = useCallback((item) => {
onItemPress(item);
}, [onItemPress]);

// 使用 useMemo 缓存计算结果
const renderedItems = useMemo(() => {
return items.map(item => (
<ItemComponent
key={item.id}
item={item}
onPress={handleItemPress}
/>
));
}, [items, handleItemPress]);

return (
<View style={styles.container}>
{renderedItems}
</View>
);
};

const styles = StyleSheet.create({
container: {
flex: 1
},
item: {
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0'
},
itemText: {
fontSize: 16
}
});

export default OptimizedList;

三、uni-app 优化：解决跳转卡顿与加载慢问题

1. 组件懒加载

// components/LazyComponent.vue
<template>
<view v–if="loaded" class="lazy-component">
<slot></slot>
</view>
<view v–else class="loading">
<text>加载中…</text>
</view>
</template>

<script>
export default {
name: 'LazyComponent',
data() {
return {
loaded: false
};
},
mounted() {
// 组件挂载后延迟加载
setTimeout(() => {
this.loaded = true;
}, 100);
}
};
</script>

<style scoped>
.lazy–component {
width: 100%;
}

.loading {
width: 100%;
height: 200rpx;
display: flex;
align–items: center;
justify–content: center;
background–color: #f5f5f5;
}
</style>

// 使用示例
<template>
<view class="page">
<h1>首页</h1>
<lazy–component>
<heavy–component :data="largeData" />
</lazy–component>
</view>
</template>

<script>
import LazyComponent from '@/components/LazyComponent.vue';
// 动态导入重型组件
const HeavyComponent = () => import('@/components/HeavyComponent.vue');

export default {
components: {
LazyComponent,
HeavyComponent
},
data() {
return {
largeData: []
};
},
mounted() {
// 模拟加载大数据
this.loadData();
},
methods: {
loadData() {
// 加载数据
}
}
};
</script>

2. 原生插件替代 H5 插件

// utils/nativePlugins.js
class NativePluginManager {
// 选择图片
static async chooseImage(options = {}) {
const defaultOptions = {
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera']
};

const finalOptions = { …defaultOptions, …options };

return new Promise((resolve, reject) => {
// 优先使用原生插件
if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {
// 使用原生选择图片
uni.chooseImage({
…finalOptions,
success: (res) => {
resolve(res);
},
fail: (err) => {
reject(err);
}
});
} else {
// H5 端降级方案
console.log('Using H5 image picker');
// H5 实现
}
});
}

// 扫码
static async scanCode(options = {}) {
return new Promise((resolve, reject) => {
if (uni.getSystemInfoSync().platform === 'ios' || uni.getSystemInfoSync().platform === 'android') {
// 使用原生扫码
uni.scanCode({
…options,
success: (res) => {
resolve(res);
},
fail: (err) => {
reject(err);
}
});
} else {
// H5 端降级方案
console.log('Using H5 scanner');
// H5 实现
}
});
}
}

export default NativePluginManager;

3. 页面预加载策略

// utils/preload.js
class PreloadManager {
constructor() {
this.preloadedPages = new Set();
}

// 预加载页面
preloadPage(url) {
if (this.preloadedPages.has(url)) {
console.log('Page already preloaded:', url);
return;
}

console.log('Preloading page:', url);

// uni-app 预加载
if (typeof uni !== 'undefined' && uni.createInterceptor) {
// 使用 uni-app 的预加载机制
uni.preloadPage({
url: url
});
}
// 小程序预加载
else if (typeof wx !== 'undefined' && wx.createSelectorQuery) {
// 小程序预加载实现
console.log('Mini program preload');
}

this.preloadedPages.add(url);
}

// 批量预加载
preloadPages(urls) {
urls.forEach(url => {
this.preloadPage(url);
});
}

// 清除预加载
clearPreload(url) {
if (this.preloadedPages.has(url)) {
this.preloadedPages.delete(url);
console.log('Cleared preload for:', url);
}
}

// 清除所有预加载
clearAllPreloads() {
this.preloadedPages.forEach(url => {
this.clearPreload(url);
});
this.preloadedPages.clear();
}
}

// 使用示例
export default new PreloadManager();

四、小程序优化：解决启动慢与提交卡顿问题

1. 启动速度优化

// app.js
App({
onLaunch(options) {
// 1. 分包预下载
this.preloadSubpackages();

// 2. 第三方 SDK 懒加载
this.lazyLoadSDKs();

// 3. 数据预加载
this.preloadData();
},

// 分包预下载
preloadSubpackages() {
// 预下载商品详情页分包
wx.preloadSubpackage({
root: 'packageA',
success: function() {
console.log('分包预下载成功');
},
fail: function() {
console.log('分包预下载失败');
}
});
},

// 第三方 SDK 懒加载
lazyLoadSDKs() {
// 延迟加载统计 SDK
setTimeout(() => {
this.loadAnalyticsSDK();
}, 1000);

// 延迟加载地图 SDK
setTimeout(() => {
this.loadMapSDK();
}, 2000);
},

// 加载统计 SDK
loadAnalyticsSDK() {
console.log('Loading analytics SDK');
// 实际的 SDK 加载代码
},

// 加载地图 SDK
loadMapSDK() {
console.log('Loading map SDK');
// 实际的 SDK 加载代码
},

// 数据预加载
preloadData() {
// 预加载首页数据
wx.request({
url: 'https://api.example.com/home',
success: (res) => {
// 存储到缓存
wx.setStorageSync('homeData', res.data);
}
});
}
});

2. setData 优化：批量更新

// utils/setDataOptimizer.js
class SetDataOptimizer {
constructor(pageInstance) {
this.page = pageInstance;
this.dataQueue = {};
this.timer = null;
this.batchInterval = 50; // 批处理间隔
}

// 批量 setData
setData(data) {
// 将数据加入队列
Object.assign(this.dataQueue, data);

// 清除之前的定时器
if (this.timer) {
clearTimeout(this.timer);
}

// 设置新的定时器
this.timer = setTimeout(() => {
this.flush();
}, this.batchInterval);
}

// 立即执行 setData
flush() {
if (Object.keys(this.dataQueue).length > 0) {
this.page.setData({ …this.dataQueue });
this.dataQueue = {};
}
}

// 清理
clear() {
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
this.dataQueue = {};
}
}

// 使用示例
// 在页面 onLoad 中初始化
// Page({
// onLoad() {
// this.dataOptimizer = new SetDataOptimizer(this);
// },
//
// // 使用批量更新
// updateMultipleData() {
// this.dataOptimizer.setData({
// list: newList,
// loading: false,
// page: this.data.page + 1
// });
// }
// });

export default SetDataOptimizer;

3. 自定义组件缓存：类似 Vue keep-alive

// components/CacheComponent/index.js
const cache = new Map();

Component({
behaviors: [],
properties: {
// 组件唯一标识
cacheKey: {
type: String,
value: ''
},
// 是否启用缓存
useCache: {
type: Boolean,
value: true
}
},

data: {},

lifetimes: {
attached() {
if (this.properties.useCache && this.properties.cacheKey) {
// 尝试从缓存中恢复数据
const cachedData = cache.get(this.properties.cacheKey);
if (cachedData) {
console.log('Restoring from cache:', this.properties.cacheKey);
this.setData(cachedData);
}
}
},

detached() {
if (this.properties.useCache && this.properties.cacheKey) {
// 缓存组件数据
console.log('Caching component data:', this.properties.cacheKey);
cache.set(this.properties.cacheKey, this.data);
}
}
},

methods: {
// 清除缓存
clearCache() {
if (this.properties.cacheKey) {
cache.delete(this.properties.cacheKey);
console.log('Cache cleared:', this.properties.cacheKey);
}
}
}
});

// 使用示例
// <cache-component cache-key="product-list" use-cache="true">
// <view>{{ productList }}</view>
// </cache-component>

五、真实案例分析

1. RN 电商列表从 “滚动卡顿” 到 “丝滑”

问题描述

• 一个 React Native 电商应用，商品列表页滚动时卡顿严重
• 列表包含 1000+ 商品，每个商品有图片、标题、价格等信息
• 滚动时 CPU 使用率高达 80%，内存占用持续上升

根因分析

解决方案

代码实现

// components/OptimizedProductList.js
import React, { useCallback, useMemo } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import FastImage from 'react-native-fast-image';

const ProductItem = React.memo(({ product, onPress }) => {
return (
<View style={styles.productItem} onPress={() => onPress(product)}>
<FastImage
source={{ uri: product.image }}
style={styles.productImage}
resizeMode={FastImage.resizeMode.contain}
priority={FastImage.priority.low}
/>
<View style={styles.productInfo}>
<Text style={styles.productName} numberOfLines={2}>
{product.name}
</Text>
<Text style={styles.productPrice}>${product.price}</Text>
</View>
</View>
);
});

const OptimizedProductList = ({ products, onProductPress }) => {
const handleProductPress = useCallback((product) => {
onProductPress(product);
}, [onProductPress]);

const renderProduct = useCallback(({ item }) => (
<ProductItem product={item} onPress={handleProductPress} />
), [handleProductPress]);

const keyExtractor = useCallback((item) => item.id, []);

return (
<FlashList
data={products}
renderItem={renderProduct}
keyExtractor={keyExtractor}
estimatedItemSize={120}
removeClippedSubviews={true}
maxToRenderPerBatch={10}
windowSize={10}
initialNumToRender={5}
testID="optimized-product-list"
/>
);
};

const styles = StyleSheet.create({
productItem: {
flexDirection: 'row',
padding: 16,
borderBottomWidth: 1,
borderBottomColor: '#e0e0e0'
},
productImage: {
width: 80,
height: 80,
marginRight: 12
},
productInfo: {
flex: 1,
justifyContent: 'center'
},
productName: {
fontSize: 16,
marginBottom: 8
},
productPrice: {
fontSize: 18,
fontWeight: 'bold',
color: '#ff6b6b'
}
});

export default OptimizedProductList;

优化效果

2. 小程序表单页面从 “提交卡顿” 到 “瞬时响应”

问题描述

• 一个小程序表单页面，包含 20+ 表单项
• 提交时卡顿 3-5 秒，严重影响用户体验
• 部分用户反馈提交时页面崩溃

根因分析

解决方案

代码实现

// pages/form/index.js
import SetDataOptimizer from '../../utils/setDataOptimizer';

Page({
data: {
formData: {},
loading: false
},

onLoad() {
// 初始化数据优化器
this.dataOptimizer = new SetDataOptimizer(this);

// 初始化表单数据
this.initFormData();
},

// 初始化表单数据
initFormData() {
this.setData({
formData: {
name: '',
email: '',
phone: '',
address: '',
// 其他表单项…
}
});
},