mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
57 lines
148 KiB
HTML
57 lines
148 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<meta name="generator" content="Docusaurus v2.0.0-alpha.66">
|
|
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="React Native Blog RSS Feed">
|
|
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="React Native Blog Atom Feed">
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41298772-2","auto"),ga("send","pageview")</script>
|
|
<script async src="https://www.google-analytics.com/analytics.js"></script>
|
|
<link rel="preconnect" href="https://www.google-analytics.com">
|
|
<link rel="preconnect" href="https://www.googletagmanager.com">
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-41298772-2"></script>
|
|
<script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-41298772-2",{})</script>
|
|
<link rel="search" type="application/opensearchdescription+xml" title="React Native" href="/opensearch.xml">
|
|
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5.2.0/dist/focus-visible.min.js" defer="defer"></script>
|
|
<script src="https://snack.expo.io/embed.js" defer="defer"></script><title data-react-helmet="true">Performance · React Native</title><meta data-react-helmet="true" property="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for React Native"><meta data-react-helmet="true" name="docsearch:language" content="en"><meta data-react-helmet="true" name="docsearch:version" content="0.61"><meta data-react-helmet="true" name="docsearch:docusaurus_tag" content="docs-default-0.61"><meta data-react-helmet="true" property="og:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="twitter:image" content="https://reactnative.dev/img/logo-og.png"><meta data-react-helmet="true" property="og:title" content="Performance · React Native"><meta data-react-helmet="true" name="description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."><meta data-react-helmet="true" property="og:description" content="A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible."><meta data-react-helmet="true" property="og:url" content="https://reactnative.dev/docs/0.61/performance"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="anonymous"><link data-react-helmet="true" rel="canonical" href="https://reactnative.dev/docs/0.61/performance"><link rel="stylesheet" href="/styles.fccefeba.css">
|
|
<link rel="stylesheet" href="/main.ca40cabd.css">
|
|
<link rel="preload" href="/styles.07d522c6.js" as="script">
|
|
<link rel="preload" href="/runtime~main.56c3f166.js" as="script">
|
|
<link rel="preload" href="/main.5a3c9855.js" as="script">
|
|
<link rel="preload" href="/1.ba9ce8bd.js" as="script">
|
|
<link rel="preload" href="/2.58cb5d3d.js" as="script">
|
|
<link rel="preload" href="/1f391b9e.a824c215.js" as="script">
|
|
<link rel="preload" href="/943.8b024446.js" as="script">
|
|
<link rel="preload" href="/612acc40.5e9b4609.js" as="script">
|
|
<link rel="preload" href="/17896441.0c201679.js" as="script">
|
|
<link rel="preload" href="/5a88c0c4.20d5e9b8.js" as="script">
|
|
</head>
|
|
<body>
|
|
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
|
|
<nav class="navbar navbar--fixed-top navbar--dark"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a><div class="navbar__item dropdown dropdown--hoverable dropdown--left"><a class="navbar__item navbar__link" href="/docs/0.61/getting-started">0.61</a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/docs/next/performance">Next</a></li><li><a class="dropdown__link" href="/docs/performance">0.63</a></li><li><a class="dropdown__link" href="/docs/0.62/performance">0.62</a></li><li><a aria-current="page" class="dropdown__link dropdown__link--active" href="/docs/0.61/performance">0.61</a></li><li><a class="dropdown__link" href="/docs/0.60/performance">0.60</a></li><li><a class="dropdown__link" href="/versions">All versions</a></li></ul></div></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link navbar__link--active" href="/docs/0.61/getting-started">Docs</a><a class="navbar__item navbar__link" href="/docs/0.61/components-and-apis">Components</a><a class="navbar__item navbar__link" href="/docs/0.61/accessibilityinfo">API</a><a class="navbar__item navbar__link" href="/help">Community</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link navbar-github-link" aria-label="GitHub repository"></a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_3lWe"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_gnXW">🌜</span></div><div class="react-toggle-track-x"><span class="toggle_gnXW">🌞</span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span><span class="DocSearch-Button-Key">⌘</span><span class="DocSearch-Button-Key">K</span></button></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a class="navbar__brand" href="/"><img class="navbar__logo" src="/img/header_logo.svg" alt="React Native"><strong class="navbar__title">React Native</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link navbar__link--active" href="/docs/0.61/getting-started">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/components-and-apis">Components</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.61/accessibilityinfo">API</a></li><li class="menu__list-item"><a class="menu__link" href="/help">Community</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a role="button" class="menu__link menu__link--sublist">Versions</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/next/performance">Next</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/performance">0.63</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.62/performance">0.62</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/0.61/performance">0.61</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/0.60/performance">0.60</a></li><li class="menu__list-item"><a class="menu__link" href="/versions">All versions</a></li></ul></li><li class="menu__list-item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="menu__link navbar-github-link" aria-label="GitHub repository"></a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_2UBv"><div class="docSidebarContainer_1hqR" role="complementary"><div class="sidebar_MSwm"><div class="menu menu--responsive menu_2hiu"><button aria-label="Open Menu" aria-haspopup="true" class="button button--secondary button--sm menu__button" type="button"><svg aria-label="Menu" class="sidebarMenuIcon_37TU" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">The Basics</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/getting-started">Introduction</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/tutorial">Learn the Basics</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/props">Props</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/state">State</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/style">Style</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/height-and-width">Height and Width</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/flexbox">Layout with Flexbox</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/handling-text-input">Handling Text Input</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/handling-touches">Handling Touches</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/using-a-scrollview">Using a ScrollView</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/using-a-listview">Using List Views</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/network">Networking</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/more-resources">More Resources</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/fast-refresh">Fast Refresh</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/platform-specific-code">Platform Specific Code</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/navigation">Navigating Between Screens</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/images">Images</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/animations">Animations</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/accessibility">Accessibility</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/improvingux">Improving User Experience</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/optimizing-flatlist-configuration">Optimizing Flatlist Configuration</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/timers">Timers</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/debugging">Debugging</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active active" tabindex="0" href="/docs/0.61/performance">Performance</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/gesture-responder-system">Gesture Responder System</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/javascript-environment">JavaScript Environment</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/typescript">Using TypeScript with React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/direct-manipulation">Direct Manipulation</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/colors">Color Reference</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/integration-with-existing-apps">Integration with Existing Apps</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/building-for-tv">Building For TV Devices</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/running-on-device">Running On Device</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/upgrading">Upgrading to new React Native versions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/troubleshooting">Troubleshooting</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/native-modules-setup">Native Modules Setup</a></li><li class="menu__list-item"><a class="menu__link" tabindex="0" href="/docs/0.61/out-of-tree-platforms">Out-of-Tree Platforms</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (iOS)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/native-modules-ios">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/native-components-ios">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/linking-libraries-ios">Linking Libraries</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/running-on-simulator-ios">Running On Simulator</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/communication-ios">Communication between native and React Native</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/app-extensions">App Extensions</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides (Android)</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/native-modules-android">Native Modules</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/native-components-android">Native UI Components</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/headless-js-android">Headless JS</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/signed-apk-android">Publishing to Google Play Store</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/removing-default-permissions">Removing Default Permissions</a></li><li class="menu__list-item"><a class="menu__link" tabindex="-1" href="/docs/0.61/hermes">Using Hermes</a></li></ul></li></ul></div></div></div><main class="docMainContainer_1rYT"><div class="container padding-vert--lg docItemWrapper_1Hme"><div class="row"><div class="col docItemCol_2AGf"><div class="alert alert--warning margin-bottom--md" role="alert"><div>This is documentation for React Native <strong>0.61</strong>, which is no longer actively maintained.</div><div class="margin-top--md">For up-to-date documentation, see the <strong><a href="/docs/performance">latest version</a></strong> (0.63).</div></div><div class="docItemContainer_1tAC"><article><div><span class="badge badge--secondary">Version: 0.61</span></div><header><h1 class="docTitle_cWlf">Performance</h1></header><div class="markdown"><p>A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps. Where possible, we would like for React Native to do the right thing and help you to focus on your app instead of performance optimization, but there are areas where we're not quite there yet, and others where React Native (similar to writing native code directly) cannot possibly determine the best way to optimize for you and so manual intervention will be necessary. We try our best to deliver buttery-smooth UI performance by default, but sometimes that isn't possible.</p><p>This guide is intended to teach you some basics to help you to <a href="/docs/0.61/performance#profiling">troubleshoot performance issues</a>, as well as discuss <a href="/docs/0.61/performance#common-sources-of-performance-problems">common sources of problems and their suggested solutions</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="what-you-need-to-know-about-frames"></a>What you need to know about frames<a aria-hidden="true" tabindex="-1" class="hash-link" href="#what-you-need-to-know-about-frames" title="Direct link to heading">#</a></h2><p>Your grandparents' generation called movies <a href="https://www.youtube.com/watch?v=F1i40rnpOsA" target="_blank" rel="noopener noreferrer">"moving pictures"</a> for a reason: realistic motion in video is an illusion created by quickly changing static images at a consistent speed. We refer to each of these images as frames. The number of frames that is displayed each second has a direct impact on how smooth and ultimately life-like a video (or user interface) seems to be. iOS devices display 60 frames per second, which gives you and the UI system about 16.67ms to do all of the work needed to generate the static image (frame) that the user will see on the screen for that interval. If you are unable to do the work necessary to generate that frame within the allotted 16.67ms, then you will "drop a frame" and the UI will appear unresponsive.</p><p>Now to confuse the matter a little bit, open up the developer menu in your app and toggle <code>Show Perf Monitor</code>. You will notice that there are two different frame rates.</p><p><img src="/assets/images/PerfUtil-38a2ddbf1777887d70563a644c72aa64.png"></p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="js-frame-rate-javascript-thread"></a>JS frame rate (JavaScript thread)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#js-frame-rate-javascript-thread" title="Direct link to heading">#</a></h3><p>For most React Native applications, your business logic will run on the JavaScript thread. This is where your React application lives, API calls are made, touch events are processed, etc... Updates to native-backed views are batched and sent over to the native side at the end of each iteration of the event loop, before the frame deadline (if all goes well). If the JavaScript thread is unresponsive for a frame, it will be considered a dropped frame. For example, if you were to call <code>this.setState</code> on the root component of a complex application and it resulted in re-rendering computationally expensive component subtrees, it's conceivable that this might take 200ms and result in 12 frames being dropped. Any animations controlled by JavaScript would appear to freeze during that time. If anything takes longer than 100ms, the user will feel it.</p><p>This often happens during <code>Navigator</code> transitions: when you push a new route, the JavaScript thread needs to render all of the components necessary for the scene in order to send over the proper commands to the native side to create the backing views. It's common for the work being done here to take a few frames and cause <a href="http://jankfree.org/" target="_blank" rel="noopener noreferrer">jank</a> because the transition is controlled by the JavaScript thread. Sometimes components will do additional work on <code>componentDidMount</code>, which might result in a second stutter in the transition.</p><p>Another example is responding to touches: if you are doing work across multiple frames on the JavaScript thread, you might notice a delay in responding to <code>TouchableOpacity</code>, for example. This is because the JavaScript thread is busy and cannot process the raw touch events sent over from the main thread. As a result, <code>TouchableOpacity</code> cannot react to the touch events and command the native view to adjust its opacity.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="ui-frame-rate-main-thread"></a>UI frame rate (main thread)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ui-frame-rate-main-thread" title="Direct link to heading">#</a></h3><p>Many people have noticed that performance of <code>NavigatorIOS</code> is better out of the box than <code>Navigator</code>. The reason for this is that the animations for the transitions are done entirely on the main thread, and so they are not interrupted by frame drops on the JavaScript thread.</p><p>Similarly, you can happily scroll up and down through a <code>ScrollView</code> when the JavaScript thread is locked up because the <code>ScrollView</code> lives on the main thread. The scroll events are dispatched to the JS thread, but their receipt is not necessary for the scroll to occur.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="common-sources-of-performance-problems"></a>Common sources of performance problems<a aria-hidden="true" tabindex="-1" class="hash-link" href="#common-sources-of-performance-problems" title="Direct link to heading">#</a></h2><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="running-in-development-mode-devtrue"></a>Running in development mode (<code>dev=true</code>)<a aria-hidden="true" tabindex="-1" class="hash-link" href="#running-in-development-mode-devtrue" title="Direct link to heading">#</a></h3><p>JavaScript thread performance suffers greatly when running in dev mode. This is unavoidable: a lot more work needs to be done at runtime to provide you with good warnings and error messages, such as validating propTypes and various other assertions. Always make sure to test performance in <a href="/docs/0.61/running-on-device#building-your-app-for-production">release builds</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="using-consolelog-statements"></a>Using <code>console.log</code> statements<a aria-hidden="true" tabindex="-1" class="hash-link" href="#using-consolelog-statements" title="Direct link to heading">#</a></h3><p>When running a bundled app, these statements can cause a big bottleneck in the JavaScript thread. This includes calls from debugging libraries such as <a href="https://github.com/evgenyrodionov/redux-logger" target="_blank" rel="noopener noreferrer">redux-logger</a>, so make sure to remove them before bundling. You can also use this <a href="https://babeljs.io/docs/plugins/transform-remove-console/" target="_blank" rel="noopener noreferrer">babel plugin</a> that removes all the <code>console.*</code> calls. You need to install it first with <code>npm i babel-plugin-transform-remove-console --save-dev</code>, and then edit the <code>.babelrc</code> file under your project directory like this:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsxon codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">{</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> "env": {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> "production": {</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> "plugins": ["transform-remove-console"]</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> }</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">}</span></div></div></div></div></div><p>This will automatically remove all <code>console.*</code> calls in the release (production) versions of your project.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists"></a><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists<a aria-hidden="true" tabindex="-1" class="hash-link" href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists" title="Direct link to heading">#</a></h3><p>Use the new <a href="/docs/0.61/flatlist"><code>FlatList</code></a> or <a href="/docs/0.61/sectionlist"><code>SectionList</code></a> component instead. Besides simplifying the API, the new list components also have significant performance enhancements, the main one being nearly constant memory usage for any number of rows.</p><p>If your <a href="/docs/0.61/flatlist"><code>FlatList</code></a> is rendering slow, be sure that you've implemented <a href="/docs/flatlist#getitemlayout"><code>getItemLayout</code></a> to optimize rendering speed by skipping measurement of the rendered items.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="js-fps-plunges-when-re-rendering-a-view-that-hardly-changes"></a>JS FPS plunges when re-rendering a view that hardly changes<a aria-hidden="true" tabindex="-1" class="hash-link" href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" title="Direct link to heading">#</a></h3><p>If you are using a ListView, you must provide a <code>rowHasChanged</code> function that can reduce a lot of work by quickly determining whether or not a row needs to be re-rendered. If you are using immutable data structures, this would only need to be a reference equality check.</p><p>Similarly, you can implement <code>shouldComponentUpdate</code> and indicate the exact conditions under which you would like the component to re-render. If you write pure components (where the return value of the render function is entirely dependent on props and state), you can leverage PureComponent to do this for you. Once again, immutable data structures are useful to keep this fast -- if you have to do a deep comparison of a large list of objects, it may be that re-rendering your entire component would be quicker, and it would certainly require less code.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time"></a>Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time<a aria-hidden="true" tabindex="-1" class="hash-link" href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time" title="Direct link to heading">#</a></h3><p>"Slow Navigator transitions" is the most common manifestation of this, but there are other times this can happen. Using InteractionManager can be a good approach, but if the user experience cost is too high to delay work during an animation, then you might want to consider LayoutAnimation.</p><p>The Animated API currently calculates each keyframe on-demand on the JavaScript thread unless you <a href="/blog/2017/02/14/using-native-driver-for-animated#how-do-i-use-this-in-my-app">set <code>useNativeDriver: true</code></a>, while LayoutAnimation leverages Core Animation and is unaffected by JS thread and main thread frame drops.</p><p>One case where I have used this is for animating in a modal (sliding down from top and fading in a translucent overlay) while initializing and perhaps receiving responses for several network requests, rendering the contents of the modal, and updating the view where the modal was opened from. See the Animations guide for more information about how to use LayoutAnimation.</p><p>Caveats:</p><ul><li>LayoutAnimation only works for fire-and-forget animations ("static" animations) -- if it must be interruptible, you will need to use <code>Animated</code>.</li></ul><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps"></a>Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps" title="Direct link to heading">#</a></h3><p>This is especially true when you have text with a transparent background positioned on top of an image, or any other situation where alpha compositing would be required to re-draw the view on each frame. You will find that enabling <code>shouldRasterizeIOS</code> or <code>renderToHardwareTextureAndroid</code> can help with this significantly.</p><p>Be careful not to overuse this or your memory usage could go through the roof. Profile your performance and memory usage when using these props. If you don't plan to move a view anymore, turn this property off.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="animating-the-size-of-an-image-drops-ui-thread-fps"></a>Animating the size of an image drops UI thread FPS<a aria-hidden="true" tabindex="-1" class="hash-link" href="#animating-the-size-of-an-image-drops-ui-thread-fps" title="Direct link to heading">#</a></h3><p>On iOS, each time you adjust the width or height of an Image component it is re-cropped and scaled from the original image. This can be very expensive, especially for large images. Instead, use the <code>transform: [{scale}]</code> style property to animate the size. An example of when you might do this is when you tap an image and zoom it in to full screen.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="my-touchablex-view-isnt-very-responsive"></a>My TouchableX view isn't very responsive<a aria-hidden="true" tabindex="-1" class="hash-link" href="#my-touchablex-view-isnt-very-responsive" title="Direct link to heading">#</a></h3><p>Sometimes, if we do an action in the same frame that we are adjusting the opacity or highlight of a component that is responding to a touch, we won't see that effect until after the <code>onPress</code> function has returned. If <code>onPress</code> does a <code>setState</code> that results in a lot of work and a few frames dropped, this may occur. A solution to this is to wrap any action inside of your <code>onPress</code> handler in <code>requestAnimationFrame</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token function" style="color:#79b6f2">handleOnPress</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">requestAnimationFrame</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">doExpensiveAction</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="slow-navigator-transitions"></a>Slow navigator transitions<a aria-hidden="true" tabindex="-1" class="hash-link" href="#slow-navigator-transitions" title="Direct link to heading">#</a></h3><p>As mentioned above, <code>Navigator</code> animations are controlled by the JavaScript thread. Imagine the "push from right" scene transition: each frame, the new scene is moved from the right to left, starting offscreen (let's say at an x-offset of 320) and ultimately settling when the scene sits at an x-offset of</p><ol start="0"><li>Each frame during this transition, the JavaScript thread needs to send a new x-offset to the main thread. If the JavaScript thread is locked up, it cannot do this and so no update occurs on that frame and the animation stutters.</li></ol><p>One solution to this is to allow for JavaScript-based animations to be offloaded to the main thread. If we were to do the same thing as in the above example with this approach, we might calculate a list of all x-offsets for the new scene when we are starting the transition and send them to the main thread to execute in an optimized way. Now that the JavaScript thread is freed of this responsibility, it's not a big deal if it drops a few frames while rendering the scene -- you probably won't even notice because you will be too distracted by the pretty transition.</p><p>Solving this is one of the main goals behind the new <a href="/docs/0.61/navigation">React Navigation</a> library. The views in React Navigation use native components and the <a href="/docs/0.61/animated"><code>Animated</code></a> library to deliver 60 FPS animations that are run on the native thread.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="profiling"></a>Profiling<a aria-hidden="true" tabindex="-1" class="hash-link" href="#profiling" title="Direct link to heading">#</a></h2><p>Use the built-in profiler to get detailed information about work done in the JavaScript thread and main thread side-by-side. Access it by selecting Perf Monitor from the Debug menu.</p><p>For iOS, Instruments is an invaluable tool, and on Android you should learn to use <a href="/docs/0.61/performance#profiling-android-ui-performance-with-systrace"><code>systrace</code></a>.</p><p>But first, <a href="/docs/0.61/performance#running-in-development-mode-dev-true"><strong>make sure that Development Mode is OFF!</strong></a> You should see <code>__DEV__ === false, development-level warning are OFF, performance optimizations are ON</code> in your application logs.</p><p>Another way to profile JavaScript is to use the Chrome profiler while debugging. This won't give you accurate results as the code is running in Chrome but will give you a general idea of where bottlenecks might be. Run the profiler under Chrome's <code>Performance</code> tab. A flame graph will appear under <code>User Timing</code>. To view more details in tabular format, click at the <code>Bottom Up</code> tab below and then select <code>DedicatedWorker Thread</code> at the top left menu.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="profiling-android-ui-performance-with-systrace"></a>Profiling Android UI Performance with <code>systrace</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#profiling-android-ui-performance-with-systrace" title="Direct link to heading">#</a></h3><p>Android supports 10k+ different phones and is generalized to support software rendering: the framework architecture and need to generalize across many hardware targets unfortunately means you get less for free relative to iOS. But sometimes, there are things you can improve -- and many times it's not native code's fault at all!</p><p>The first step for debugging this jank is to answer the fundamental question of where your time is being spent during each 16ms frame. For that, we'll be using a standard Android profiling tool called <code>systrace</code>.</p><p><code>systrace</code> is a standard Android marker-based profiling tool (and is installed when you install the Android platform-tools package). Profiled code blocks are surrounded by start/end markers which are then visualized in a colorful chart format. Both the Android SDK and React Native framework provide standard markers that you can visualize.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="1-collecting-a-trace"></a>1. Collecting a trace<a aria-hidden="true" tabindex="-1" class="hash-link" href="#1-collecting-a-trace" title="Direct link to heading">#</a></h4><p>First, connect a device that exhibits the stuttering you want to investigate to your computer via USB and get it to the point right before the navigation/animation you want to profile. Run <code>systrace</code> as follows:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">$ </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">path_to_android_sdk</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">platform</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">tools</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">systrace</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">systrace</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">py </span><span class="token operator" style="color:#fc929e">--</span><span class="token plain">time</span><span class="token operator" style="color:#fc929e">=</span><span class="token number" style="color:#5a9bcf">10</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">o trace</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">html sched gfx view </span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">a </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag" style="color:#fc929e">your_package_name</span><span class="token tag punctuation" style="color:#657b83">></span></div></div></div></div></div><p>A quick breakdown of this command:</p><ul><li><code>time</code> is the length of time the trace will be collected in seconds</li><li><code>sched</code>, <code>gfx</code>, and <code>view</code> are the android SDK tags (collections of markers) we care about: <code>sched</code> gives you information about what's running on each core of your phone, <code>gfx</code> gives you graphics info such as frame boundaries, and <code>view</code> gives you information about measure, layout, and draw passes</li><li><code>-a <your_package_name></code> enables app-specific markers, specifically the ones built into the React Native framework. <code>your_package_name</code> can be found in the <code>AndroidManifest.xml</code> of your app and looks like <code>com.example.app</code></li></ul><p>Once the trace starts collecting, perform the animation or interaction you care about. At the end of the trace, systrace will give you a link to the trace which you can open in your browser.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="2-reading-the-trace"></a>2. Reading the trace<a aria-hidden="true" tabindex="-1" class="hash-link" href="#2-reading-the-trace" title="Direct link to heading">#</a></h4><p>After opening the trace in your browser (preferably Chrome), you should see something like this:</p><p><img alt="Example" src="/assets/images/SystraceExample-05b3ea44681d0291c1040e5f655fcd95.png"></p><blockquote><p><strong>HINT</strong>: Use the WASD keys to strafe and zoom</p></blockquote><p>If your trace .html file isn't opening correctly, check your browser console for the following:</p><p><img alt="ObjectObserveError" src="data:image/png;base64,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"></p><p>Since <code>Object.observe</code> was deprecated in recent browsers, you may have to open the file from the Google Chrome Tracing tool. You can do so by:</p><ul><li>Opening tab in chrome chrome://tracing</li><li>Selecting load</li><li>Selecting the html file generated from the previous command.</li></ul><blockquote><p><strong>Enable VSync highlighting</strong></p><p>Check this checkbox at the top right of the screen to highlight the 16ms frame boundaries:</p><p><img alt="Enable VSync Highlighting" src="data:image/png;base64,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"></p><p>You should see zebra stripes as in the screenshot above. If you don't, try profiling on a different device: Samsung has been known to have issues displaying vsyncs while the Nexus series is generally pretty reliable.</p></blockquote><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="3-find-your-process"></a>3. Find your process<a aria-hidden="true" tabindex="-1" class="hash-link" href="#3-find-your-process" title="Direct link to heading">#</a></h4><p>Scroll until you see (part of) the name of your package. In this case, I was profiling <code>com.facebook.adsmanager</code>, which shows up as <code>book.adsmanager</code> because of silly thread name limits in the kernel.</p><p>On the left side, you'll see a set of threads which correspond to the timeline rows on the right. There are a few threads we care about for our purposes: the UI thread (which has your package name or the name UI Thread), <code>mqt_js</code>, and <code>mqt_native_modules</code>. If you're running on Android 5+, we also care about the Render Thread.</p><ul><li><p><strong>UI Thread.</strong> This is where standard android measure/layout/draw happens. The thread name on the right will be your package name (in my case book.adsmanager) or UI Thread. The events that you see on this thread should look something like this and have to do with <code>Choreographer</code>, <code>traversals</code>, and <code>DispatchUI</code>:</p><p><img alt="UI Thread Example" src="data:image/png;base64,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"></p></li><li><p><strong>JS Thread.</strong> This is where JavaScript is executed. The thread name will be either <code>mqt_js</code> or <code><...></code> depending on how cooperative the kernel on your device is being. To identify it if it doesn't have a name, look for things like <code>JSCall</code>, <code>Bridge.executeJSCall</code>, etc:</p><p><img alt="JS Thread Example" src="data:image/png;base64,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"></p></li><li><p><strong>Native Modules Thread.</strong> This is where native module calls (e.g. the <code>UIManager</code>) are executed. The thread name will be either <code>mqt_native_modules</code> or <code><...></code>. To identify it in the latter case, look for things like <code>NativeCall</code>, <code>callJavaModuleMethod</code>, and <code>onBatchComplete</code>:</p><p><img alt="Native Modules Thread Example" src="data:image/png;base64,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"></p></li><li><p><strong>Bonus: Render Thread.</strong> If you're using Android L (5.0) and up, you will also have a render thread in your application. This thread generates the actual OpenGL commands used to draw your UI. The thread name will be either <code>RenderThread</code> or <code><...></code>. To identify it in the latter case, look for things like <code>DrawFrame</code> and <code>queueBuffer</code>:</p><p><img alt="Render Thread Example" src="data:image/png;base64,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"></p></li></ul><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="identifying-a-culprit"></a>Identifying a culprit<a aria-hidden="true" tabindex="-1" class="hash-link" href="#identifying-a-culprit" title="Direct link to heading">#</a></h4><p>A smooth animation should look something like the following:</p><p><img alt="Smooth Animation" src="/assets/images/SystraceWellBehaved-82dfa037cb9e1d29d7daae2d6dba2ffc.png"></p><p>Each change in color is a frame -- remember that in order to display a frame, all our UI work needs to be done by the end of that 16ms period. Notice that no thread is working close to the frame boundary. An application rendering like this is rendering at 60 FPS.</p><p>If you noticed chop, however, you might see something like this:</p><p><img alt="Choppy Animation from JS" src="/assets/images/SystraceBadJS-b8518ae5e520b074ccc7722fcf30b7ed.png"></p><p>Notice that the JS thread is executing almost all the time, and across frame boundaries! This app is not rendering at 60 FPS. In this case, <strong>the problem lies in JS</strong>.</p><p>You might also see something like this:</p><p><img alt="Choppy Animation from UI" src="/assets/images/SystraceBadUI-cc4bb271e7a568efc7933d1c6f453d67.png"></p><p>In this case, the UI and render threads are the ones that have work crossing frame boundaries. The UI that we're trying to render on each frame is requiring too much work to be done. In this case, <strong>the problem lies in the native views being rendered</strong>.</p><p>At this point, you'll have some very helpful information to inform your next steps.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="resolving-javascript-issues"></a>Resolving JavaScript issues<a aria-hidden="true" tabindex="-1" class="hash-link" href="#resolving-javascript-issues" title="Direct link to heading">#</a></h4><p>If you identified a JS problem, look for clues in the specific JS that you're executing. In the scenario above, we see <code>RCTEventEmitter</code> being called multiple times per frame. Here's a zoom-in of the JS thread from the trace above:</p><p><img alt="Too much JS" src="/assets/images/SystraceBadJS2-f454f409a22625f659d465abdab06ce0.png"></p><p>This doesn't seem right. Why is it being called so often? Are they actually different events? The answers to these questions will probably depend on your product code. And many times, you'll want to look into <a href="https://reactjs.org/docs/react-component.html#shouldcomponentupdate" target="_blank" rel="noopener noreferrer">shouldComponentUpdate</a>.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="resolving-native-ui-issues"></a>Resolving native UI Issues<a aria-hidden="true" tabindex="-1" class="hash-link" href="#resolving-native-ui-issues" title="Direct link to heading">#</a></h4><p>If you identified a native UI problem, there are usually two scenarios:</p><ol><li>the UI you're trying to draw each frame involves too much work on the GPU, or</li><li>You're constructing new UI during the animation/interaction (e.g. loading in new content during a scroll).</li></ol><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="too-much-gpu-work"></a>Too much GPU work<a aria-hidden="true" tabindex="-1" class="hash-link" href="#too-much-gpu-work" title="Direct link to heading">#</a></h5><p>In the first scenario, you'll see a trace that has the UI thread and/or Render Thread looking like this:</p><p><img alt="Overloaded GPU" src="/assets/images/SystraceBadUI-cc4bb271e7a568efc7933d1c6f453d67.png"></p><p>Notice the long amount of time spent in <code>DrawFrame</code> that crosses frame boundaries. This is time spent waiting for the GPU to drain its command buffer from the previous frame.</p><p>To mitigate this, you should:</p><ul><li>investigate using <code>renderToHardwareTextureAndroid</code> for complex, static content that is being animated/transformed (e.g. the <code>Navigator</code> slide/alpha animations)</li><li>make sure that you are <strong>not</strong> using <code>needsOffscreenAlphaCompositing</code>, which is disabled by default, as it greatly increases the per-frame load on the GPU in most cases.</li></ul><p>If these don't help and you want to dig deeper into what the GPU is actually doing, you can check out <a href="http://www.androiddocs.com/tools/help/gltracer.html" target="_blank" rel="noopener noreferrer">Tracer for OpenGL ES</a>.</p><h5><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="creating-new-views-on-the-ui-thread"></a>Creating new views on the UI thread<a aria-hidden="true" tabindex="-1" class="hash-link" href="#creating-new-views-on-the-ui-thread" title="Direct link to heading">#</a></h5><p>In the second scenario, you'll see something more like this:</p><p><img alt="Creating Views" src="/assets/images/SystraceBadCreateUI-fc9d228fc136be3574c0c5805ac0d7b5.png"></p><p>Notice that first the JS thread thinks for a bit, then you see some work done on the native modules thread, followed by an expensive traversal on the UI thread.</p><p>There isn't a quick way to mitigate this unless you're able to postpone creating new UI until after the interaction, or you are able to simplify the UI you're creating. The react native team is working on an infrastructure level solution for this that will allow new UI to be created and configured off the main thread, allowing the interaction to continue smoothly.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="ram-bundles--inline-requires"></a>RAM bundles + inline requires<a aria-hidden="true" tabindex="-1" class="hash-link" href="#ram-bundles--inline-requires" title="Direct link to heading">#</a></h2><p>If you have a large app you may want to consider the Random Access Modules (RAM) bundle format, and using inline requires. This is useful for apps that have a large number of screens which may not ever be opened during a typical usage of the app. Generally it is useful to apps that have large amounts of code that are not needed for a while after startup. For instance the app includes complicated profile screens or lesser used features, but most sessions only involve visiting the main screen of the app for updates. We can optimize the loading of the bundle by using the RAM format and requiring those features and screens inline (when they are actually used).</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="loading-javascript"></a>Loading JavaScript<a aria-hidden="true" tabindex="-1" class="hash-link" href="#loading-javascript" title="Direct link to heading">#</a></h3><p>Before react-native can execute JS code, that code must be loaded into memory and parsed. With a standard bundle if you load a 50mb bundle, all 50mb must be loaded and parsed before any of it can be executed. The optimization behind RAM bundles is that you can load only the portion of the 50mb that you actually need at startup, and progressively load more of the bundle as those sections are needed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="inline-requires"></a>Inline Requires<a aria-hidden="true" tabindex="-1" class="hash-link" href="#inline-requires" title="Direct link to heading">#</a></h3><p>Inline requires delay the requiring of a module or file until that file is actually needed. A basic example would look like this:</p><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="veryexpensivejs"></a>VeryExpensive.js<a aria-hidden="true" tabindex="-1" class="hash-link" href="#veryexpensivejs" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Component </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Text </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// ... import some very expensive modules</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// You may want to log at the file level to verify when this is happening</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'VeryExpensive component loaded'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">VeryExpensive</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token comment" style="color:#93a1a1">// lots and lots of code</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Very Expensive Component</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="optimizedjs"></a>Optimized.js<a aria-hidden="true" tabindex="-1" class="hash-link" href="#optimizedjs" title="Direct link to heading">#</a></h4><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> React</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> Component </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> TouchableOpacity</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> View</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> Text </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">from</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'react-native'</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">let</span><span class="token plain"> VeryExpensive </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">default</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">class</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Optimized</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">extends</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Component</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> state </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> needsExpensive</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">false</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">didPress</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">VeryExpensive </span><span class="token operator" style="color:#fc929e">==</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> VeryExpensive </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'./VeryExpensive'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">default</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">setState</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> needsExpensive</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function" style="color:#79b6f2">render</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">style</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript" style="color:#fc929e"> marginTop</span><span class="token tag script language-javascript punctuation" style="color:#657b83">:</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript number" style="color:#5a9bcf">20</span><span class="token tag script language-javascript" style="color:#fc929e"> </span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag attr-name" style="color:#c5a5c5">onPress</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#657b83">=</span><span class="token tag script language-javascript punctuation" style="color:#657b83">{</span><span class="token tag script language-javascript keyword" style="color:#c5a5c5">this</span><span class="token tag script language-javascript punctuation" style="color:#657b83">.</span><span class="token tag script language-javascript" style="color:#fc929e">didPress</span><span class="token tag script language-javascript punctuation" style="color:#657b83">}</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain">Load</span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">Text</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">TouchableOpacity</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token keyword" style="color:#c5a5c5">this</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">state</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">needsExpensive </span><span class="token operator" style="color:#fc929e">?</span><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"><</span><span class="token tag class-name" style="color:#fac863">VeryExpensive</span><span class="token tag" style="color:#fc929e"> </span><span class="token tag punctuation" style="color:#657b83">/></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">null</span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token tag punctuation" style="color:#657b83"></</span><span class="token tag class-name" style="color:#fac863">View</span><span class="token tag punctuation" style="color:#657b83">></span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>Even without the RAM format, inline requires can lead to startup time improvements, because the code within VeryExpensive.js will only execute once it is required for the first time.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="enable-the-ram-format"></a>Enable the RAM format<a aria-hidden="true" tabindex="-1" class="hash-link" href="#enable-the-ram-format" title="Direct link to heading">#</a></h3><p>On iOS using the RAM format will create a single indexed file that react native will load one module at a time. On Android, by default it will create a set of files for each module. You can force Android to create a single file, like iOS, but using multiple files can be more performant and requires less memory.</p><p>Enable the RAM format in Xcode by editing the build phase "Bundle React Native code and images". Before <code>../node_modules/react-native/scripts/react-native-xcode.sh</code> add <code>export BUNDLE_COMMAND="ram-bundle"</code>:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">BUNDLE_COMMAND</span><span class="token operator" style="color:#fc929e">=</span><span class="token string" style="color:#8dc891">"ram-bundle"</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">export</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">NODE_BINARY</span><span class="token operator" style="color:#fc929e">=</span><span class="token plain">node</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">.</span><span class="token punctuation" style="color:#657b83">.</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">node_modules</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">native</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">scripts</span><span class="token operator" style="color:#fc929e">/</span><span class="token plain">react</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">native</span><span class="token operator" style="color:#fc929e">-</span><span class="token plain">xcode</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">sh</span></div></div></div></div></div><p>On Android enable the RAM format by editing your <code>android/app/build.gradle</code> file. Before the line <code>apply from: "../../node_modules/react-native/react.gradle"</code> add or amend the <code>project.ext.react</code> block:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">project</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">ext</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">react </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> bundleCommand</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"ram-bundle"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">]</span></div></div></div></div></div><p>Use the following lines on Android if you want to use a single indexed file:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">project</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">ext</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">react </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> bundleCommand</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">"ram-bundle"</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> extraPackagerArgs</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">[</span><span class="token string" style="color:#8dc891">"--indexed-ram-bundle"</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">]</span></div></div></div></div></div><blockquote><p><strong><em>Note</em></strong>: If you are using <a href="https://github.com/facebook/hermes" target="_blank" rel="noopener noreferrer">Hermes JS Engine</a>, you do not need RAM bundles. When loading the bytecode, <code>mmap</code> ensures that the entire file is not loaded.</p></blockquote><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="configure-preloading-and-inline-requires"></a>Configure Preloading and Inline Requires<a aria-hidden="true" tabindex="-1" class="hash-link" href="#configure-preloading-and-inline-requires" title="Direct link to heading">#</a></h3><p>Now that we have a RAM bundle, there is overhead for calling <code>require</code>. <code>require</code> now needs to send a message over the bridge when it encounters a module it has not loaded yet. This will impact startup the most, because that is where the largest number of require calls are likely to take place while the app loads the initial module. Luckily we can configure a portion of the modules to be preloaded. In order to do this, you will need to implement some form of inline require.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="investigating-the-loaded-modules"></a>Investigating the Loaded Modules<a aria-hidden="true" tabindex="-1" class="hash-link" href="#investigating-the-loaded-modules" title="Direct link to heading">#</a></h3><p>In your root file (index.(ios|android).js) you can add the following after the initial imports:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> modules </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> require</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">getModules</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> moduleIds </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> Object</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">keys</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">modules</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> loadedModuleNames </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> moduleIds</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">filter</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">moduleId</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> modules</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">moduleId</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">isInitialized</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">map</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">moduleId</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> modules</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">moduleId</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">verboseName</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> waitingModuleNames </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> moduleIds</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">filter</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">moduleId</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">!</span><span class="token plain">modules</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">moduleId</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">isInitialized</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">map</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">moduleId</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> modules</span><span class="token punctuation" style="color:#657b83">[</span><span class="token plain">moduleId</span><span class="token punctuation" style="color:#657b83">]</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">verboseName</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// make sure that the modules you expect to be waiting are actually waiting</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'loaded:'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> loadedModuleNames</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">length</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token string" style="color:#8dc891">'waiting:'</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> waitingModuleNames</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">length</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// grab this text blob, and put it in a file named packager/modulePaths.js</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">console</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">log</span><span class="token punctuation" style="color:#657b83">(</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token template-string string" style="color:#8dc891">module.exports = </span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">${</span><span class="token template-string interpolation constant" style="color:#5a9bcf">JSON</span><span class="token template-string interpolation punctuation" style="color:#657b83">.</span><span class="token template-string interpolation function" style="color:#79b6f2">stringify</span><span class="token template-string interpolation punctuation" style="color:#657b83">(</span><span class="token template-string interpolation">loadedModuleNames</span><span class="token template-string interpolation punctuation" style="color:#657b83">.</span><span class="token template-string interpolation function" style="color:#79b6f2">sort</span><span class="token template-string interpolation punctuation" style="color:#657b83">(</span><span class="token template-string interpolation punctuation" style="color:#657b83">)</span><span class="token template-string interpolation punctuation" style="color:#657b83">)</span><span class="token template-string interpolation interpolation-punctuation punctuation" style="color:#657b83">}</span><span class="token template-string string" style="color:#8dc891">;</span><span class="token template-string template-punctuation string" style="color:#8dc891">`</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>When you run your app, you can look in the console and see how many modules have been loaded, and how many are waiting. You may want to read the moduleNames and see if there are any surprises. Note that inline requires are invoked the first time the imports are referenced. You may need to investigate and refactor to ensure only the modules you want are loaded on startup. Note that you can change the Systrace object on require to help debug problematic requires.</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">require</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">Systrace</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function-variable function" style="color:#79b6f2">beginEvent</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">message</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">message</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">includes</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">problematicModule</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">throw</span><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">new</span><span class="token plain"> </span><span class="token class-name" style="color:#fac863">Error</span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span></div></div></div></div></div><p>Every app is different, but it may make sense to only load the modules you need for the very first screen. When you are satisfied, put the output of the loadedModuleNames into a file named <code>packager/modulePaths.js</code>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="updating-the-metroconfigjs"></a>Updating the metro.config.js<a aria-hidden="true" tabindex="-1" class="hash-link" href="#updating-the-metroconfigjs" title="Direct link to heading">#</a></h3><p>We now need to update <code>metro.config.js</code> in the root of the project to use our newly generated <code>modulePaths.js</code> file:</p><div class="mdxCodeBlock_xYIz"><div class="codeBlockContent_rlEb"><button tabindex="0" type="button" aria-label="Copy code to clipboard" class="copyButton_kOW4">Copy</button><div class="prism-code language-jsx codeBlock_1AP7"><div class="codeBlockLines_1boI" style="color:#FFFFFF;background:#282C34"><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> modulePaths </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'./packager/modulePaths'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> resolve </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'path'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">resolve</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> fs </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">require</span><span class="token punctuation" style="color:#657b83">(</span><span class="token string" style="color:#8dc891">'fs'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token comment" style="color:#93a1a1">// Update the following line if the root folder of your app is somewhere else.</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> </span><span class="token constant" style="color:#5a9bcf">ROOT_FOLDER</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token function" style="color:#79b6f2">resolve</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">__dirname</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"> </span><span class="token string" style="color:#8dc891">'..'</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> config </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transformer</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token function-variable function" style="color:#79b6f2">getTransformOptions</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">const</span><span class="token plain"> moduleMap </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> modulePaths</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">forEach</span><span class="token punctuation" style="color:#657b83">(</span><span class="token parameter">path</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=></span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">if</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">fs</span><span class="token punctuation" style="color:#657b83">.</span><span class="token function" style="color:#79b6f2">existsSync</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">path</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> moduleMap</span><span class="token punctuation" style="color:#657b83">[</span><span class="token function" style="color:#79b6f2">resolve</span><span class="token punctuation" style="color:#657b83">(</span><span class="token plain">path</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">]</span><span class="token plain"> </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> </span><span class="token boolean" style="color:#ff8b50">true</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">)</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token keyword" style="color:#c5a5c5">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> preloadedModules</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> moduleMap</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> transform</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> inlineRequires</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">{</span><span class="token plain"> blacklist</span><span class="token punctuation" style="color:#657b83">:</span><span class="token plain"> moduleMap </span><span class="token punctuation" style="color:#657b83">}</span><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> </span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"> projectRoot</span><span class="token punctuation" style="color:#657b83">:</span><span class="token constant" style="color:#5a9bcf">ROOT_FOLDER</span><span class="token punctuation" style="color:#657b83">,</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain"></span><span class="token punctuation" style="color:#657b83">}</span><span class="token punctuation" style="color:#657b83">;</span><span class="token plain"></span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain" style="display:inline-block">
|
|
</span></div><div class="token-line" style="color:#FFFFFF;background:#282C34"><span class="token plain">module</span><span class="token punctuation" style="color:#657b83">.</span><span class="token plain">exports </span><span class="token operator" style="color:#fc929e">=</span><span class="token plain"> config</span><span class="token punctuation" style="color:#657b83">;</span></div></div></div></div></div><p>The <code>preloadedModules</code> entry in the config indicates which modules should be marked as preloaded when building a RAM bundle. When the bundle is loaded, those modules are immediately loaded, before any requires have even executed. The <code>blacklist</code> entry indicates that those modules should not be required inline. Because they are preloaded, there is no performance benefit from using an inline require. In fact the javascript spends extra time resolving the inline require every time the imports are referenced.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_3pqN" id="test-and-measure-improvements"></a>Test and Measure Improvements<a aria-hidden="true" tabindex="-1" class="hash-link" href="#test-and-measure-improvements" title="Direct link to heading">#</a></h3><p>You should now be ready to build your app using the RAM format and inline requires. Make sure you measure the before and after startup times.</p></div></article><div class="docMetadata margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/react-native-website/blob/master/website/versioned_docs/version-0.61/performance.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small class="docMetadata-updated">Last updated on <time datetime="2020-10-29T04:19:29.000Z" class="docLastUpdatedAt_1gIo">10/29/2020</time></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/0.61/debugging"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Debugging</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/0.61/gesture-responder-system"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Gesture Responder System »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3iuQ"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#what-you-need-to-know-about-frames" class="table-of-contents__link">What you need to know about frames</a><ul><li><a href="#js-frame-rate-javascript-thread" class="table-of-contents__link">JS frame rate (JavaScript thread)</a></li><li><a href="#ui-frame-rate-main-thread" class="table-of-contents__link">UI frame rate (main thread)</a></li></ul></li><li><a href="#common-sources-of-performance-problems" class="table-of-contents__link">Common sources of performance problems</a><ul><li><a href="#running-in-development-mode-devtrue" class="table-of-contents__link">Running in development mode (<code>dev=true</code>)</a></li><li><a href="#using-consolelog-statements" class="table-of-contents__link">Using <code>console.log</code> statements</a></li><li><a href="#listview-initial-rendering-is-too-slow-or-scroll-performance-is-bad-for-large-lists" class="table-of-contents__link"><code>ListView</code> initial rendering is too slow or scroll performance is bad for large lists</a></li><li><a href="#js-fps-plunges-when-re-rendering-a-view-that-hardly-changes" class="table-of-contents__link">JS FPS plunges when re-rendering a view that hardly changes</a></li><li><a href="#dropping-js-thread-fps-because-of-doing-a-lot-of-work-on-the-javascript-thread-at-the-same-time" class="table-of-contents__link">Dropping JS thread FPS because of doing a lot of work on the JavaScript thread at the same time</a></li><li><a href="#moving-a-view-on-the-screen-scrolling-translating-rotating-drops-ui-thread-fps" class="table-of-contents__link">Moving a view on the screen (scrolling, translating, rotating) drops UI thread FPS</a></li><li><a href="#animating-the-size-of-an-image-drops-ui-thread-fps" class="table-of-contents__link">Animating the size of an image drops UI thread FPS</a></li><li><a href="#my-touchablex-view-isnt-very-responsive" class="table-of-contents__link">My TouchableX view isn't very responsive</a></li><li><a href="#slow-navigator-transitions" class="table-of-contents__link">Slow navigator transitions</a></li></ul></li><li><a href="#profiling" class="table-of-contents__link">Profiling</a><ul><li><a href="#profiling-android-ui-performance-with-systrace" class="table-of-contents__link">Profiling Android UI Performance with <code>systrace</code></a></li></ul></li><li><a href="#ram-bundles--inline-requires" class="table-of-contents__link">RAM bundles + inline requires</a><ul><li><a href="#loading-javascript" class="table-of-contents__link">Loading JavaScript</a></li><li><a href="#inline-requires" class="table-of-contents__link">Inline Requires</a></li><li><a href="#enable-the-ram-format" class="table-of-contents__link">Enable the RAM format</a></li><li><a href="#configure-preloading-and-inline-requires" class="table-of-contents__link">Configure Preloading and Inline Requires</a></li><li><a href="#investigating-the-loaded-modules" class="table-of-contents__link">Investigating the Loaded Modules</a></li><li><a href="#updating-the-metroconfigjs" class="table-of-contents__link">Updating the metro.config.js</a></li><li><a href="#test-and-measure-improvements" class="table-of-contents__link">Test and Measure Improvements</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/tutorial">Tutorial</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/components-and-apis">Components and APIs</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/more-resources">More Resources</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/help">The React Native Community</a></li><li class="footer__item"><a class="footer__link-item" href="/showcase">Who's using React Native?</a></li><li class="footer__item"><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">Ask Questions on Stack Overflow</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md" target="_blank" rel="noopener noreferrer" class="footer__link-item">Contributor Guide</a></li><li class="footer__item"><a href="https://dev.to/t/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">DEV Community</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Find us</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://twitter.com/reactnative" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://github.com/facebook/react-native" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer" class="footer__link-item">React</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/privacy" target="_blank" rel="noopener noreferrer" class="footer__link-item">Privacy Policy</a></li><li class="footer__item"><a href="https://opensource.facebook.com/legal/terms" target="_blank" rel="noopener noreferrer" class="footer__link-item">Terms of Service</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com" target="_blank" rel="noopener noreferrer" class="footerLogoLink_19Ac"><img class="footer__logo" alt="Facebook Open Source Logo" src="/img/oss_logo.png"></a></div><div>Copyright © 2020 Facebook, Inc.</div></div></div></footer></div>
|
|
<script src="/styles.07d522c6.js"></script>
|
|
<script src="/runtime~main.56c3f166.js"></script>
|
|
<script src="/main.5a3c9855.js"></script>
|
|
<script src="/1.ba9ce8bd.js"></script>
|
|
<script src="/2.58cb5d3d.js"></script>
|
|
<script src="/1f391b9e.a824c215.js"></script>
|
|
<script src="/943.8b024446.js"></script>
|
|
<script src="/612acc40.5e9b4609.js"></script>
|
|
<script src="/17896441.0c201679.js"></script>
|
|
<script src="/5a88c0c4.20d5e9b8.js"></script>
|
|
</body>
|
|
</html> |