React Native 启动优化答案

【问题标题】：React Native startup optimizationReact Native 启动优化
【发布时间】：2017-06-19 12:13:29
【问题描述】：

我正在寻找一种方法来优化纯 react 原生移动应用的启动时间。

作为一个 JavaScript 框架，是否可以将 JavaScript 文件捆绑到单独的文件中，例如 common.js 和 app.js。我正在通过谷歌搜索诸如“react native webpack”之类的关键字，但似乎所有这些库都已弃用或过时，例如react-native-webpack-server、react-native-webpack-starter-kit 等。

我想知道这里是否有人也在寻找一种在 react native 中优化 JavaScript 包的方法。或者，也许这些第三方捆绑方法已被 Facebook 标准捆绑所克服？

【问题讨论】：

您始终可以创建多个捆绑包并将它们托管在不同的上下文中。但是您需要弥合应用程序的这些不同“部分”之间的差距。
@Moti Azu 感谢您的评论。没有单独的捆绑文件的文档。你有这个链接吗？

标签： react-native

【解决方案1】：

您可以动态加载您的组件，这样您的 bundle.js 将仅包含所需的部分 js，并且在您导航时您将请求其他不同的部分/部分。

而不是传统方式：import App from './containers/App/App'; 你可以这样做：

class ImportedComponent extends Component {
    state = {
        component: null
    }

    componentWillMount() {
        this.props.load()
        .then((mod) => this.setState(() => ({
            component: mod.default
        })))
    }

    render() {
        return this.props.children(this.state.component)
    }
}

const App = (props) => (
<ImportedComponent load={() => import('./containers/App/App')}>
    {(Component) => Component === null ? <h6 className="loading-message">Loading...</h6> : <Component {...props}/>}
</ImportedComponent>
)

或者你可以延迟加载你的组件本身。例如，假设我有 Moment JS，我不想在需要它之前加载它。所以我能做什么：

1) 创建一个状态并将其设置为空。

constructor(props){
    super(props);
    this.state = {
        lazyLoadedComponent: () => null
    }
}

2) 使用async componentDidMount with await，尝试捕捉并更新componentDidMount上的lazyLoadedComponent状态

async componentDidMount(){
    try {
        const Moment = await import('react-moment');
            this.setState({ lazyLoadedComponent: (data)=>{
                return React.createElement(Moment.default, {format:'MM/DD/YY'}, data) 
            }
        });
    }
    catch(err) {
        this.setState({ lazyLoadedComponent: <div>{`Failed to load component: ${err}`}</div> });
    }

}

3) 在渲染上调用组件：

{this.state.lazyLoadedComponent(value.createdOn)}

通过遵循这 2 个示例，您应该可以看到小于 250KB 的 bundle.js。

【讨论】：

【解决方案2】：

作为一种可能的解决方案，您可以使用ram-bundle 格式，metro 捆绑程序提供。

在这种情况下，您将不会加载整个 js-bundle - 您将仅加载启动时需要的部分（在许多应用程序中，用户甚至可能看不到很多地方，并且此功能允许您仅在需要时加载此类部件）。所以你可以简化你的入口点并且只加载你的包的一小部分。

您可以查看react-native-bundle-splitter。该库与几乎所有流行的导航库很好地集成，并允许您推迟加载特定路线。例如，如果您有一个登录屏幕，您可以在启动时仅加载此屏幕，而所有其他屏幕在后台加载或开始加载它们，只有当用户可以看到它们时。

【讨论】：