React延迟加载和服务器设置
React延迟加载是指在使用React框架开发前端应用时，可以延迟加载组件或模块，以提高应用的性能和用户体验。延迟加载可以减少初始加载时间，只在需要时才加载相应的组件或模块，从而减少了页面的加载量和渲染时间。
延迟加载可以通过React.lazy()函数和Suspense组件来实现。React.lazy()函数接受一个函数作为参数，该函数动态地调用import()函数来异步加载组件。Suspense组件用于在组件加载完成之前显示一个加载中的状态。
React延迟加载的优势包括：
- 提高应用性能：延迟加载可以减少初始加载时间，提高应用的响应速度和用户体验。
- 减少资源消耗：只在需要时才加载组件或模块，减少了不必要的资源消耗。
- 模块化开发：延迟加载可以将应用拆分成多个模块，提高代码的可维护性和可复用性。
React延迟加载适用于以下场景：
- 大型应用：对于大型应用，延迟加载可以减少初始加载时间，提高应用的性能。
- 懒加载组件：对于一些不常用或较大的组件，可以使用延迟加载来提高应用的加载速度。
- 路由懒加载：在使用React Router等路由库时，可以使用延迟加载来实现按需加载路由组件。
腾讯云提供了多个与React延迟加载相关的产品和服务：
- 云函数（Serverless Cloud Function）：腾讯云云函数是一种事件驱动的无服务器计算服务，可以用于实现React延迟加载的后端逻辑。 产品介绍链接：https://cloud.tencent.com/product/scf
- 云存储（Cloud Object Storage）：腾讯云云存储是一种高可靠、低成本的对象存储服务，可以用于存储React延迟加载所需的静态资源文件。 产品介绍链接：https://cloud.tencent.com/product/cos
- CDN加速（Content Delivery Network）：腾讯云CDN是一种全球分布式加速服务，可以加速React延迟加载的静态资源文件的传输和分发。 产品介绍链接：https://cloud.tencent.com/product/cdn
通过使用腾讯云的云函数、云存储和CDN加速等产品，可以实现React延迟加载的完整解决方案，提高应用的性能和用户体验。
相关·内容
在迁移服务器端呈现应用程序到可加载组件以进行代码拆分和延迟加载之后，初始包的大小，从而减少了它的下载时间，如预期的那样。然而，在用可加载组件替换了经典的反应渲染方法后，其余的应用程序代码不变，我在PageSpeed / LightHouse中的累积版面移位得分从0.0 5上升到1或更高。我的意思是，即使不动态加载--任何组件，否则都是最糟糕的。
我做错什么了？
SSR代码在可加载组件(良好的CLS评分)之前:
服务器端：
...
import React from 'react'
import { renderToString } from 'react-dom/ser
浏览 6提问于2021-03-28得票数 7
在下载该页面的所有内容之前，我使用React +React路由器+ 来添加一个preLoader页面。这是我的代码：
AppLoader.js：
import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';
const LoadableComponent = Loadable({
loader: () => import('./App'),
loading: Loading,
浏览 0提问于2018-10-14得票数 3
回答已采纳
我正在尝试使用react+redux创建一个网站。我已经在服务器上设置了jwt身份验证。我想要做的是延迟加载我的一些组件/容器和缩减程序，以便它们只能由经过身份验证的用户下载。我已经知道如何对未经认证的用户(客户端)隐藏组件，但我更希望阻止他们下载相关的javascript代码。
我使用的是webpack，我已经研究了react-router和require-ensure ()，但这种方法似乎根本不能处理身份验证。我也考虑过以某种方式使用fetch (可能将私有代码单独与webpack捆绑在一起)，但是一旦我拿到它，我就不知道如何处理它了。
我处理这个问题的方式错了吗？我看到的唯一替代方案是提
浏览 0提问于2017-02-08得票数 10
1回答
服务器端呈现和单页应用程序
、、、、
当我们使用客户端呈现时，我知道这将减少与服务器的连接时间，例如，如果我们使用react (使用connection app)，react将创建一个js文件，其中包含我们所有的应用程序，除了我们将从api (通常是json中)接收的数据--但这意味着所有的DOM文件都在用户第一次加载页面时得到的那个js文件中，现在对于小应用程序，我不觉得有问题了。但是在大型应用程序中，当我们有大量的页面、组件和子页面时，使用像react路由器这样的路由库时，所有这些事情和代码都会出现在这个文件中吗？那不是太大了吗？立刻被送去？
毫无疑问，这些技术提高了网站的性能和交互性，但我担心的是第一次加载站点，以及如何在相
浏览 1提问于2018-10-02得票数 1
回答已采纳
我已经使用模拟器开发了一个原生react应用程序有一段时间了。在模拟器(iOS)上，应用程序加载非常快(例如重新加载)。然而，当我试图将应用程序加载到设备上时，在加载到应用程序之前，它会在闪屏中花费1-3分钟。
我的项目相当小，除了javascript之外没有额外的资源。查看文档时，我找不到问题的可能原因，尽管我怀疑这与它没有从packager本地服务器获得JS有关。
我做错了什么？
(btw - react-native v0.31)
浏览 1提问于2016-09-11得票数 18
1回答
我将用服务器端呈现来实现代码分裂。为此，我使用的反应-可加载。
但是，在使用import时，我会得到以下错误。
我展示了其他的帖子，但是，没有什么对我有用。
您可能需要一个适当的加载程序来处理此文件类型。@ var Content = (0，_reactLoadable.default)({ var加载程序: function ()){返回导入(‘./components/Content’)；
我的代码看起来是：
import Loadable from 'react-loadable';
const Content = Loadable({
loader: ()
浏览 0提问于2019-01-28得票数 0
我在react 18.2.0中迁移了我的代码。我在用
使用悬念和惰性拆分代码。单页应用程序
分割块加载透明，快乐流正在工作。下面是代码
let LoginPageM = React.lazy(() => import('./LoginPageM' /* webpackChunkName: 'LoginPageM' */));
const Index = ({ isSSR, ...props }) => {
return (
<React.Suspense fallback={<LoaderUI />}>
浏览 13提问于2022-06-17得票数 1
1回答
我使用的是延迟加载Webpack 2.2.0的服务器端渲染，使用的是import()方法，而服务器端只使用babel-plugin-transform-ensure-ignore，除了一件事外，所有东西都运行正常，工作正常。当页面加载时，我可以看到服务器端呈现，但是当webpack调用我的动态组件时，所有页面都会再次呈现，这对于用户来说是可见的。我需要知道如何处理这些问题。当我看到它的时候，我的第一句话是
<div data-reactroot="" data-reactid="1" data-react-checksum="-1269702275
浏览 3提问于2017-02-23得票数 2
回答已采纳
考虑下面的示例代码：
require(["js/components/feed-component", "js/components/single-post-component"], function (x, y) {
ReactDOM.render(React.createElement(
Router,
{ history: BrowserHistory },
React.createElement(Route, { path: "/", component: x }),
浏览 2提问于2016-03-29得票数 1
1回答
据我所知，React lazy会将你的捆绑包分成多个文件。假设我在React.router中使用延迟加载。如果我们的服务器设置为通过GET请求发送整个包，那么React.router如何逐步从服务器获取文件？不管怎样，它不是必须接收整个捆绑包吗？
浏览 27提问于2021-09-30得票数 0
回答已采纳
1回答
我使用Visual Studio提供的模板创建了一个托管在.Net核心后端的React应用程序。 最后，我遇到了一种奇怪的行为:当包含本地保存的图像的组件第一次呈现时，图像会在大约1/2秒的延迟后显示。下一次，组件将使用已显示的图像正常呈现。 当我使用来自互联网的图片时，这个问题不会发生。举个例子： <img src="www.google.com/example.png" alt="random image"> 图像会立即加载。 额外的信息是，当我启动React应用程序和.Net核心服务器时，这个问题就会发生，所以它们共享同一个端口。当我使用np
浏览 32提问于2020-09-28得票数 1
2回答
带有react的HTML异步脚本
、、、、
我正在用webpack/react/redux/node开发一个应用程序，并且已经实现了服务器端呈现。到目前为止，一切都很正常，所以我想提出一个一般性问题。我用webpack来捆绑我的JS文件，还激活了代码分裂。因此，我有两个包：
bundle.js (我的组件和自定义代码)
vendor.js (react/redux模块)
现在，据我所知，当我将这两者放置在一个普通的<script>标记中时，浏览器将等待页面和所有资源被完全加载以显示任何内容。这样我就失去了SSR的性能优势，不是吗？我的意思是，网页仍然会被Web爬虫解析，比如google，但是用户仍然需要等待页
浏览 0提问于2017-02-24得票数 1
回答已采纳
我有一个反应应用程序，我试图优化。对延迟加载组件来说很容易，但我发现自己被困的地方是尝试异步加载和代码拆分防火墙依赖项。
它们占初始加载js的80%，我不需要它们在页面加载之前做任何事情，但是它们与main.chunk.js捆绑在一起。
我试着进口：
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "./firebase";
function App() {
const [user] = useAuthState(auth);
..
浏览 8提问于2022-10-02得票数 0
1回答
我使用的是reactjs的code-splitting延迟加载概念。但是<Suspense>似乎对我不起作用，因为它没有向我展示回退、加载消息和直接在它的渲染中加载代码。
我正在本地开发环境中运行react应用程序，而不使用它的生产版本。下面是我正在使用的代码。
import React,{ lazy, Suspense } from 'react';
class Homepage extends React.Component{
render(){
return(
<div>
<Suspense fallback=
浏览 5提问于2019-10-09得票数 1
回答已采纳
4回答
反应悬念怠速加载而不退步
、、、、
我希望延迟加载组件以减少初始包大小，并使用react路由器使用代码拆分动态获取组件。
然而，当使用React悬念时，它们会迫使您在加载时使用回退。
这不管用：
const lazyLoadComponent = Component =>
props => (
<Suspense> // Missing fallback property
<Component {...props} />
</Suspense>
);
在我的例子中，我是从服务器呈现html的，所以我不想使用旋转
浏览 4提问于2020-08-27得票数 16
回答已采纳
作为一个初学者，我发现我的所有组件都将被构建到一个包中，并被加载到一个html中。甚至我也有许多页面，每个页面都使用不同的依赖关系，最终将被组合成一个大的js。
但在普通的服务器端渲染应用中，每个页面都可以有自己的组件和自己的依赖项。
当有许多组件时，react应用程序会不会太大？在这个行业里，人们是如何应对的？
浏览 1提问于2019-01-06得票数 1
1回答
我对我的nextjs项目有疑问。 我在头文件中添加了一个名为/files的新路由，我不知道为什么当我想要返回home时要花很长时间来加载数据。 我对请求进行了console.log，注意到对我的API和索引调用了两次，但我不确定这是不是一个问题。 包含数据的端点有点慢，但我相信如果我在我的pages/index getInitialProps中调用它，它在开始时加载到服务器中的数据，我是对的？如果我是对的，为什么要花这么长时间才能再次显示数据？ 这是我的代码！ 标题 import React, { Component } from "react";
class Header
浏览 28提问于2020-03-22得票数 0
1回答
我希望将react应用程序分开，这样我就可以在运行时从外部.js文件加载任何逻辑(例如conteners / components)。例如，我将能够用完全不同的逻辑替换一个附加选项卡，或者，例如，仅通过添加.js文件来添加第二个选项卡(不对主响应应用程序进行任何更改)。
目前，我在主react应用程序中添加了一个组件：
import React, { useEffect, useState } from 'react';
const Custom = (props) => {
useEffect(() => {
const script =
浏览 4提问于2022-01-31得票数 0
2回答
可以从外部服务器加载惰性模块吗？我想把我的资源上传到CDN上，但是看起来懒惰的模块是从我的node.js服务器上加载的，这对我不好。
我的服务器只提供angular app的index.html，但资源将从cdn加载。它启动并正常工作，直到一个惰性模块被加载，它是相对于我的服务器，而不是CDN。
浏览 1提问于2018-08-10得票数 3
1回答
我正在构建一个带有GatsbyJS和样式组件的登陆页面，我希望在屏幕中央显示一个SVG徽标。
部署到服务器后，当加载我的页面时，SVG首先被加载并立即呈现到屏幕的左上角，显然是在CSS之前，这使得它在明显的延迟后跳到中心。
我就是这样做的：
// import "styled" and React
import logo from '../images/logo.svg'
const CenterDiv = styled.div`
display: flex;
flex-direction: column;
align-items: center;
浏览 0提问于2018-07-21得票数 1
我想创建一个带有图像的加载屏幕 Router.js文件 const Home = lazy(() => import("../home/home"));
import { LoadingScreen } from "../_components/LoadingScreen";
<Suspense fallback={<LoadingScreen />}>
<Router history={history}>
<Switch>
<Route
浏览 16提问于2020-03-31得票数 1
回答已采纳
真正的发现这个框架给了很多features.My问题，我试图在我的React应用程序中请求大约38916(>30000)个数据，然后在React中的网格视图中显示它们。我正在使用Axios加载通过API.Could的大型数据集，有人告诉我如何在更短的时间内加载大量的记录，在React中?我还想发送多个api parallely.If的请求--任何人都有任何想法或更好的方法，请尽快发布。
浏览 0提问于2021-03-08得票数 0
回答已采纳
1回答
我正在做出反应中的条形承诺，他们的医生说要像这样在组件的外部加载这个承诺：
import {Elements} from '@stripe/react-stripe-js';
import {loadStripe} from '@stripe/stripe-js';
// Make sure to call `loadStripe` outside of a component’s render to avoid
// recreating the `Stripe` object on every render.
const stripePromise = l
浏览 0提问于2021-09-09得票数 0
回答已采纳
1回答
我们中的许多人将熟悉企业web应用程序，这些应用程序是所有业务数据的全部和结束。它们通常是登录身份验证和基于角色的授权之后的各种模块的集合。而不是用户登录到各种较小的应用程序，他们登录一次，并有一个仪表板/菜单，他们可以访问什么。
用户登录
它们的角色被检索并存储在会话中。
根据它们的角色(CRM、CMS、没有管理面板等)填充一个大菜单的应用程序加载。
我们一直在考虑如何利用一些新的框架( React，Vue)，或者我们是否应该利用这些应用程序。
当涉及到国家管理的时候，我是一个挣扎者。我理解使用Redux等类似Redux的方法来管理较小的组件的想法，但是如果一个更大的应用
浏览 2提问于2018-04-18得票数 2
1回答
我对它还比较陌生。所以我对像React和vue这样的JS框架有一个一般性的问题。为表演干杯。
在使用React或vue的网站中，是否会一次加载所有数据？例如，如果我有一个包含许多图片的页面。然后在使用组件或用户调用页面时加载它们？
我找到了一个。在那里，页面只是隐藏的，但仍然加载。这在大型框架中也是类似的吗？
谢谢!
浏览 19提问于2018-01-20得票数 0
回答已采纳
我有一个带有按钮的React组件(显示"Load Data")和几个子组件，每个组件都接受一个数据数组并绘制它们，并且呈现速度相对较慢(高图表)。
单击该按钮时，需要执行以下操作：
将文本从“加载数据”更改为“加载.”(基于this.state.isLoadingData)Pass空数组到子组件(因此它们清除上次加载的数据)向服务器发送请求，以便在收到响应时获取数据，将服务器数据传递给子组件(因此它们绘制新数据)
这项工作如下：
// Make button show "Loading Data..."
this.setState( { isLoadingDat
浏览 3提问于2021-03-05得票数 0
我正在研究<Suspense>和React.lazy()的概念，我想更好地理解发生了什么，以便在现有的应用程序中添加一些逻辑。
让我们从定义开始：
React.lazy函数允许将呈现为常规组件的动态导入。
(由我突出显示的呈现)
和
如果包含OtherComponent的模块在MyComponent呈现时尚未加载，则在等待加载时必须显示一些后备内容.
(我突出显示了加载的)
现在，Suspense定义使用术语load，lazy()使用render。
让我们在这个概念中添加一些代码。
const ComponentOne = React.lazy(() => i
浏览 0提问于2019-06-06得票数 2
回答已采纳
对于我的主页，我尝试使用带有交叉点观察器的可加载组件。当我的redux存储更新时，整个页面都会被重新渲染。我怎样才能避免这种情况？
import React from "react"
import loadable from "@loadable/component"
import { useSelector } from "react-redux"
const Index = () => {
const intersectState = useSelector(state => state.intersectState)
con
浏览 2提问于2021-08-06得票数 0
1回答
我对此反应很新，我正在尝试延迟加载存储在服务器上的标记文件。
我尝试设置一个异步箭头函数，该函数获取文件并通过标记运行它。我在这里找到了这个演示，我试过跟随它，但还没有弄清楚如何遵循它。
class Markdown extends React.Component {
constructor(props) {
super(props)
this.state = {
// some state
}
}
render() {
let markdown = React.lazy(asyn
浏览 1提问于2019-10-20得票数 0
回答已采纳
1回答
我试图在我的应用程序中添加“反应懒惰”，但由于某种原因，它似乎不起作用。
我希望延迟加载工作的组件从服务器获取其数据，然后呈现数据。问题是，在数据实际加载之前，在悬念标记中获取数据的组件会被加载。这是我的密码：
AnotherTest.jsx
const AnotherTest = () => {
const [toDoListData, setToDoListData] = useState([]);
useEffect(() => {
async function fetchData() {
setTimeout(asy
浏览 0提问于2019-05-23得票数 1
回答已采纳
我的react原生应用程序上有一个图形错误，它只出现在iOS上，而不是在android上。
当我更新我的应用程序的历史屏幕状态时(在启动时，或者在我添加搭便车的时候，或者当我删除一个搭便车时)，我在历史记录中的骑行项列表就会消失(使用react本机ListView实现)。我需要触摸屏幕才能显示出来。在此之后，在屏幕间导航期间，我没有问题(因为我没有重新注册历史屏幕)。
我使用redux +redux导航。在启动时，我使用一个常见的操作"LOAD_RIDES“，在每个屏幕还原器中重用它来更新其状态。动作ADD_RIDE，REMOVE_RIDE也是如此。
但是我发现，如果我在启动时自动导航
浏览 0提问于2017-05-17得票数 3
回答已采纳
使用通过延迟加载的react 17，我根据所选的语言动态加载三个组件中的一个( zustand中的状态变量)。导入取决于该变量：
const MyComponent = lazy(() => import(`component-${language}.jsx`))
在迁移到react 18之后，组件处于无限呈现状态。
我想这与新的自动批处理功能有关。
有人能帮忙吗？诚挚的问候
在组件外部创建一个函数，以从组件接收变量作为支柱或从存储区直接导入变量，但是错误仍然存在。
而不是状态变量，我尝试了一个getter从商店，但没有成功。
尝试使用useState和use
浏览 13提问于2022-03-23得票数 2
3回答
我使用react-markdown (转义)从JSON文件加载markdown。
我利用CloudFront上的静态站点交付来削减成本，并消除服务器上的运营成本。
目前，所有帖子都被编译成一个posts.json文件，由基于react的静态站点中的react-markdown读取。
除了可能将其分块到多个文件中以防止需要下载大型json文件之外，这种方法是否存在任何类型的问题？
这是个坏主意吗？
编辑；react-snap被用来“预编译”或其他术语。然而，我不确定这是否对加载到页面上的json做了什么，例如，如果它在build中作为普通HTML得到输出。将不得不确认。
浏览 0提问于2020-08-06得票数 2
我有一个使用react-redux框架构建的复杂应用程序。在许多事情中，它需要服务于MJPEG图像流。该应用程序有多个选项卡(准确地说，是react-tab)，许多流只在其中一些上可见。当用户以足够快的速度操作应用程序时，视频流将挂起，多个流在浏览器检查窗口中显示为“挂起”。其中许多挂起的流不再可见。
服务流目前是通过react render方法中的简单img标签实现的：
<img src='http://a.b.file.jpg/>
我尝试使用onLoad和onError回调，但如果流在浏览器(开发人员工具窗口)中显示为“挂起”，则这些回调都不会被调用。它是一种检测“挂起
浏览 29提问于2018-09-10得票数 0
1回答
是否可以使用React.lazy加载较重的模块
我有一个非常重的原始文件被解析为字符串(大约10MB)，我想延迟加载它。
尝试后：
const Module = React.lazy(() =>
import("./heavyModule").then((heavyModule) => {
return (
<Suspense fallback={null}>
<SomeComponent src={heavyModule.value} />
</Suspense>
);
浏览 19提问于2021-01-16得票数 1
1回答
我正在开发一个React v16应用程序，需要加载一个用于xlsx数据导出的重型(IMO)库。 我使用的是功能组件/钩子。 我理解并使用过用于延迟加载模块的<Suspense />组件和lazy。但是由于这个项目不是一个组件，它只是一个需要通过onClick事件运行的库函数，所以我不能使用惰性/悬念。 我如何才能在需要的时候延迟加载这个函数呢？(writeXlsxFile) import React, { useEffect, useState } from "react";
import { connect } from "react-redux"
浏览 27提问于2021-11-10得票数 1
回答已采纳
在React.js的教程中，它显示了它的javascript文件需要在<head>中，这不允许页面在完成加载之前呈现。
从这个快速的看来，任何需要react.js的网站都不能很好地预测到，因为它抛出了这个问题，“消除了上面内容中的渲染阻塞JavaScript和CSS”。
我的问题是：
这实际上会影响页面速度吗？
这个问题是否意味着google页面排名也会受到影响？
浏览 3提问于2015-07-14得票数 9
回答已采纳
我使用动态import()语法将每个路由组件拆分为单独的捆绑包，并使用React.lazy仅在需要时加载组件。我有一个用作<React.Suspense />后备内容的PageLoading组件。 在“延迟加载”组件准备好呈现之前，是否可以保持当前视图组件的挂载？捆绑包非常小，因此不可避免的是，在呈现“回退”时，页面只会闪烁不到半秒。 谢谢。 编辑:我并不是想制造一个人为的延迟。我所要求的正是我所描述的。
浏览 19提问于2019-04-14得票数 4
1回答
我正在构建一个使用MERN(mongodb，express，react，node)的新闻网站，它基本上会包含大量的图像和视频，而现在我对应该在哪里存储图像和视频感到困惑。我在想：
1-将图像和视频存储在服务器上的文件夹中。(这个想法不太好，因为在一个文件夹中存储大量图像会减缓图像的加载速度。)
2-使用第三方(aws S3)桶。(我认为这是最好的选择)
我想要一个人谁已经建立了这样的网站，以建议我走哪条路，我应该走。
浏览 3提问于2021-12-11得票数 0
回答已采纳
我在firebase上托管了我的react js网站，它需要很长时间才能加载，但过了一段时间后，它加载得很快。我再次部署到相同的站点，同样的问题也发生了。是因为firebase托管需要时间才能让内容完全稳定吗？
浏览 55提问于2021-02-27得票数 2
我能得到一些帮助吗?在我的前端建立一个套接字.io连接，但是这个连接是在我的web负载一开始就触发的，我希望它只有在我在套接字连接上运行jwt登录后才能连接，结果是它失败了，因为我没有机会在它检查之前登录，然后在我登录之后它就会建立连接，直到我手动重新加载页面.
客户：
import React from 'react';
import io from 'socket.io-client'
import { SOCKET_IO_URL } from '../api/config';
const jwt = JSON.parse(localS
浏览 5提问于2022-06-25得票数 1
1回答
我正在尝试使用ES6中的动态模块加载特性，而且它似乎还没有实际实现。但也有像这样的替代品，这应该是暂时可行的。
因此，我有一个ES6项目，使用Babel和Webpack转到ES5上，它自己工作得很好。但是，我的所有代码都合并到一个bundle.js文件中，我想将该文件拆分为模块。当我尝试上面提到的多边形填充时，它会从内部抛出一些错误，这个项目甚至都不会启动。
index.js:6 Uncaught TypeError: Cannot read property 'match' of undefined
第6行内容如下：
var filePrefix = 'file:&#
浏览 2提问于2016-05-13得票数 8
我有一个由输入(jobId)和span (jobDescription)组成的简单组件。当用户输入一个jobId时，组件会发出一个ajax调用来填充描述。听起来很简单。但是，这是我的问题，我写它的方式，组件发出了一堆浪费的调用，用每个按键查找jobDescription。
我尝试将查找更改为onBlur，而不是onChange，但之后我忽略了“初始加载”(当从父服务器传入jobId时，初始呈现)。因此，当第一次打开表单时，jobDescription是空的。
所以我需要的是：
当用户键入jobId时，查找相应的jobDescription。但不一定是每一次关键的中风。
当父文件传入一个
浏览 0提问于2016-11-02得票数 0
我有一个关于react-native的问题。如何在加载初始路由时挂载所有组件？我正在使用反应导航的抽屉导航器。
浏览 1提问于2018-10-22得票数 0
这个问题是关于react中的代码拆分的，让我们举一个例子，我有我的bundle.js文件
我将它拆分为两个文件bundle.js和vendor.js，我可以将其包含在我的index.html中
index.html
<script src='./bundle.js'/>
<script src='./vendor.js'/>
有没有办法让我可以在我的bundle.js文件中包含vendor.js文件，然后这两个文件可以并行加载。
浏览 2提问于2020-03-15得票数 1
我想知道React.lazy将如何在React中提高性能--本地应用程序。
const Warning = React.lazy(() => import('./Warning'));
...
render() {
return (
...
{
{this.state.count > 10 ? (
<React.Suspense fallback={null}>
<Warning />
</React.Suspense>
浏览 0提问于2019-01-27得票数 8
我正在开发react应用程序。应用程序加载时间较长。我想通过外部化react和react-dom的依赖来减少应用程序的加载时间。这种方法正确吗？
浏览 0提问于2020-02-09得票数 1
3回答
在受保护的路由上刷新防火墙路由器
、、、、
我正在构建一个使用firebase，react和redux的todo web应用程序。因此，我保护了rote，如"/todos/add"、"/dashboard"和来宾路由，如"/"、"/signup"、"/login"，如果您经过身份验证，就无法访问这些路由。
我的问题是，当我在"/todos/add"路由中通过身份验证，重新加载页面时，应用程序重新加载，我的操作被分派，将我的用户放到redux存储中，但我将重定向到"/login" an然后转到"/dashboard
浏览 0提问于2018-03-04得票数 6
回答已采纳
我只是通过一个反应课程，目前的主题是懒惰加载。
我想知道为什么延迟加载不是默认的，而是通过不强迫开发人员编写重复代码的方式来处理的？
示例：
在这个过程中，我们希望延迟加载Posts组件，因为在这个组件中，我们只在某个路由上呈现它。因此他取代了
import Posts from './containers/posts'
使用
const Posts = React.lazy(() => import('./containers/posts'))
在使用它的地方，他取代了
<Route path='/posts' component=
浏览 1提问于2019-11-05得票数 5
回答已采纳
3回答
我有一堆react导航标签，其中一个可以打开相机。问题是，当应用程序加载时，react导航会立即渲染所有页面，这样即使我看不到它，相机也是打开的。路由器文件只是加载到TabNavigator对象中的一组表示每个页面的StackNavigator对象。
我怎么才能只渲染我要转到的页面，这样摄像头就不会打开，而不需要打开呢？
浏览 0提问于2017-08-14得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
