如何使用路由器磁通本机进行延迟加载以获得更好的性能？

Posted 2021-03-26

为了更好的应用程序性能，我发现延迟加载可以是一个更好的解决方案。我找到了this doc。我试过这个但是这不适用于router-flux。我不知道怎么用react-native router-flux来实现这个。我也不确定它是否可以完成。如果有任何方法做延迟加载请帮帮我。以下是主根的部分文件

root.js

import DrawerItems from './component/drawerItems';
import DashBoard from './pages/dashBoard';
import Profile from './pages/profile';
import AnswerInner from './pages/answer_inner';

....

 <Router>
                <Scene
                    key="root"
                    hideNavBar={true}
                >

                    <Scene
                        drawer={true}
                        hideNavBar={true}
                        contentComponent={DrawerItems}
                    >
                        <Scene key="inDrawer">
                            <Scene
                                key="spalshPage"
                                hideNavBar={true}
                                component={SplashPage}
                            />

                            <Scene
                                key="dashBoard"
                                hideNavBar={true}
                                component={DashBoard}

                            />

                            <Scene
                                key="profile"
                                hideNavBar={true}
                                component={Profile}
                            />
                           </Scene>
                         </Scene>
                        </Scene>
                       </Router>

是否可以在每个屏幕上进行延迟加载？我不知道延迟加载后的实际工作情况。请帮我找一个解决方案。谢谢！

答案

根据文档：

延迟加载是优化您的网站而不是应用程序的一种很好的方式（如下所述），它通过在逻辑断点处拆分代码，然后在用户完成需要或将需要的新块的情况下加载它来实现。码。

解释：

因为在React-native中，component或Scene（在router-flux中）只有在用户重定向到它时才会发挥作用。所以你可以说延迟加载已经在框架的结构中实现了。

Lazy加载实际上在实际需要时加载了一段代码，这就是android和ios默认活动生命周期所做的事情。您无需担心性能，因为两个操作系统都能有效地处理应用程序生命周期。

此外，您可以在应用程序的多个部分中应用延迟加载概念，例如首先显示文本数据并在列表视图中加载背景中的图像，或者您只能针对特定操作启动api调用等