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相关技术文章，请访问gaodaima搞代码网进行学习！

以上就是react-native启动速度优化的详细内容，更多请关注gaodaima搞代码网其它相关文章！

喜欢 (0)赏

[搞代码]

分享 (0)