Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/630https://channel.meo-ai.com/posts/630Sat, 09 May 2026 01:12:57 GMT<span class="post-title-source">《为特定场景"投影"React：从60KB到7KB的极致裁剪实验》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23%E5%B7%A5%E7%A8%8B%E5%8C%96" title="#工程化">#工程化</a> <a href="/search/result?q=%23React" title="#React">#React</a> <a href="/search/result?q=%23TanStackStart" title="#TanStackStart">#TanStackStart</a> <a href="/search/result?q=%23AICoding" title="#AICoding">#AICoding</a> <a href="/search/result?q=%23PerformanceOptimization" title="#PerformanceOptimization">#PerformanceOptimization</a> <a href="/search/result?q=%23Vite" title="#Vite">#Vite</a> <a href="/search/result?q=%23RSC" title="#RSC">#RSC</a> <a href="/search/result?q=%23BundleSize" title="#BundleSize">#BundleSize</a><br /><br />总结：<br />TanStack作者Tanner Linsley发现React 19在Vite打包后仍占约60KB gzip，远大于TanStack全家桶总和。受"代码即物化视图"理念启发，他借助AI代理在一天内生成了一个针对TanStack Start需求定制的React"投影"——保留完整公共API，但移除并发调度、时间切片等不需要的功能，核心仅7.08KB gzip。该项目已在其个人博客和tanstack.com生产环境运行，JS体积减少33%至85%，渲染性能提升2到3倍，验证了当代码生成成本骤降时，为特定场景定制依赖库投影的可行性。<br /><br />文章要点：<br />- 作者发现React打包后仍有约60KB，比TanStack全家桶加起来还"胖"，成了整个技术栈里"最不能删却又最大块头"的存在<br />- 本想用Preact"瘦身"，但它和React 19在use()、服务端动作、hydration等边缘地带已经"渐行渐远"，补丁叠补丁让人望而却步<br />- 一个超酷的观点启发了他：如果写代码能像查数据库一样"按需生成"，那代码本身只是"理念"的一种展示形式，我们完全可以为不同场景生成不同版本的React<br />- 借助AI代理，只用一天就"捏"出了一个迷你版React，保留了你熟悉的hooks、JSX、Suspense和SSR，但扔掉了并发调度、时间切片这些TanStack Start用不上的"重型装备"<br />- 设计得像乐高一样：7KB核心底座 + 8个可插拔功能（context、suspense、portal等），不需要的模块在构建时直接替换成空实现，不会混进最终包<br />- 真刀真枪上了生产环境：个人博客JS少了三分之一，首屏快了近两成；tanstack.com这种"重火力"站点也成功扛住，客户端JS砍掉近1MB<br />- 作者抛出思考题：当定制一个库的成本从几个月降到几天，继续默认 shipped 全套通用库，反而成了一种需要掂量的选择<br />- 他强调这不是要"取代React"，更像是Linux发行版或歌曲混音——同一个内核，根据不同听众的口味调出不同版本<br /><br />文章URL：<a href="https://tannerlinsley.com/posts/projecting-react" target="_blank" rel="noopener" title="https://tannerlinsley.com/posts/projecting-react">https://tannerlinsley.com/posts/projecting-react</a><a class="tgme_widget_message_link_preview" href="https://tannerlinsley.com/posts/projecting-react" target="_blank" rel="noopener" title="An AI-generated projection of React's public API, shaped around what a TanStack Start app needs. ~9KB client, 2–3× faster on our workloads. Powers this blog today; capable of running tanstack.com end-to-end with no known regressions. An experiment, not a…"> <div class="link_preview_site_name accent_color">Tanner Linsley</div> <img class="link_preview_image" alt="Projecting React" src="/static/https://cdn4.telesco.pe/file/SsFAf4E2TprdTpMP5Rd_ZGw2-HZ4LcLCknxUmDYKJ4LYLcLrv6CJysVhiildIDAJbDkB_kdKG3AtJozpeMmC8yX0nhoQ0O431qPYTV1BQEr3giqvHeNzif0CNYrvd9i28vaT34-2mXibKCFK0c10_q0OQGpMDV5EQ70Qwszl_6e1VwYNZrHLwzUoKwRNIsAewSIvHL2NCgHVpo_UVcEJ2mxd0q4eJQ42VQ8VB5LRe7BC8zT6WVMmuhWQCXk5uv1tRRLFNzJR6Ov089dlGpE6gplrdImjNHb_wEMS7uNDAEKDuey2dSW-o_sWaUTa7a-_2W3v-4qswNFEsWr5n6my1A.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Projecting React</div> <div class="link_preview_description">An AI-generated projection of React's public API, shaped around what a TanStack Start app needs. ~9KB client, 2–3× faster on our workloads. Powers this blog today; capable of running tanstack.com end-to-end with no known regressions. An experiment, not a…</div> </a>https://channel.meo-ai.com/posts/628https://channel.meo-ai.com/posts/628Fri, 08 May 2026 03:02:30 GMT<span class="post-title-source">《probe-image-size：无需完整下载即可获取图片尺寸》</span><br /><br />标签：<a href="/search/result?q=%23NodeJS" title="#NodeJS">#NodeJS</a> <a href="/search/result?q=%23ImageProcessing" title="#ImageProcessing">#ImageProcessing</a> <a href="/search/result?q=%23ProbeImageSize" title="#ProbeImageSize">#ProbeImageSize</a> <a href="/search/result?q=%23StreamParsing" title="#StreamParsing">#StreamParsing</a> <a href="/search/result?q=%23ImageMetadata" title="#ImageMetadata">#ImageMetadata</a> <a href="/search/result?q=%23PerformanceOptimization" title="#PerformanceOptimization">#PerformanceOptimization</a><br /><br />总结：<br />probe-image-size 是一款轻量级 Node.js 库，能在不下载完整图片的情况下快速探测图片尺寸与类型。它支持 URL、Stream 和 Buffer 三种输入方式，覆盖 JPG/PNG/WebP/AVIF/HEIC 等主流格式，通过流式解析仅读取文件头部信息，对大图和远程资源特别省内存、省带宽，是图片预处理场景的理想选择。<br /><br />文章要点：<br />- 支持超多种格式：JPG、GIF、PNG、WebP、BMP、TIFF、SVG、PSD、ICO、AVIF、HEIC、HEIF 统统能读，覆盖面很广<br />- 流式探测超省资源：不需要把整张大图拉下来，只读取文件头部就能算出宽高，远程大图也能秒开，内存和带宽都友好<br />- 三种输入方式任选：可以直接传网址自动下载探测，也可以丢文件流或 Buffer 进去，同步异步 API 都有，接入很灵活<br />- 额外信息一并返回：除了宽高，还会带回图片类型、MIME、方向角（Orientation），ICO 和 AVIF 还能拿到多尺寸变体列表<br />- 安全提示要记牢：对于不可信来源的图片，返回的宽高值别直接信任，建议在自己的业务里再加一层范围校验<br /><br />文章URL：<a href="https://github.com/nodeca/probe-image-size" target="_blank" rel="noopener" title="https://github.com/nodeca/probe-image-size">https://github.com/nodeca/probe-image-size</a><a class="tgme_widget_message_link_preview" href="https://github.com/nodeca/probe-image-size" target="_blank" rel="noopener" title="Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF, SVG, PSD, ICO. - nodeca/probe-image-size"> <div class="link_preview_site_name accent_color">GitHub</div> <img class="link_preview_image" alt="GitHub - nodeca/probe-image-size: Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF,…" src="/static/https://cdn4.telesco.pe/file/Xx0leOWVoTq_hWL_TJzylhifEcVCOXdqLgM0W_zZLQdfr2OQv_r7aCxmq61aKsXZZSbTX5VGfm2H-qixYla9nimeYn0NorcLFlSu58h5IMB5EnZ6rP0O32fICa7m93VGxRhBVchfvLUZDI287-vZMORxWhKXZGhT6fdV_ztm-IBh9Ep0Ay1eiB4jyqih2XnbkogKlKWt6pNKE5uNBRnressnIq1J8oJCJBcpdaC4ECFb850jaZuFe0ksdvip6phx3olSpLmoCh37iTdhFcPp84pj6--rMsR9x2WFdiUmWjjJze-SRcaa9NCLHeLaHIe3QRyVm3Qe7Txi_W_hsS7sOg.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">GitHub - nodeca/probe-image-size: Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF,…</div> <div class="link_preview_description">Get image size without full download. Supported image types: JPG, GIF, PNG, WebP, BMP, TIFF, SVG, PSD, ICO. - nodeca/probe-image-size</div> </a>