chore(ci): blog sync

Author: coderPerseus

data/blog/post-50.mdx

@@ -0,0 +1,172 @@
+---
+title: 通过尤雨溪“围绕Vite的前端统一框架”分享，看未来前端发展趋势
+date: 2025-03-16T10:22:18Z
+slug: post-50
+author: chaseFunny：https://github.com/chaseFunny
+tags: ["JavaScript","前端基建"]
+---
+
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316161306.png)
+
+
+## vite 历史
+
+看 PPT 吧！
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316161602.png)
+
+总结：Vite 当之无愧目前前端构建工具首选
+
+## Vite 现状
+
+- 周下载量 2200 万 +，在 23年已经超过 Next.js
+- State of JS 2024 ，Vite 和 Vitest 是最受关注和欢迎的工具
+
+## Vite 生态
+
+在元框架中，除了 Next.js 都有在使用 Vite，毕竟人家现在有自己 turbopack。哈哈哈
+
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316161806.png)
+
+让我们看看这些都是什么吧！
+**第一行**
+
+1. **Astro:** 一个现代化的静态站点生成器，以其岛屿架构（Islands Architecture）而闻名，可以构建快速的网站，只加载必要的 JavaScript。
+   - **GitHub:** [https://github.com/withastro/astro](https://www.google.com/url?sa=E&q=https%3A%2F%2Fgithub.com%2Fwithastro%2Fastro)
+2. **React:** 一个用于构建用户界面的 JavaScript 库，由 Facebook 开发，以其组件化和虚拟 DOM 而闻名。
+   - **GitHub:** https://github.com/facebook/react
+3. **Vue.js:** 一个渐进式 JavaScript 框架，用于构建用户界面和单页应用。
+   - **GitHub:**  https://github.com/vuejs/
+4. **oxc:**  高性能 JavaScript/TypeScript 代码检查工具
+   - **GitHub:**  https://github.com/oxc-project/oxc
+5. **Svelte:** 一个不同的构建 Web 应用的方法。它是一个编译器，将你的应用程序代码转换为高效的 JavaScript，而不是在运行时解释代码
+   - **GitHub:** [https://github.com/sveltejs/svelte](https://www.google.com/url?sa=E&q=https%3A%2F%2Fgithub.com%2Fsveltejs%2Fsvelte)
+6. **Nuxt:**  基于 Vue.js 的 Web 全栈应用框架
+   - **GitHub:** [https://github.com/nuxt/nuxt](https://github.com/nuxt/nuxt)
+7. **solidjs:** 用于构建用户界面的声明性、高效且灵活的 JavaScript 库。
+   - **GitHub:** https://github.com/solidjs/solid
+
+**第二行**
+
+1. **storybook:** 用于独立构建、记录和测试 UI 组件的工具
+        
+   - **GitHub:**  https://github.com/storybookjs/storybook
+
+2. **qwik**： 无需费力即可立即加载 Web 应用程序
+        
+   - **GitHub： https://github.com/QwikDev/qwik
+3. **Rollup:**  一个 JavaScript 模块打包器，可以将多个模块打包成一个或多个 bundle。Vite 在开发环境使用原生 ESM，但在生产环境仍然依赖 Rollup 进行打包和优化。
+   - **GitHub:**  https://github.com/rollup/rollup
+4. **Vite:** 现代前端构建工具
+   - **GitHub:**  https://github.com/vitejs/vite
+5. **rolldown**: 基于 Rust 的 JavaScript 快速打包器
+   - **GitHub:**  https://github.com/rolldown/rolldown
+6. **Angular**  Angular 是一个基于 TypeScript 的开源 Web 应用框架, 由 Google 的 Angular 团队以及社区共同领导和维护。
+   - **GitHub:**  https://github.com/angular/angular
+7. **Nx:** 一个智能的、可扩展的构建系统，特别适用于 monorepo 项目。
+   - **GitHub:**  https://github.com/nrwl/nx
+
+**第三行**
+
+1. **pnpm:** 一个快速、节省磁盘空间的包管理器，类似于 npm 或 Yarn，但它使用不同的依赖管理策略
+   - **GitHub:**  https://github.com/pnpm/pnpm
+2. **VitePress:** 一个基于 Vite 构建的静态站点生成器，由 Vue.js 团队创建，特别适用于文档站点。
+   - **GitHub:**  https://github.com/vuejs/vitepress
+3. **unocss:** 一个即时、按需的原子 CSS 引擎。
+   - **GitHub:** https://github.com/unocss/unocss
+4. **Vitest:** 一个由 Vite 驱动的极速单元测试框架。
+   - **GitHub:** https://github.com/vitest-dev/vitest
+5. **volar:**  用于构建编程语言工具的框架
+   - **GitHub:** https://github.com/volarjs/volar.js
+6. **tauri:** 使用 rust 编写的构建轻量级、安全且高性能的跨平台桌面应用程序
+   - **GitHub:**  https://github.com/tauri-apps/tauri
+7. **redwood:**  一个全栈 JavaScript/TypeScript web 应用框架，旨在让开发者能够以更加集成和流畅的方式构建现代 web 应用
+   - **GitHub:** https://github.com/redwoodjs/redwood
+
+**第四行**
+
+8. 没找到，不知道有没有人知道是什么？
+9. **Laravel:** Laravel 是一个流行的 PHP Web 应用程序框架，虽然它主要用于后端，但它也可以与 Vite 集成，以处理前端资源。
+   - **GitHub:**  https://github.com/laravel/larave
+10. **Vite Ruby :** Ruby的Vite集成
+    - **GitHub:**  https://github.com/ElMassimo/vite_ruby
+11. **Remix:** Remix 是一个全栈 Web 框架，专注于 Web 标准和现代 Web 应用 UX，构建更好的网站。
+    - **GitHub:** https://github.com/remix-run/remix
+12. **Peaks:** : Angular 的全栈元框架。由 Vite 和 Nitro 提供支持
+    - **GitHub:** https://github.com/analogjs/analog
+13. **Million:** 一种声明性的，基于HTML的语言，使构建Web应用程序变得有趣
+    * **GitHub: https://github.com/marko-js/marko
+14. **playwright:**  Web测试和自动化库
+    - **GitHub:**  https://github.com/microsoft/playwright
+
+Vite 恐怖的统治力！
+
+## 使用 Vite 的公司
+
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316174057.png)
+
+## Vite 的缺点
+
+依赖多个职责重复的第三方库
+
+- esbuild：预打包、TS/ JSX 转译、压缩 （GO）
+- Rollup：插件生态、生产环境构建、拆包/产物优化 (TS)
+- SWC：React HMR 、转译、压缩(Rust)
+  这些每一个都负责一部分，但是都有自己的缺点，但是他们功能也有重复的地方
+
+Unbundled ESM 在请求数量巨大时存在性能瓶颈
+
+什么是 Unbundled ESM？
+Unbundled ESM（未打包的 ECMAScript 模块）是指直接使用原生 ES 模块系统而不将它们合并（打包）成单个文件的开发和部署方式
+
+## Rolldown
+
+要解决的问题
+
+- 兼容 Rollup 的插件 API 和生态
+- Rust 提升生成构建性能
+- 添加高阶功能
+- Full bundle mode 解决Vite unbundled ESM 的性能瓶颈
+
+下面是 js 工具链生态，尤大整理
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316175737.png)
+前端搭建大型项目头疼的问题：
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316175914.png)
+
+## Rust for JS
+
+>尤大的公司官网： https://voidzero.dev/
+
+目的：打造完整的高性能的 JS 工具链
+
+为什么是 Rust？
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316180507.png)
+
+OXC 各项都是极致的性能
+
+目前在做的：
+Vite 整合，目前没有通过 Astro 测试
+Vite full bundle mode，HMR 和增量打包构建
+
+rolldown 数据：
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316181219.png)
+
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316181245.png)
+听不懂：
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316181327.png)
+
+## Vite Next
+
+期待
+
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316181409.png)
+
+他们打算交付的产品：
+![image.png](https://blog-1304565468.cos.ap-shanghai.myqcloud.com/work/20250316181658.png)
+
+## 资源：
+
+1. 大会所有 PPT： https://github.com/d2forum/19th
+2. 视频： https://www.bilibili.com/video/BV1WERGYDEix
+
+---
+此文自动发布于：<a href="https://github.com/coderPerseus/blog/issues/50" target="_blank">github issues</a>