草庐IT

react异步组件

泡杯感冒灵 2023-03-28 原文
正常情况下，我们进入项目，在各个页面跳转，这个时候，在控制台可以看到，只加载了bundle.js文件。也就是说，我们所有页面对应的组件的代码都在这个bundle.js里边。
想象一下，当我们只访问首页的时候，其他页面的代码也被一起加载了，如果项目很庞大复杂，bundle.js文件体积很大，那么首页加载的速度就会很慢。我们希望的是，当我们访问首页的时候，就加载首页的代码，当我们访问详情页面的时候，就加载详情页面的代码。这个时候就需要借助异步组件来实现。
异步组件底层比较复杂，但是我们可以通过封装起来的第三方模块来实现会非常简单。
以简书项目为例，我如果想让详情页面通过异步的方式加载，需要怎么做呢？
  • 安装react-loadable npm install react-loadable
  • 在detail文件夹下创建 loadable.js文件
// loading方法需要jsx，所以需要引入react以解析jsx语法
import react from 'react';
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
  // 通过import 异步加载 当前目录下 index.js 也就是detail这个组件
  loader: () => import('./'),
  // 加载是需要时间的，在加载完成之前通过loading函数，返回要显示的内容
  loading(){
      return <div>正在加载。。。</div>
  }
});

// 无状态组件把LoadableComponent组件返回出去
export default () => <LoadableComponent/>
  • 然后 App.js里引入Detail的时候，不是引入 detail下的index.js了，而是引入 detail下的loadable.js
import Detail from './pages/detail/loadable';
然后，当我们再次访问首页的时候，加载的bundle.js里，就没有detail的组件代码了，当我们进入到详情页面，就会加载详情页面的组件代码。
image.png
react异步codesectionloadable

有关react异步组件的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

    exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

  2. ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2

    在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.

  3. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  4. ruby - 使用什么异步 Ruby 服务器？ - 2

    我们开始使用Ruby开发新游戏项目。我们决定使用其中一种异步Ruby服务器，但我们无法决定选择哪一种。选项是:歌利亚抽筋+消瘦/彩虹rack-fiber_pool+rack+thin/rainbowseventmachine_httpserver它们似乎都在处理HTTP请求。Cramp还支持开箱即用的Websocket和服务器端事件。您知道这些服务器的优缺点吗？ 最佳答案 我使用eventmachine_httpserver公开了一个RESTfulAPIinanEventMachine-basedIRCbot绝对不会推荐它用于任何严

  5. Ruby 并发/异步处理(简单用例) - 2

    我一直在研究ruby​​的并行/异步处理能力，并阅读了许多文章和博客文章。我查看了EventMachine、Fibers、Revactor、Reia等。不幸的是，我无法为这个非常简单的用例找到简单、有效(且非IO阻塞)的解决方案:File.open('somelogfile.txt')do|file|whileline=file.gets#(R)ReadfromIOline=process_line(line)#(P)Processthelinewrite_to_db(line)#(W)WritetheoutputtosomeIO(DBorfile)endend你看到了吗，我的小脚本正

  6. ruby - 异步读取 EventMachine 中的文件 - 2

    我使用RubyEventMachines已经有一段时间了，我想我已经了解它的基础知识了。但是，我不确定如何高效地读取大文件(120MB)。我的目标是逐行读取文件并将每一行写入Cassandra数据库(对于MySQL、PostgreSQL、MongoDB等也应该如此，因为Cassandra客户端明确支持EM)。这个简单的片段会阻塞react器，对吗？require'rubygems'require'cassandra'require'thrift_client/event_machine'EM.rundoFiber.newdorm=Cassandra.new('RankMetrics',

  7. ruby - 单个 EventMachine react 器中的多个服务器 - 2

    是否可以在单个事件机器中运行多个服务器？我的意思是，多个服务可以由一个客户端连接同时使用。例如，登录服务器对用户进行身份验证，然后用户可以同时使用聊天室和简单的游戏，例如带有单个客户端套接字的跳棋？或者我是否需要为每个服务使用多个事件机器react器？ 最佳答案 我试过了，它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad

  8. FIFO实战学习-同步FIFO/异步FIFO-格雷码 - 2

    目录FIFO一.自定义同步FIFO1.1代码设计1.2Testbech1.3行为仿真***学习位宽计算函数$clog2()***$clog2()系统函数使用,可以不关注***分布式资源或者BLOCKBRAM二.异步FIFO2.1在FIFO判满的时候有两种方式：2.2异步FIFO为什么要使用格雷码2.2.1介绍格雷码2.2.2格雷码在异步FIFO中的应用2.2.2格雷码判满2.4二进制与格雷码之间的转换2.4.1二进制码转换为格雷码的方法2.4.2格雷码转换为二进制码的方法2.3实现框图2.5实现及仿真代码2.6仿真图验证2.7结论FIFO  这篇更多的是记录FIFO学习，参考了众多优秀的文章，

  9. ruby-on-rails - 如何部署线程安全的异步 Rails 应用程序？ - 2

    我在网络上阅读了大量关于不同版本的ruby​​和rails的线程安全和性能的资料，我想我现在已经很好地理解了这些内容。讨论中似乎奇怪地遗漏了如何实际部署异步Rails应用程序。当谈到应用程序中的线程和同步性时，人们希望优化两件事:以最少的RAM使用率利用所有CPU内核能够在之前的请求等待IO时处理新请求第1点是人们(正确地)对JRuby感到兴奋的地方。对于这个问题，我只是想优化第2点。假设这是我应用中唯一的Controller:classTheController"hello"enddefslowrender:text=>User.count.to_sendendfast没有IO，每秒

  10. Android Studio开发之使用内容组件Content获取通讯信息讲解及实战（附源码 包括添加手机联系人和发短信） - 2

    运行有问题或需要源码请点赞关注收藏后评论区留言一、利用ContentResolver读写联系人在实际开发中，普通App很少会开放数据接口给其他应用访问。内容组件能够派上用场的情况往往是App想要访问系统应用的通讯数据，比如查看联系人，短信，通话记录等等，以及对这些通讯数据及逆行增删改查。首先要给AndroidMaifest.xml中添加响应的权限配置 下面是往手机通讯录添加联系人信息的例子效果如下分成三个步骤先查出联系人的基本信息，然后查询联系人号码，再查询联系人邮箱代码 ContactAddActivity类packagecom.example.chapter07;importandroid

随机推荐