Question

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

作为一个JavaScript框架，可以将JavaScript文件捆绑到单独的文件中，例如common.js和app.js。我在Google上搜索的关键字类似于＆＃34; react native webpack＆＃34;但似乎所有这些库都已弃用或过时，例如react-native-webpack-server，react-native-webpack-starter-kit等。

我想知道这里是否有人也在寻找一种方法来优化反应原生的JavaScript包。或者，也许这些第三方捆绑方法已经被Facebook标准捆绑包克服了？

Answer 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）创建一个状态并将其设置为null。

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

2）将async componentDidMount与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)}

通过遵循以下两个示例，您应该希望查看250KB以下的bundle.js。

Answer 2

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

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

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

React Native启动优化

2 个答案: