#React

2周前
MCP so 秒开优化经验总结👇 1. 底层框架升级 新版本升级到了 ShipAny v2,对应组件是 nextjs15 + react19 + tailwindcss4。底层框架升级带来了更好的 SSR 渲染性能,构建效率更高,构建产物体积更小,配合 cloudflare 的 CDN 分发,让静态资源加载速度更快了。 2. 部署方案升级 新版本使用 OpenNext 包裹,部署到了 cloudflare workers,跟之前部署在 cloudflare pages 的方案相比,支持 Node.js 运行时,可以使用更加完整的 nextjs 特性,配合 cloudflare 的 KV,R2 等组件,在动态读取数据时效率更高了。 3. 数据索引 之前的版本,数据库用的是 supabase, 用户每次访问都需要实时读取数据,数据量在增长、公网调用延时高,因为用的是 SSR(服务端渲染,需要读到数据再显示页面),最终表现就是用户打开页面很慢。 新版本优化,给数据表建索引,根据数据查询语句创建复合索引,比如 idx_featured_project (type,is_featured,created_at),让读取推荐的 server 或client 数据时速度更快。 4. 数据缓存 给数据表建索引只是让从数据库读数据更快了,但是导航站大部分情况是没必要实时读数据的,因此需要加一个数据缓存,减少对数据库的访问。 因为部署在 cloudflare,直接使用 cloudflare 的 KV 组件做缓存是最方便的,只需要在 worker 的配置绑定一下 KV,然后通过 set,get 方法存,取数据就行了。比如把从数据库读到的 featured servers 缓存到 KV,设置 1 小时后自动过期,这样 1 小时内这部分数据的读取就只会走 KV,速度更快了。 5. 增量静态再生 新版本使用 ISR(增量静态再生)代替原来的 SSR(服务端渲染),主要是在访问页面 page.tsx 里面加上这两行: export const dynamic = "force-static" export const revalidate = 600 dynamic = "force-static" 指示 nextjs 在构建阶段生成静态页面,cloudflare worker 自动把静态资源发到 CDN,用户访问页面走 CDN,速度飞快。 revalidate = 600 指示 nextjs 距离上一次生成静态页面超过 10 分钟就重新生成,这样新产生的数据最多等十分钟就能被用户访问到。 ISR 是秒开的关键。 6. 图片懒加载 新版本使用了 react-lazy-load-image-component 这个 npm 包来实现图片懒加载,让图片加载不影响页面渲染,用户打开页面更快。 因为没有部署在 vercel,next/image 的很多优化特性用不了,所以选择一个轻量的图片懒加载库,而不是用 next/image。 7. 链接页面预取 通过 next/link 替换带链接的 a 标签,自动预取页面,当用户点击链接时,目标页面已经加载好了,就会快速打开新的页面,体验很好。 总结: MCP so 通过升级底层框架,配合 ISR,充分利用了 cloudflare 上的 KV,R2 等组件实现数据和静态资源缓存,配合 cloudflare CDN 分发优势,从而实现了秒开。 经验可复制性: 1. 如果你的项目是基于 ShipAny 开发的,记得更新 cloudflare 分支的最新代码 2. 如果你的项目是基于 nextjs 的,可以参考 OpenNext 文档包一层,部署到 cloudflare workers 3. 如果你的项目需要频繁读取数据,记得合理添加数据库索引,同时设置数据缓存(Redis 或者 cloudflare KV 之类) 4. 如果你的项目不需要实时展示数据(比如导航站),记得设置 ISR,通过静态构建加速访问,配置 revalidate 时间,增量生成新内容 5. 如果你的项目涉及大量图片/视频等资源,记得压缩资源体积,上传文件存储,通过 CDN 做分发
「Agent, RAG, Reasoning」论文 ReSearch: Learning to Reason with Search for LLMs via Reinforcement Learning ReSearch,充满了 ReAct 的影子。它教会模型“何时求助于世界”;但局限在于,ReSearch 只能依赖一种工具。 作者提出了一种创新的框架,名为 ReSearch,旨在通过强化学习(RL)训练 LLM 在推理过程中有效地反复利用 search API 完成任务。 从任务形式上,它解决的是增强LLM+ RAG的问题,但并不同于基于 embedding 的单轮相似度检索方法。 它关注的是多次 query、反复调用 search API 来完成信息查询任务。 并不同于基于embedding去单次算相似度的方法,它解决的是多次query,反复调用search API完成外部信息查询的问题。 而反复调用 API,涉及推理能力去决策调用的时机,以及生成调用的参数 —— 这是一个典型的 agent + function calling 场景。 ReSearch目标将这种search的reasoning能力通过RL学到。 具体来说,ReSearch 采用了专门为搜索功能设计的训练模版: <think>...</think>:表示模型的思考过程; <search>...</search>:表示模型发起的搜索查询; <result>...</result>:表示搜索引擎返回的结果; <answer>...</answer>:表示模型给出的最终答案。 特别地,ReSearch 的奖励函数不是仅仅基于答案对错,而是采用 rule-based 的组合机制:基于答案的 F1 相似度 + 输出格式是否符合模板,以此优化 policy,微调语言模型参数。 此时不免再次提及 ReAct:ReSearch 充满了 ReAct 的循环影子——: Reasoning:模型的思考过程; Action:模型发起的调用; Observation:工具返回的反馈。 ReAct 是神作,它以 verbal reasoning (人话)的方式,将原本充满数学公式的 RL 概念转化为语言链式推理,让 LLM 学会如何使用工具,优雅而简洁。 一些思考: ReSearch 以及前几天分享的 ReTool 是非常类似的工作,它们都通过强化学习微调,将使用工具的能力内化于语言模型中,增强工具调用的鲁棒性。 但它们的局限性也非常明显:ReSearch 和 ReTool 都只支持一种工具 —— search API 和 code interpreter。 而 ReAct,通过 Prompt Engineering,就可以灵活调用多个外部工具。 ReSearch 和 ReTool 的 RL 框架是为“单工具、二选一调度”设计的。如果强行扩展为多工具,训练信号将更加稀疏、credit assignment 更加困难,其策略网络、reward assignment、以及 rollout 表达能力都需要重新设计。 我们距离真正原生具备多轮、多工具能力的通用 Agent,还有一段距离。
4个月前
AI 生成代码,实时预览的几种方案👇 一、 html + srcdoc + iframe 1. AI 生成可以通过浏览器直接打开的 html 文件(单文件,html/css/js 写到一起) 2. 通过 iframe 的 srcdoc 传入 html 源码预览 3. 通过 importmap 指定依赖包的 CDN 资源。 这种方案实现起来简单,预览效率高。 二、react/vue + blob + iframe 1. AI 生成 react / vue 组件代码(单文件组件,无本地 import 依赖) 2. 通过 Babel.transform 转换 react 组件/通过 VueCompiler 编译 vue 组件 3. 使用转换/编译后的组件,构建一个 html 文件 4. 使用 blob 构建预览 url,传入 iframe.src 预览 const blob = new Blob([html], { type: 'text/html' }); iframe.src = URL.createObjectURL(blob); 这种方案稍微复杂一些,适合 react / vue 单文件组件预览。 3. webcontainer 1. AI 生成组件代码(可以返回多个组件文件,组件可以互相 import) 2. 构建一个最小可运行的 vite 项目骨架,把 vite 骨架包含的文件和 AI 生成的组件打包在一起,构建一个文件树 3. 启动 webcontainer 容器,挂载文件树 4. 通过 webcontainer 执行终端命令,安装项目依赖 5. 通过 webcontainer 启动预览服务,得到预览地址 6. 把预览地址传入 webcontainer 容器外的 iframe.src 实现项目预览 这种方案依赖 webcontainer,可以实现多组件预览,灵活性更高,但是涉及到文件挂载,命令行安装依赖等步骤,预览速度会慢一些。 ----- 总结 ----- 方案一适合用户不关心代码,只想快点看到效果的场景,比如用 Pagen 一句话生成 landing page,页面内容都在一个 html 文件里面。 方案二适合辅助前端写组件场景。比如用 CopyWeb 截图复刻设计,生成单个 react 组件,在线预览效果,导出到本地项目使用。 方案三适合一句话生成完整项目场景,比如用 bolt/v0 一句话生成 nextjs 项目骨架,可在线预览,可导出 zip 到本地修改。