blocks|key|4502118|text|您可以动态加载您的组件，这样您的bundle.js将只包含所需的js的一小部分，而当您导航时，您将请求其他不同的部分/部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4502119|你可以这样做，而不是用传统的方式：import+App+from+'./containers/App/App';：|offset|length|style|CODE|4502120|class+ImportedComponent+extends+Component+{
++++state+=+{
++++++++component:+null
++++}

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

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

const+App+=+(props)+=>+(
<ImportedComponent+load={()+=>+import('./containers/App/App')}>
++++{(Component)+=>+Component+===+null+?+<h6+className="loading-message">Loading...</h6>+:+<Component+{...props}/>}
</ImportedComponent>
)|code-block|syntax|javascript|4502121|或者你可以延迟加载你的组件本身。例如，假设我有Moment+JS，并且我不想在需要它之前加载它。所以我能做的是：|4502122|1)创建状态并设置为null。|4502123|constructor(props){
++++super(props);
++++this.state+=+{
++++++++lazyLoadedComponent:+()+=>+null
++++}
}|4502124|2)使用带有等待的异步componentDidMount，尝试捕获并更新componentDidMount上的状态lazyLoadedComponent|4502125|async+componentDidMount(){
++++try+{
++++++++const+Moment+=+await+import('react-moment');
++++++++++++this.setState({+lazyLoadedComponent:+(data)=>{
++++++++++++++++return+React.createElement(Moment.default,+{format:'MM/DD/YY'},+data)+
++++++++++++}
++++++++});
++++}
++++catch(err)+{
++++++++this.setState({+lazyLoadedComponent:+<div>{`Failed+to+load+component:+${err}`}</div>+});
++++}

}|4502126|3)在render上调用组件：|4502127|{this.state.lazyLoadedComponent(value.createdOn)}|4502128|通过遵循这两个示例，您应该看到的是250KB以下的bundle.js。|4502129|entityMap^0|0|H|13|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|19|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Q|3|R|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|J|7|1F|8|@]|9|@]|A|$K|L]]|$1|10|3|11|5|6|7|1G|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|13|$]]

You could dynamically load your component, in this way your bundle.js will contain only the fraction of js needed and as you navigate you will request the other different parts / fractions. 

Rather than do the traditional way: <code>import App from './containers/App/App';</code> you could do something like this: 

<pre><code>class ImportedComponent extends Component {
 state = {
 component: null
 }

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

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

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

or you can lazy load your component itself. Let's say for example that I have Moment JS and I don't want to load it until it's needed. so what I could do: 

1) Create a state and set it to null. 

<pre><code>constructor(props){
 super(props);
 this.state = {
 lazyLoadedComponent: () =&gt; null
 }
}
</code></pre>

2) Use async componentDidMount with await, try and catch and update the state lazyLoadedComponent on componentDidMount

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

}
</code></pre>

3) Call the component on the render: 

<pre><code>{this.state.lazyLoadedComponent(value.createdOn)}
</code></pre>

By following these 2 examples you should, hopefully, be looking at a bundle.js under 250KB.

blocks|key|2253812|text|作为一种可能的解决方案，您可以使用metro捆绑器提供的ram-bundle格式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2253813|在这种情况下，您将不会加载整个js-bundle+-您将只加载在启动时需要的部分(在许多应用程序中有很多地方，用户甚至可能看不到，并且此功能允许您加载这些部分，仅当它们需要时)。因此您可以简化入口点，只加载捆绑包中的一小部分。|2253814|你可以看看react-native-bundle-splitter。这个库与几乎所有流行的导航库很好地集成在一起，并允许您推迟加载特定的路线。例如，如果您有一个登录屏幕，则只能在启动时加载此屏幕，所有其他屏幕在后台加载或开始加载，只有当用户可以看到它们时。|2253815|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/react-native-bundle-splitter^0|H|5|S|A|0|F|9|0|5|S|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

As a possible solution you can use <code>ram-bundle</code> format, that <code>metro</code> bundler provides.

In this case you will not load the entire <code>js-bundle</code> - you will load only part, that you need at a startup (in a lot of application are a lot of places, which user may not even see, and this feature allow you load such parts, only when they are required). So you can simplify your entry point and load only small piece of your bundle. 

You can look at <a href="https://www.npmjs.com/package/react-native-bundle-splitter" rel="nofollow noreferrer">react-native-bundle-splitter</a>. This library well integrated with almost all popular navigation libraries and allows you to postpone a loading of specific routes. For example, if you have a login screen, you can load at start up only this screen, and all others load in background or start the loading of them, only when user can see them.

I am looking for a way to optimize the startup time of a pure react native mobile app.

As a JavaScript framework, is that possible to bundle the JavaScript files into separated files, say something like <code>common.js</code> and <code>app.js</code>. I was searching via Google with keywords something like "<code>react native webpack</code>" stuff but it seems like all these libraries are deprecated or out of date, such as <code>react-native-webpack-server</code>, <code>react-native-webpack-starter-kit</code> etc. 

I am wondering if anybody here is also looking for a way to optimize the JavaScript bundle in react native. Or, maybe these third party bundle approach has been overcame by Facebook standard bundle?

React Native startup optimization

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在寻找一种方法来优化一个纯反应原生移动应用程序的启动时间。作为一个JavaScript框架，是否可以将JavaScript文件捆绑成单独的文件，比如common.js和app.js。我通过谷歌搜索"react native webpack“之类的关键字，但似乎所有这些库都被弃用或过时了，比如react-native...

问React本机启动优化
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问React本机启动优化EN