![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/373f40b7d9064dd9a48ce0ef6e3c9322~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=YVzRAN7mGPcNJn%2FjLrCpdnMRvtA%3D) 时间过的好快呀，还有5个月多就过年了，距离国庆还有26天。我上半年一直聚焦AI领域，学习AI 方向的技术，每天研究AI方向玩法以及科技动态等等。现在可以很好的利用AI做任何事情，它对我提效以及技能边界再一次放大，可以做更多事情，以及做的效率和质量更快更佳，再次感谢AI。好久没聊前端以及分享前端内容了，今天来回顾一下前端上半年的发展如何... 2025年上半年，前端领域聚焦于实际工具链优化和框架迭代，AI工具的落地虽提升效率但暴露了依赖风险。构建生态向更高效的 bundler 和服务器渲染转移，Vue 和 React 的更新强调性能和类型安全，但实际项目中迁移成本较高。下面我由我亲自筛选总结了一些相关生态变化以及筛选了一些优质的信息源。 ## AI驱动开发和功能集成 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/74a0f62f6dda4b228edbfe368d0c5e10~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=l%2FGGMP9BLgR9Lvmoa7DyNCLIvE8%3D) AI IDE(Cursor,Trae,Kiro...) 和 GitHub Copilot 在上半年广泛用于代码生成和调试，也有很多AI 插件集成到 VSCode 环境中，支持自动创建前端项目和编写组件等。不过在实际使用中，每个人对AI 的理解以及自己的能力边界，能否发挥好AI 是另一回事，更多的是生成一堆冗余的代码，还需要大量手动优化等，不过整体上提升了很大的效率。我日常的工作基本上AI 都可以Cover，真应该给AI 开点工资，哈哈哈。 Clash of the AI Pair Programmers — Github Copilot vs Cursor AI > 详细比较了GitHub Copilot和Cursor AI在实际编码中的使用体验和差异 ## TypeScript和组件库的标准化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/820fb766886e4d668bbe457275a7b05c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=1agGvvkJIw2VkykrdD9ZYoQBdRA%3D) TypeScript成为默认选择，结合shadcn/ui和Tailwind CSS等库，构建设计系统更高效。roadmap强调强类型和可复用组件。减少了运行时错误，提高了团队协作效率，尤其在大项目中。 A curated list of awesome things related to shadcn/ui > GitHub上维护的shadcn/ui资源集合，包含与Tailwind CSS集成的最佳实践 ## 向服务器端转移和性能优化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7162b7ac80cf4f25bfa1b5e35890b454~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=BYgd4L%2FSH%2BoNArFHZdHdsmz8MH8%3D) 框架如Next.js 15版本强调服务器组件和SSR/SSG，减少客户端JavaScript负载。同时，Core Web Vitals成为标准，工具如Vite加速了构建过程。提升了SEO和初始加载速度，适合大规模应用，但增加了后端依赖，模糊了前后端界限。开发者需掌握混合渲染以应对复杂场景。 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c6e6c61f6d51424496cec58ce5c4d9d3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=lqHdddpK5qug7o%2Fty%2FS3kaACWE4%3D) > 专门针对Next.js 15的Core Web Vitals优化技术，包含SSG、SSR等渲染策略 Next.js Performance Optimization: The Complete 2025 Guide > Next.js 15+性能优化的完整指南，涵盖React Server Components和流式渲染 Next.js Rendering Strategies and how they affect core web vitals > 深入分析Next.js不同渲染策略对Core Web Vitals的影响 ## React 框架变化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/14451687dc584b24ae3c4201ac918495~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=Bfz5Up8tcUhacaJaDTeoSTK4TkM%3D) React 19 在上半年稳定发布，引入改进的 Suspense for data fetching、server actions 和 hooks（如 use()），弃用 Create React App，转向 Vite 或 Next.js。生态中，React Router 和 state 管理工具（如 Redux Toolkit）优化了 SSR 支持。 react-19 > React官方博客发布的React 19介绍，包含新特性和改进的详细信息 Sunsetting Create React App > React官方关于Create React App被弃用的声明，推荐迁移到Vite或其他框架 React 19: Goodbye to Old Features, Hello to the Future > 详细介绍React 19的新特性，包括Server Actions和其他重要变化 ## Vue 生态变化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/53d7219b5ad9460bb3c75f02ef6104d6~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=e0J%2FcgdSlGa79ktgC3oVg5snoXc%3D) Vue 3.6 引入 Vapor Mode（轻量运行时），优化了 TypeScript 支持和 Composition API；Nuxt v4 和 Vite v6 提升了构建速度。社区转向 headless UI 和 Tailwind 集成，减少自定义 CSS。 The Future of Vue: Vapor Mode > 详细介绍Vue Vapor Mode如何优化渲染性能、减少内存使用 Preview of Vue 3.6 & Vapor Mode – Insights from Evan You’s Vue.js Nation 2025 Talk > Vue.js创始人Evan You对Vue 3.6和Vapor Mode的独家预览和深入解析 > 探讨Vue生态系统的未来发展，包括Nuxt v4、Vite v6等重要工具的发布计划 ## 构建生态变化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ba0ea47d0122467ab0b70583d17f189a~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=K6OGhL2FL1p2rcT7WFsOu2IWPH4%3D) Vite 成为主流 bundler，取代 Webpack 在新项目中；生态强调服务器组件（如 Next.js）和边缘计算，减少浏览器 JS 负载。CI/CD 工具如 Vercel 和 GitHub Actions 集成更深，支持自动优化。 Vite vs. Webpack: Which One Is Right for Your Project? > 详细比较Vite和Webpack的特性、优缺点和适用场景 Vite’s Creator on a Unified JavaScript Toolchain and Vite+ > Vite创建者关于统一JavaScript工具链和Vite+的深度解析 Vite vs. Webpack: A Head-to-Head Comparison > Vite和Webpack的全面对比，包含性能、开发体验和生态系统分析 ## Node 生态变化 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fea4f08b008b4f50a2f126e2e3a2c686~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=m9NcIEhFlndLN8mnfKAs6Y%2FyEPk%3D) Node.js 22.x默认启用ES Modules，npm包超130万，新增AI/ML库。Express.js、NestJS、Fastify流行，GraphQL和OpenTelemetry增强API和监控。 ECMAScript modules | Node.js v24.7.0 Documentation > Node.js官方文档中关于ES Modules的详细说明，包含最新版本的支持情况 ![image](https://p6-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/87c3c2c7a0fb4be08557fa7ae51c2f72~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg56iL5bqP5ZGY5rW35Yab:q75.awebp?rk3s=f64ab15b&x-expires=1760670422&x-signature=xcQHGIYtwbVHd%2FGnSBOnijzfZNQ%3D) npm Best Practices - RisingStack Engineering > 介绍npm生态系统，提到npm服务超过130万个包，被全球开源开发者使用 The Ultimate Guide to Node.js Libraries for AI Integrations > 发现用于AI集成的顶级Node.js库，构建智能、快速、可扩展的应用程序 10 Top Node.js Libraries and Tools For Machine Learning > 介绍Node.js机器学习的前10个库，从Brain.js到TensorFlow\.js Express.js vs Fastify: An In-Depth Framework Comparison > 深入比较Fastify和Express.js，帮助您选择适合需求的框架，包含性能和现代特性分析 Improved OpenTelemetry & Node Support in JavaScript v8 > 介绍JavaScript v8中改进的OpenTelemetry和Node.js支持，包含新的API和检测功能 ## 最后 AI 时代已经到来，不管是技术还是其它行业，AI 每天在不断的迭代发展，辐射到各个行业，提升效率，提升质量。普通人掌握好AI就可以快人一步。未来更多技术开发工种模式，AI IDE 去全自动驱动开发，Figma 去复现 UI 实现， MCP 去链接业务+其它能力..... 拥抱AI，感谢AI。 👏往期AI动态文章： [成立一人科技公司并上线 App 一定要知道这些事](https://mp.weixin.qq.com/s?__biz=Mzg2ODI4OTMwMw==\&mid=2247492907\&idx=1\&sn=0d344d05d2597ed1c944c68957024f21\&scene=142#wechat_redirect) [使用 Kiro AI IDE 3小时实现全栈应用Admin系统](https://mp.weixin.qq.com/s?__biz=Mzg2ODI4OTMwMw==\&mid=2247492958\&idx=1\&sn=c0838e13ff9986643245c1b5a1920838\&scene=142#wechat_redirect) [从0到1开发一个MCP Server：让AI助手拥有数据库操作能力](https://mp.weixin.qq.com/s?__biz=Mzg2ODI4OTMwMw==\&mid=2247492570\&idx=1\&sn=b9001333af9896d04e37ba06638cef96\&scene=142#wechat_redirect) [从懵懂到落地：记录我们第一次成功将大模型“塞”进业务的曲折历程](https://mp.weixin.qq.com/s?__biz=Mzg2ODI4OTMwMw==\&mid=2247492557\&idx=1\&sn=8949270a3c3bf6f409d6e6046cb8411a\&scene=142#wechat_redirect) [AI Agent爆火后，MCP协议为什么如此重要！](https://mp.weixin.qq.com/s?__biz=Mzg2ODI4OTMwMw==\&mid=2247492207\&idx=1\&sn=f5b28ae930e3d9404e6217135e78cb0a\&scene=142#wechat_redirect) ## 最后欢迎[关注我们](https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/c95cfc940e64c8f034898e884d64ec28.jpg)，后期分享更多AI以及行业最新动态和玩法👏 [或者点击这里也可以找到我](https://img-hello-world.oss-cn-beijing.aliyuncs.com/imgs/c95cfc940e64c8f034898e884d64ec28.jpg)