首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CRA SSR的资产分块加载

是指使用Create React App (CRA)框架进行服务器端渲染 (Server-Side Rendering, SSR) 时,对资产进行分块加载的过程。

资产分块加载是一种优化技术,它将应用程序的代码和资源分割成多个较小的块,按需加载,以提高应用程序的性能和用户体验。在CRA SSR中,资产分块加载可以通过以下步骤实现:

  1. 代码拆分:CRA SSR使用Webpack作为打包工具,可以通过Webpack的代码拆分功能将应用程序的代码拆分成多个较小的块。代码拆分可以根据路由、组件或其他条件进行,以实现按需加载。
  2. 资源加载:在服务器端渲染过程中,根据当前请求的路由和组件,加载所需的代码块和资源。这可以通过Webpack的动态导入功能实现,即使用import()函数动态导入代码块。
  3. 服务器端渲染:在服务器端,根据请求的路由和组件,加载所需的代码块和资源,并将其注入到渲染的HTML模板中。这样,当浏览器请求页面时,只需加载所需的代码块和资源,而不是整个应用程序的代码。

CRA SSR的资产分块加载具有以下优势和应用场景:

优势:

  • 提高性能:资产分块加载可以减少初始加载时间,只加载当前页面所需的代码块和资源,提高页面加载速度和响应性能。
  • 减少带宽消耗:只加载所需的代码块和资源,减少不必要的带宽消耗。
  • 优化用户体验:快速加载页面内容,提供更好的用户体验。

应用场景:

  • 大型应用程序:对于大型的React应用程序,资产分块加载可以减少初始加载时间,提高用户体验。
  • 低带宽环境:在低带宽环境下,资产分块加载可以减少带宽消耗,提高页面加载速度。
  • 多页面应用:对于多页面应用,可以根据不同页面的需求,按需加载所需的代码块和资源。

腾讯云相关产品和产品介绍链接地址:

  • 腾讯云Serverless Cloud Function(SCF):腾讯云的无服务器计算产品,可用于实现资产分块加载和服务器端渲染。详情请参考:腾讯云Serverless Cloud Function(SCF)
  • 腾讯云CDN加速:腾讯云的内容分发网络产品,可用于加速资产的分发和加载。详情请参考:腾讯云CDN加速
  • 腾讯云云服务器(CVM):腾讯云的云服务器产品,可用于部署和运行服务器端渲染应用程序。详情请参考:腾讯云云服务器(CVM)
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vite 2.0 正式发布!

一个构建命令,它将代码与 Rollup 捆绑在一起,后者预先配置为输出用于生产高度优化静态资产 此外,Vite 通过其插件 API 和 JavaScript API 具有高度扩展性,并提供全面的类型支持...为了了解 Vite 速度有多快,这里有一个视频比较了使用 Vite vs. create-React-app (CRA) 应用程序过程: 关于Vite2 这实际上是 Vite 第一个稳定版本。...,以尊重别名和 npm 依赖 URL rebasing 不管文件从哪里导入,路径都会自动重新设置 CSS code splitting Server-Side Rendering (SSR) Support...Vite 提供了 api,以便在开发过程中有效地在 Node.js 中加载和更新基于 esm 源代码(就像服务器端 HMR 一样) ,并自动外部化 commonjs 兼容依赖关系,以提高开发和 SSR...生产服务器可以与 Vite 完全解耦 Vite SSR 是作为一个低层次特性提供,我们期望看到更高层次框架在引擎盖下利用它 Opt-in Legacy Browser Support Vite 目标是默认支持原生

82130

React为什么不将Vite作为默认推荐?

这个问题常见解决方法是 —— 将请求数据逻辑收敛到路由方案中。 再比如,随着业务不断迭代,业务代码体积越来越大,常见优化手段是懒加载组件。 但是,手动执行懒加载常常会产生意料之外问题。...比如,页面中有个图表组件,如果开发者懒加载了这个组件,但是该组件在on mount时请求数据,这又会陷入请求瀑布问题。...要彻底解决这个问题,需要配合3类技术方案: 数据请求方案(解决数据流向问题) 路由方案(解决数据请求时机问题) 打包方案(解决懒加载实现问题) 类似的问题还有很多,比如CSR首屏渲染速度慢问题(需要通过...SSR解决)。...最终,React团队更倾向如下解决方案:将CRA作为一个脚手架工具,启动后会根据用户不同场景需要(比如是SSR还是CSR)推荐不同框架,再将CRA作为「不使用框架情况下兜底方案」。

1.3K10
  • SPA 和 React:你并不总是需要服务器端渲染

    你可能已经注意到,React 文档“Start a New React Project”部分不再推荐使用 CRA(Create React App)。...一个反复出现问题就是“无休无止加载器(spinner-geddon)”,每当导航到一个新“页面”时,都会出现一个加载器动画,表示正在加载数据,只有在成功完成 HTTP 请求后,页面才会充满内容。...Margaret、Celia 和 Evelyn 非常喜欢这个应用,她们不介意偶尔出现加载器动画”,因为这个应用解决了她们问题。它也为公司解决了一个问题,即不再需要昂贵软件许可。...但是,既然 React 文档不再推荐使用 CRA,那么如果你现在要构建 SPA,那还能使用什么呢?...将 Vite 与 React 组合使用 Vite 可以与 React 一起使用,并可以作为 Webpack(CRA 使用模块打包器)更现代替代方案。

    34330

    SPA和React: 并不总是需要服务器端渲染

    您可能已经注意到,React文档“开始一个新React项目”部分不再推荐使用CRA(Create React App)。...SPA存在问题 反复出现一个问题是“spinner-geddon”;每次您导航到一个新“页面”时,都会显示一个加载动画来指示正在请求数据,只有在HTTP请求成功完成后,页面才会用内容进行渲染。...Margaret, Celia和Evelyn非常喜欢它,她们不介意偶尔出现加载动画-因为该应用程序为她们解决了一个问题。它还为公司解决了一个问题: 不再需要昂贵软件许可。据我所知,它至今仍在使用。...有许多内部应用程序永远不会面向公众,也不需要使用更现代React驱动SSR框架提供任何功能。但是由于React文档不再推荐CRA,如果今天要构建SPA,您还可以使用什么呢?...使用Vite和React Vite可以与React一起使用,作为比CRA中使用Webpack(模块打包器)更现代替代品。

    13310

    如何在2023年开启React项目

    使用Vite Vite[1]是create-react-app(CRA)明确继承者,因为他们俩没有太大区别。...image.png 与create-react-app(CRA)相同,Vite仍然倾向于创建单页应用程序(SPA),其客户端路由/渲染功能优于SSR。...然而,由于SSR如今正成为一个更重要的话题,因此它在Vite中作为了可选功能。 image.png 当项目来自CRA时,直接迁移到Vite[2]是很容易。...使用Vite优点 几乎可以直接替代CRA 依然对SPA/CSR友好,但SSR是可选 没有框架/公司捆绑 轻量级 在功能层面上不与React混为一谈 因此专注于React本身,而不是一个框架 了解React...重点 与React新功能不一致 使用群岛架构,而不是选择性混合 例如,React服务器组件 每次点击链接都要重新加载整个页面 因此不是最好导航用户体验 这些问题最终会在RSCNext中得到更好解决

    43150

    基于Vue-SSR优化方案归纳总结

    2、减少首页渲染数据量:根据业务调整用户首屏可见所需渲染数据,其他数据懒加载或异步加载。...,分析数据和模板间依赖,用异步数据分割模板,分块逐步输出。...其次,由于这种耗时会同步阻塞页面的FP,所以更进一步方法是流式输出或分块,减少首屏渲染时间。...再看看流式传输和分块传输,两者虽然都对FP时间优化了,但流式传输受限于cgi拉取时间,分块传输改造成本大。而且两者存在一个共性问题,那就是可交互时间仍然没有优化。...当然,这里并不是要否定所有的优化方法,而是方法各有优劣,比较优缺点大家才能根据自己业务需求和优化场景选取合适优化方法。受流式传输和分块传输启发,我们能不能在这上面下功夫?

    2K30

    react项目打包优化

    yarn add react-app-rewired customize-cra 因为这里讲的是使用 create-react-app 创建项目,此时我们需要对 create-react-app 默认配置进行自定义...引入 react-app-rewired 并修改 package.json 里启动配置。由于新 react-app-rewired@2.x 版本关系,你还需要安装 customize-cra。...这里我们可以做路由加载:即这个路由页面在使用到时候在进行引入加载,而不是一开始就加载。...这个这样做好处就是可以吧异步加载这些组件js以及CSS单独打包出来,这样就不用一次加载过大js文件了。...使用SSR渲染 使用SSR渲染不仅可以对SEO优化有一定帮助,同时,还可以对react项目首屏优化项目有一定优化作用,所以,如果有需要,可以采用SSR渲染模式进行开发。

    3.7K30

    创建 React 应用 7 种方式,你用过几种?

    因此社区中提供了一些可配置 cra 方案,craco、react-app-rewired craco 可配置 cra 这里以 craco 为例,首先需要安装 @craco/craco yarn add...也就是我们常说 SPA(single page application),使用 useEffect 获取接口数据。 SSR - 服务器端渲染 SSG - 静态站点生成。...Server component- 也是 SSR 一种, 但互补了 SSR 不足,让网页拥有流式渲染能力。...提供了代码拆分、路由约定等优化方案,可以提升应用加载速度和运行效率。...例如,在 umijs 中,/src/pages 目录下文件会自动生成路由,无需手动配置。 提供了按需加载、代码拆分等优化方案,可以提升应用加载速度和运行效率。

    6.9K10

    2019 TWeb 腾讯前端技术大会精彩回顾

    接入了 "吐个槽" 服务, 可以方便地收到真实用户反馈 将所有遇到问题落地为测试用例, 防止之后再犯 腾讯文档“白屏”监控体系与优化 增加 loading, 减缓用户焦虑 对加载失败静态文件进行加载重试..., 并结合 wait-external-webpack-plugin 插件确保重试后, 代码依赖顺序依然正确 在重试加载后, 如果还没加载成功, 就弹框提示用户网络可能存在问题, 让用户刷新或反馈 为了检测加载资源与发布资源是一致...) 更快首次有效绘制(FMP: First Meaningful Paint) SSR 现状 一般SSR, 首屏(FMP)依赖页面所有接口, 首屏不一定快,同时分块传输有额外工作量 开发效率低:...传统SSR, 需要操作DOM, 开发效率低, 难维护, 同构页面可响应时间(TTI)长 SSR页面切换无法渐进式加载, 页面切换时不能定义过渡动画 什么是分块传输 不需要等待页面所有的接口返回, 页面头部接口响应即可响应页面...分块传输自动化 程序分析模板异步数据, 自动拆分模板 根据模板上下依赖关系 , 自动收集数据依赖 自动把局部模板和数据关联 分享主题: Serverless SSR 实践 讲师: 水澜 - 阿里巴巴前端技术专家

    1.4K10

    next.js 源码解析 - dynamic 篇

    上文我们一起看完了在 next.js 中如何解决 hydration fail 错误和如何局部关闭 SSR 几个方案,其中聊到了 next.js dynamic API。...API 因为昨天文章中主要讲到如何使用 dynamic 关闭组件 SSR,并未讲到其它细节,所以先看下 dynamic 具体 API 设计。... }); 这种情况下 next.js 会在组件加载过程中显示 loading 内容来占位,这里其实在内部使用是 react-loadable。...源码 我们再来看下源代码,dynamic 所在文件位置为 packages/next/shared/lib/dynamic.tsx,我们下面分块解析一下,先看下接口部分: function dynamic...这里可以看到默认 loading 参数,在开发环境下如果异步组件加载有报错将会进行展示。

    1.8K20

    岛屿架构

    运行后, 服务端直出 HTML,除了 HMR ,没有引入额外 JavaScript。真 Zero JS! ---- 然而,这个有别于典型 SSR 框架。...SSR 也是在服务端渲染完整 HTML 树,但是在客户端依然需要加载完整视图框架代码,然后进行水合(Hydration),才能让页面变得可交互: 那 Astro 没有 JS,显然是无法与用户进行动态交互...现在来回顾一下开头提到 ‘要点’: 岛屿架构 SSR + CSR CSR 静态 HTML 静态 HTML 优先,无 JavaScript 服务端渲染 HTML 初始内容, 包含完整客户端副本 完全在客户端加载渲染...可以通过代码分块 + https://www.patterns.dev/posts/progressive-hydration 实现按需加载 完整加载。...可以通过代码分块实现按需加载 岛屿架构优势 岛屿架构非常适合以内容为中心网站,比如博客,文档网站,新闻网站等等。

    41760

    边缘渲染是如何提升前端性能

    ,数据加载部分通过Ajax从后端获取,因此很好解决了前后端分工开发问题。...引领全栈技术发展,前端又回到了当初SSR路上,只不过这次回归是一次螺旋式上升。...CDN节点上发起动态内容请求,之后将动态内容与静态部分以流形式进行拼接,从而进一步提高了用户首屏加载时间,尤其在边缘地区或者弱网环境也有能拥有很好用户体验,此外还减少原先SSR服务器压力。...场景二:边缘服务读取缓存静态部分HTML,中心服务提供动态HTML SSR服务部署在中心,边缘流式返回HTML内容(利用HTTP Transfer-Encoding: chunked 分块传输机制),...通过Demo对比,可发现ESR比SSR有着明显优势,其静态顶导首先绘出,后面动态数据也比SSR返回要快。 此外,结合如下埋点统计,ESR优势更加得以印证。

    83710

    2020前端性能优化清单(四)

    完全由服务器端渲染(SSR) 在典型SSR(例如WordPress)中,所有请求都完全在服务器上处理。所请求内容将作为完成 HTML 页面返回,浏览器可以立即进行渲染。...带有 (Re)Hydration 服务端渲染(SSR + CSR) 带有 (Re)Hydration 服务端渲染时,从服务器返回 HTML 页面还包含一个脚本,该脚本可加载完整客户端应用程序。...在React中,我们可以使用 renderToNodeStream[23] 而不是 renderToString 来通过管道返回响应并将 HTML 分块发送。...他们推迟了不需要组件激活,增加了用户交互(滚动)或空闲时间激活,测试表明它可以改善TTI。 36 始终倾向于自行托管第三方资源。 通常,默认情况下自托管静态资产[45]是一个很好经验法则。...在2019年6月至7月,Chrome 和 Firefox 开始对 HTTP Cache-Control stale-while-revalidate 支持,由于过期资产不再在关键路径中,它可以改善后续页面加载延迟

    3.3K20

    Netlify提供静态网站渲染和缓存技术

    静态渲染仍然是今天使用一个很好选择,特别适合于提供单个HTML文件站点,如单个内容落地页。不需要服务器计算——所以您页面将加载快。...与 SSR 类似,CSR 最适合动态实时数据,但它也有一些缺点。使用 CSR 页面上可能需要处理数百兆字节 JavaScript,因此您网站可能加载和显示数据很慢。...如果您使用 CSR 来呈现整个网站,则搜索引擎只能阅读您占位符内容,而不是最终由 JavaScript 加载丰富内容。...随之而来是,您可以从内容交付网络(CDN)(如NetlifyCDN)提供网站,该CDN从最接近请求服务器节点位置提供静态文件和资产,使您网站非常非常快速。...## 边缘渲染(ESR)这里是真正令人兴奋地方。还记得我们谈论 CDN 模型吗,其中静态页面和资产从最接近用户地理服务器位置传递给用户吗?

    38030

    现代 Web 开发者问卷调查报告

    如果在「工程技术」问题里勾选了 Next.js / Umi / CRA,勾选 React 比例更是提高到接近 100%(选 Vue 比例是 60.91%),这一定程度上体现了 Dan Abramov...SSR 比例超过了静态 HTML 和动态 HTML。在选择了静态 HTML 或动态 HTML 开发者中,选择 SSR 比例都一样提高到 59%。...在选择了 SSR 开发者,选择 REST API 下降到 61.69%(可能是因为很多原本要写 API 需求可以直接在 app 里实现了),在「工程技术」问题中选择 SSR 框架(NextJS /...反过来,选择了 SSR 框架开发者,选择 SSR 比例也从 50.33% 提高到了 62.91%。 在「服务器端技术」问题中选择了非 JS 语言开发者,选择 SSR 比例大幅下降到 25%。...选择了 Umi 和 Next.js 开发者分别有 25.33% 和 16.5%,CRA 则只有 10.62%。

    1.5K40

    五分钟了解互联网Web技术发展史

    让我们看看传统SPA和加入了SSRSPA在请求上区别: 客户端渲染示意 服务端渲染示意 传统SPA可以更快返回页面,请求响应时间更短;加载JS后才开始渲染,白屏时间更长,loading结束后用户感知到相对可交互时间更早...而SSR在接到浏览器请求时,先从后端拉取首屏数据渲染在页面内才返回,请求响应时间更长;因为节约了一段浏览器请求首屏数据时间,白屏时间更短。由于JS异步加载,用户感知相对可交互时间变晚。...归根结底,SSR不能很好应付业务复杂情况,首屏要加载东西还是太多了。所以我们要怎样让用户感知到白屏时间变短呢?...减小加载体积 减少接口请求数 PWA缓存 分块渲染 … IMWEB企鹅辅导落地了 SSR + PWA 之后,达到了几乎秒开程度。 NodeJS 说完了 SSR,必须说一下 NodeJS。...bigPipe使用 分块渲染 思想,将网页渲染变成了一小块一小块,服务端渲染好一块页面就发送给客户端。他们直接把木桶拆了,打破了短板效应。

    4K20

    Airbnb 引入 HTTP Streaming,网页性能升级

    作者| Rafal Gancarz 译者| 明知山 策划| 丁晓昀 Airbnb 通过引入 HTTP Streaming 来提升网站页面加载性能。...他们将测试每个页面(包括主页)首次内容绘制(First Contentful Paint,FCP)时间降低了大约 100 毫秒。他们还最小化了后端慢查询对加载时间影响。...尽早冲刷(Early Flush)是一种利用 HTTP Streaming 技术让浏览器可以更早地加载外部资源技术。它需要将 HTML 页面分成两个部分,并使用分块传输编码分别发送它们。...他们使用 MutationObserver 来检测延迟数据何时被加载,并将数据注入到应用程序网络数据存储中,从而避免了额外网络请求。...我们也很高兴看到更广泛前端生态系统朝着优先化 Streaming 方向发展——从 GraphQL @defer 和 @stream 到 Next.js Streaming SSR

    22540

    如何移除你项目中99%JS代码

    miško hevery 在演讲中,他介绍了一款全栈SSR框架 —— Qwik,这款框架号称「能帮你移除项目中99%JS代码」。 他是如何办到,本文我们来介绍下Qwik。 性能差?...如何优化FCP FCP(First Contentful Paint,首次内容绘制)测量「页面从开始加载到页面内容任何部分在屏幕上完成渲染时间」。...但是,Qwik更极端,他目标是 —— 干掉所有不必要JS耗时,这里耗时包括两部分: JS作为静态资源加载耗时 JS运行时耗时 超超超细粒度hydrate 如果说传统SSR粒度是「整个页面」。...为了区分,useClientEffect是「只在客户端执行useEffect」。 加了$后缀,代表他是「懒加载」。...Qwik卖点是:将JS代码拆分从常见「编译时」(比如webpack分块)、「运行时」(比如dynamic import),变为「交互时」。

    8.9K60

    TWeb Conf 2019 精彩回顾

    js资源加载失败重试后加载顺序以及结合Subresource Integrity、 CSP来做页面内容防篡改改劫持,都是不错实践亮点。...本次分享主要介绍SSR编译时优化方案, 该方案通过源码上下文相关分析, 从AST推导不同分块间、分块与数据间依赖,实现自动化分块传输;在模板层面, 把Vue语法编译成字符串拼接,经测试在服务端通过...aga编译后代码比Vue官方VDOM快20+倍, 整体提升SSR开发效率和性能。...第三场分享由阿里巴巴前端技术专家-水澜带来 《Serverless SSR 实践》。介绍了利用Rax如何简单高效地开发 SSR 应用,整套 SSR 应用开发方案。...通过 Rax CLI 工具可以快速创建、调试、构建 SSR 应用,并可以以 FaaS 形式发布到阿里云等函数托管平台。

    76920

    【原创】不想eject,还咋修改create-react-app配置?

    三、有需求咋解决 实际开发中,我们还是需要更新webpack、babel配置,比如: antd按需加载; 配置css预处理器 - less; 设置alias、externals; 生产环境打包-去除...antd按需加载 安装依赖: yarn add antd -D 配置 cosnt { override, fixBabelImports } = require('customize-cra');...@7.3.0,如果是最新版本和上面的react-app-rewired和customize-cra版本配合配置时有问题,所以使用了低版本。...= override( // alias addWebpackAlias({ // 加载模块时候,可以使用“@”符号来进行简写啦~ '@': path.resolve(__dirname...lessOptions: { // 根据自己需要配置即可~ } }), // alias addWebpackAlias({ // 加载模块时候,可以使用“@”

    2.9K40
    领券