@utoo/web

@utoo/web 在浏览器中实现了一个完整的 Web 开发环境，包括文件系统、依赖管理和构建流程。它集成了 @utoo/pack（Rust + Turbopack），目标平台为 wasm32-unknown-unknown。

核心概念

1. 真实文件系统：项目存储在浏览器的 Origin Private File System (OPFS)  中。Project 提供了类 Node.js 的 fs 接口。
2. 项目主 Worker：Project 实例运行在 Web Worker 中。主线程对象是一个代理，保持 UI 响应。
3. 线程 Worker：重度任务（打包、编译）运行在一个专用 Web Worker 中，由移植的 tokio 运行时驱动。
4. 加载器 Worker：在一个带有 Node.js polyfill 的专用 Worker 中执行 Webpack loader。
5. Service Worker：充当本地服务器，拦截请求并提供构建产物用于预览。

文件监听与增量构建

@utoo/web 利用现代 FileSystemObserver API  直接在浏览器中实现高效的文件系统监听。这对于支持 Turbopack 的增量构建能力至关重要。

1. FileSystemObserver 集成：tokio-fs-ext crate（由 utoo-wasm 使用）提供了一个 watch 模块来封装 FileSystemObserver API。这使得 Rust 代码能够接收 Origin Private File System (OPFS) 中文件变更的通知。

2. OpfsOffload 层：OpfsOffload 的实现  不仅解决了 Rust 中 JS 对象的线程安全问题（允许多个 Rust 线程并发调用 OPFS），还以最小的侵入性扩展了 turbo-tasks-fs 文件系统。当检测到文件变更时，事件也会通过该层传播到在 WASM 环境中运行的 Turbopack 引擎。

3. 增量编译：Turbopack 的架构建立在响应式图上。当它收到文件变更事件时，仅使依赖图中受影响的部分失效。这触发了仅对已更改的模块及其依赖项的重新计算（重建），从而实现极快的更新。

这种架构确保了 @utoo/web 即使对于完全在浏览器中运行的大型项目，也能提供响应式的开发体验。

服务器要求

您必须配置服务器发送以下两个头：

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp

这是浏览器为启用 SharedArrayBuffer 等强大功能而强制执行的安全要求，这些功能对于底层 WebAssembly 组件的多线程性能至关重要。

示例：webpack-dev-server

module.exports = {
  devServer: {
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    },
  },
};