Taro小程序性能优化

197 阅读1分钟

1.代码体积优化

分包加载
小程序主包大小限制为 2MB,超过后无法预览。通过分包加载,将非核心页面或功能拆分为子包,减少主包体积。Taro 支持在 app.config.js 中配置分包:

export default {
  pages: ['pages/index'],
  subPackages: [
    {
      root: 'subpackageA',
      pages: ['pageA']
    }
  ]
};

这样可以显著提升首次加载速度

**2.建议将小程序基础信息保存下来###

在开发过程中,我们经常会使用 Taro.getAccountInfoSync(),Taro.getSystemInfoSync() 方法来获取小程序的账户信息,以及设备信息,可以将其缓存下来,提升性能、减少资源消耗、保证数据一致性以及提供更好的用户体验。通过缓存设备信息和账户信息,避免了频繁的 API 调用,从而让应用更高效、响应更快。

export const getBaseInfo = (): Taro.getAccountInfoSync.AccountInfo & Taro.getSystemInfoSync.Result => {
    try {
        const baseInfo = Taro.getStorageSync(BASE_INFO_KEY);
        const currentTime = Math.floor(Date.now() / 1000);
        if (baseInfo && baseInfo.expiry && currentTime <= baseInfo.expiry) {
            return baseInfo;
        }
        const envInfo = Taro.getAccountInfoSync();
        const systemInfo = Taro.getSystemInfoSync();

        const newData = {
            ...envInfo,
            ...systemInfo,
            expiry: currentTime + 3600
        };
        Taro.setStorageSync(BASE_INFO_KEY, newData);
        return newData;
    }
    catch (error) {
        console.log(error)
        // @ts-ignore
        return {};
    }
};