React-Native 开发完成之后，需要调用 react-native bundle 命令构建出最终包，发布上线。但是构建出结果包之后发现，即使是一个不带任何逻辑业务的包也有 800k+, 导致启动时包加载耗时很长，会有一段时间的白屏，体验非常不好。
分析 bundle 文件，可以看到里面大部分是 react-native 自带的原生模块。那我们很容易想到，这部分是任何一个 bundle 都会携带的重复内容，可不可以把这部分内容单独抽出来行程一个固定的 common 包，然后不同的业务部分形成一个个的 business 包。两种类型包分别下发到 app，在运行时再合并到一块，或者在进入模块之前把 common 加载起来，再选择性的加载 business 包，这样应该可以极大降低启动耗时。
上了拆包和预加载机制之后，启动耗时从平均 400ms 下降到平均 40ms，视觉上基本感受不到白屏。
拆包问题将分为三部份介绍：
为什么要拆包 React-Native 开发完成之后，需要调用 react-native bundle 命令构建出...
本文主要介绍 bundle 命令的执行过程，以及 Facebook 专门为 react-native 开发的打包工...
基于前面分析， 我们要解决拆包问题的话，需要解决以下几个问题： 支持 TypeScript。 common 部分的...
本文主要包含： 性能优化 - 卡顿性能优化 - 耗电优化性能优化 - APP启动优化安装包瘦身 一 性能优化 -...
拆包优化网络优化列表优化
APP性能优化-Memory APP性能优化-稳定性(crash率) APP性能优化-包体压缩 APP性能优化-C...
APP性能优化-Memory APP性能优化-稳定性(crash率) APP性能优化-包体压缩 APP性能优化-C...
APP性能优化-Memory APP性能优化-稳定性(crash率) APP性能优化-包体压缩 APP性能优化-C...
APP性能优化-Memory APP性能优化-稳定性(crash率) APP性能优化-包体压缩 APP性能优化-C...
APP性能优化-Memory APP性能优化-稳定性(crash率) APP性能优化-包体压缩 APP性能优化-C...
本文标题：06-性能优化-拆包0
本文链接：https://www.haomeiwen.com/subject/erczeqtx.html
网友评论