react-native启动速度优化

本篇文章介绍了react-native的启动速度优化方案,有着一定的参考价值,现在将它分享给各位,希望对各位有帮助。

react-native启动速度优化

1、拆包

在 react-native 执行 JS 代码之前,必须将代码加载到内存中并进行解析。如果你加载了一个 50MB 的 bundle,那么所有的 50mb 都必须被加载和解析才能被执行,这会导致启动时间变得很长。使用拆包技术将bundle拆成不同的业务包, 启动时根据需要加载相应的模块,之后再逐渐按需加载更多的包。

(1)moles-packer:由携程框架团队研发的,与携程moles框架配套使用的React Native 打包和拆包工具,同时支持原生的 React Native 项目。重写了react native自带的打包工具,适合RN0.4.0版本之前的分包。维护少,现在基本没有多少人使用,兼容性差。

(2)diff patch:由谷歌团队研发,兼容多种语言。原理是旧包与新包进行差异比对,生成补丁文件,压缩上传到服务器。app请求接口把补丁文件下载到本地,与旧包合成新包。

优点:打包生成的补丁文件体积小;

缺点:跨版本升级的时候不容易维护

git: https://github.com/google/diff-match-patch

(3)metro bundle:facebook官方提供的,支持RN 0.50及以上版本,并随着RN版本的迭代不断完善。文档链接:https://facebook.github.io/metro/docs/en/getting-started

2、内联引用

内联引用(require 代替 import)可以延迟模块或文件的加载,直到实际需要该文件。

import React, { Component } from 'react';
import { TouchableOpacity, View, Text } from 'react-native';

let VeryExpensive = null;

export default class Optimized extends Component {
  state = { needsExpensive: false };

  didPress = () => {
    if (VeryExpensive == null) {
      VeryExpensive = require('./VeryExpensive').default;
    }

    this.setState(() => ({
      needsExpensive: true,
    }));
  };

  render() {
    return (
      <View style={{ marginTop: 20 }}>
        <TouchableOpacity onPress={this.didPress}>
          <Text>Load</Text>
        </TouchableOpacity>
        {this.state.needsExpensive ? <VeryExpensive /> : null}
      </View>
    );
  }
}

3、bundle预加载

调用require会造成额外的开销。因为当遇到尚未加载的模块时,require需要通过bridge来发送消息。这主要会影响到启动速度,因为在应用程序加载初始模块时可能触发相当大量的请求调用。幸运的是,我们可以配置一部分模块进行预加载。具体的步骤可以参考官方文档:https://reactnative.cn/docs/performance/

更多React相关技术文章,请访问React答疑栏目进行学习!

以上就是react-native启动速度优化的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读