电商RN项目秒开优化实践

1. 包预置、预下载 、预渲染

可以申请 App 启动时预下载首包，建议拆包后申请，可以大幅度降低包下载时间。

预渲染提前渲染页面相当于从第一个阶段创建容器便开始优化。

2. 模块拆包，Tree-shaking，懒加载

模块拆分：可以拆分首包，可大幅提升包下载更新和加载性能。

懒加载：首屏不相关模块实现懒加载，减少加载时间。

Inline Requires 采用inline require方式打包，可以把实际代码中没有使用的模块去除，减少 size。 加载模块的时机在实际真正使用到这个模块的时候，实现懒加载效果。 模块赋值时采用get属性的方式进行赋值，可以在inline require打包方式下实现懒加载。

开启 inline require 配置

// metro.config.js
module.exports = {transformer: {getTransformOptions: async () => ({transform: {experimentalImportSupport: true,inlineRequires: true,},}),},
}; 

3. 渲染引擎优化

V8 or Hermes 引擎性能对比

CodeCache：JS 预编译后的字节码产物，会缓存至磁盘，下次页面加载时可直接复用。目前 Hermes 已开启。

4. 减少 Native 通信