06-性能优化-拆包0

为什么要拆包

React-Native 开发完成之后,需要调用 react-native bundle 命令构建出最终包,发布上线。但是构建出结果包之后发现,即使是一个不带任何逻辑业务的包也有 800k+, 导致启动时包加载耗时很长,会有一段时间的白屏,体验非常不好。

拆包是什么

分析 bundle 文件,可以看到里面大部分是 react-native 自带的原生模块。那我们很容易想到,这部分是任何一个 bundle 都会携带的重复内容,可不可以把这部分内容单独抽出来行程一个固定的 common 包,然后不同的业务部分形成一个个的 business 包。两种类型包分别下发到 app,在运行时再合并到一块,或者在进入模块之前把 common 加载起来,再选择性的加载 business 包,这样应该可以极大降低启动耗时。

效果对比

上了拆包和预加载机制之后,启动耗时从平均 400ms 下降到平均 40ms,视觉上基本感受不到白屏。

目录

拆包问题将分为三部份介绍:

  1. react-native bundle 命令背后的原理
  2. 别人家的解决方案
  3. 自研的解决方案

你可能感兴趣的:(06-性能优化-拆包0)