docs: add new content

Author: wood3n

blog/2025-08-11-前端工具链对比.md

@@ -118,6 +118,8 @@ Formatter 方面进展相对缓慢，目前 OXC 仅实现了一个 Prettier 插
 
 [`Rolldown`](https://rolldown.rs/guide/)，基于 OXC 项目，用于打包前端应用或者库，对标 Rollup。
 
+![image-20250819102511105](./../public/images/image-20250819102511105.png)
+
 Vite 目前使用 esbuild 进行依赖预打包，使用 Rollup 进行生产构建。Rolldown 的目标是将这两个过程统一到一个高性能的打包工具中，以降低复杂性。
 
 Rolldown 提供了与 Rollup 高度兼容的 API（尤其是插件接口），并且具有类似的 treeshaking 功能以优化 bundle 大小。但是，Rolldown 的功能范围与 esbuild 更相似，并内置了以下[附加功能：](https://rolldown.rs/guide/features)
@@ -142,28 +144,28 @@ Rolldown 还有一些在 esbuild 中有相近概念但在 Rollup 中不存在的
 - 支持 HMR（开发中）
 - Module Federation，模块联邦（计划中）
 
-### tsdown
+### Tsdown
 
 [`tsdown`](https://tsdown.dev/zh-CN/guide/) 是基于 Rolldown 开发的一个 library 打包工具，旨在替换 [`tsup`](https://github.com/egoist/tsup)。`tsup` 目前已不再积极维护，其仓库页面介绍也推荐迁移到 `tsdown`。
 
-`tsdown` 在 Rolldown 基础上简化了一些配置，专用于打包库。例如其支持：
+![image-20250819102625335](./../public/images/image-20250819102625335.png)
+
+`tsdown` 在 Rolldown 基础上简化了一些配置，专用于打包库。具有以下特性：
 
-1. 支持生成`.d.ts`定义文件；
+1. 支持生成`.d.ts`定义文件；并且支持 `tsconfig` 的 `isolatedDeclarations` 属性，为每个 TS 文件独立地生成 `.d.ts` 文件。
 2. 支持生成库的多种格式，`esm`、`cjs`，`iife`以及`umd`等；
 3. 支持处理非代码资产，如 `.json` 或 `.wasm` 文件等；
-4. 支持 [`unbundle mode`](https://tsdown.dev/options/unbundle)，也就是 `bundleless`，仅转换模块的代码而不打包；
-5. 支持 `tsconfig` 的 `isolatedDeclarations` 属性，为每个 TS 文件独立地生成 `.d.ts` 文件。
+4. 支持 [`unbundle mode`](https://tsdown.dev/options/unbundle)，也就是 `bundleless`，仅转换模块的代码而不打包。
 
 ### Vitest
 
 Vitest 是基于 Vite 的代码测试工具，旨在替换 Jest。相信大多数人在使用 Jest 测试 TS+React 项目时都会遇到各种各样复杂的坑，尤其是`Jest`在处理 ES Module 以及 TypeScript 模块时让人头疼的配置。Vitest 可能就是你的迁移选择。
 
 Vitest 相比 Jest 存在以下优势：
 
-1. Vite 项目能直接使用，测试环境能重用同一套解析/插件规则等，不需要再折腾配置测试工具；
-2. 速度更快吗，基于 Vite 的按需编译与缓存，`watch` 模式下改一行代码看到测试结果的等待更短；
-3. 内置 ES Module 和 TS、TSX 的支持，无需像 Jest 那样频繁折腾 Babel 或 SWC 配置来让 TS 测试顺利跑起来；
-4. 多进程/worker 并行执行测试，执行测试更快。
+1. 内置 ES Module 和 TS、TSX 的支持，无需像 Jest 那样频繁折腾 Babel 或 SWC 配置来让 TS 测试顺利跑起来；
+2. 无缝衔接基于 Vite 构建的项目，测试环境能重用同一套解析/插件规则等，不需要再折腾配置测试工具；
+3. 速度更快，基于 Vite 的按需编译与缓存，`watch` 模式下改一行代码看到测试结果的等待更短；同时还具有多进程/worker 并行执行测试。
 
 从使用量来看，Vitest 正稳步增长，快速追赶 Jest。
 
@@ -173,6 +175,8 @@ Vitest 相比 Jest 存在以下优势：
 
 [VitePress](https://vitepress.dev/zh/guide/what-is-vitepress) 是基于 Vite 的文档开发工具，使用 VUE 作为渲染框架。
 
+![image-20250819103056624](./../public/images/image-20250819103056624.png)
+
 ### Vite+
 
 Vite+ 是以 Vite 为核心的一系列生态工具，目的是解决 JS 工具散落冗余的问题。也就是你在开发项目的时候，使用 Vite 不需要再去关心如何选择构建工具，测试工具，Linter，Formatter等问题。
@@ -271,7 +275,21 @@ Rspress 还提供以下特性：
 
 ### Rsdoctor
 
-`Rsdoctor`是一个项目构建分析工具，对编译、构建过程以及依赖等信息提供可视化的图表和信息展示，具体功能请查看 [Rsdoctor 的文档](https://rsdoctor.rs/zh/guide/usage/project-overall)。
+`Rsdoctor`是一个项目构建分析工具，对编译、构建过程以及依赖等信息提供可视化的图表和信息展示。简单来说，Rsdoctor 就是一个 `super webpack bundle analyzer`。之前用 Webpack 需要安装`webpack bundle analyzer`、`speed-measure-webpack-plugin`等等插件才能监测到项目内部构建的细节，现在只需要一个插件就能可视化展示更详细的项目构建信息。
+
+Rsdoctor 支持所有基于 Rspack 或 Webpack 的工具和框架，如果是 Webpack 项目，可以使用 `@rsdoctor/webpack-plugin` 接入，基于 Rsdoctor 的 CLI 命令启动项目，就会自动打开一个本地页面展示项目构建的信息。
+
+Rsdoctor 能够分析模块解析 Loader 以及 Plugins 的执行时间：
+
+![image-20250819112048051](./../public/images/image-20250819112048051.png)
+
+Rsdoctor 能够显示打包产物的体积，有`webpack bundle analyzer`那样的 treemap 功能：
+
+![image-20250819111742574](./../public/images/image-20250819111742574.png)
+
+Rsdoctor 还能检测项目的重复依赖，这在 monorepo 项目中十分关键。具体可查看官方文档对于[重复包优化的介绍](https://rsdoctor.rs/zh/blog/topic/duplicate-pkg-problem)。
+
+![img](./../public/images/bundle-alerts.png)
 
 ## Bun
 
@@ -288,6 +306,26 @@ Bun 目前具有以下优势：
 ![image-20250818211707271](./../public/images/image-20250818211707271.png)
 
 6. Bun 内置测试工具，使用`bun test`能直接测试 JSX，TS 等模块代码，同时还支持快照测试，DOM 测试以及 Watch 模式等，非常方便。Bun 的目的是兼容 Jest，但是目前仍有一些功能尚未实现。
+6. Bun 内置[对 monorepo 的支持](https://bun.com/docs/cli/filter)，使用`bun install`或者执行`scripts`时可以使用`--filter`选择 monorepo 下的项目。
+
+总而言之，Bun 将多个工具整合到了它的运行时中，使用 Bun 则不需要单独安装和配置不同的构建、测试工具，下面是 Bun 和 Nodejs、deno 这些运行时的详细对比。
+
+![PixPin_2025-08-19_11-31-10](./../public/images/PixPin_2025-08-19_11-31-10.jpg)
+
+## 总结
+
+总体来说，Rstack 生态发展的路线更加清晰和成熟，所有工具基本都可以用于生产环境了；而 Vite 底层的 OXC 目前还处于早期快速迭代状态，不够稳定，工具之间看起来也比较散落，毕竟 OXC 是完全使用 Rust 重写编译器，所以进展会缓慢一点。
+
+最后就以一张简单的表格总结一下上面介绍的各种工具：
 
-总而言之，Bun 将多个工具整合到了它的运行时中，使用 Bun 则不需要单独安装和配置不同的构建、测试工具。
+| 生态       | Vite                 | Rstack   | Bun             |
+| ---------- | -------------------- | -------- | --------------- |
+| 编译器     | OXC                  | SWC      | 内置            |
+| 构建工具   | Rolldown             | Rspack   | 内置`bun build` |
+| 库打包工具 | Tsdown               | Rslib    | 内置`bun build` |
+| 测试工具   | Vitest               | Rstest   | 内置`bun test`  |
+| Linter     | Oxlint               | Rslint   | 无              |
+| Formatter  | @prettier/plugin-oxc | 无       | 无              |
+| 文档开发   | VitePress            | Rspress  | 无              |
+| 其他       |                      | Rsdoctor |                 |
 

docs/engineer/webpack优化/webpack打包分析工具.md

@@ -76,8 +76,8 @@ CRA 内部是直接禁用了`performance`这个配置项，使用它们自己开
 
 ### 配置项
 
-| Name                    | Type                                                 | Description                                                                                                                                                                                                                  |
-| ----------------------- | ---------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 属性 | 类型 | 介绍 |
+| ----------------------- | ---------------------------------------------------- | ----------------------------------| 
 | **`analyzerMode`**      | 默认是`server`, 其它可选`static`, `json`, `disabled` | `server`模式会开启一个服务器展示打包结果；<br />`static`模式会生成一个 HTML 页面；<br />`json`模式会生成一个 JSON 文件；<br />`disabled`模式需要同时设置`generateStatsFile:true`，只会生成一个 JSON 文件                     |
 | **`analyzerHost`**      | `String`                                             | Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.                                                                                                                                          |
 | **`analyzerPort`**      | `Number` or `auto`                                   | Default: `8888`. Port that will be used in `server` mode to start HTTP server.                                                                                                                                               |

docusaurus.config.ts

@@ -54,6 +54,18 @@ const config: Config = {
             defaultReadingTime({ content, options: { wordsPerMinute: 100 } }),
           blogSidebarCount: 20,
           blogSidebarTitle: "Recent posts",
+          feedOptions: {
+            type: "all",
+            copyright: `Copyright © ${new Date().getFullYear()} icodex`,
+            createFeedItems: async (params) => {
+              const { blogPosts, defaultCreateFeedItems, ...rest } = params;
+              return defaultCreateFeedItems({
+                // keep only the 20 most recent blog posts in the feed
+                blogPosts: blogPosts.filter((_, index) => index < 20),
+                ...rest,
+              });
+            },
+          },
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),