Rsbuild 1.3.0 版本发布：构建工具的重大升级

项目简介

Rsbuild 是一个现代化的前端构建工具，基于 Rspack 构建引擎，旨在为开发者提供高效、灵活的构建体验。它集成了众多优化功能，支持多种前端框架和工具链，能够显著提升项目的构建速度和开发效率。

核心变更解析

安全策略调整

本次版本最值得关注的是对 CORS（跨域资源共享）策略的调整。默认情况下，开发服务器不再自动设置 Access-Control-Allow-Origin: * 头部。这一变更与 esbuild 和 Vite 等工具保持一致，有效防止任意网站向开发服务器发送请求，提升了开发环境的安全性。

开发者现在需要通过 server.cors 配置显式指定可信来源。这种显式配置的方式虽然增加了一些配置成本，但显著提高了开发环境的安全性，防止潜在的跨站请求伪造(CSRF)攻击。

资源导入增强

1.3.0 版本大幅增强了资源导入的能力：

1. 原始导入支持：新增了对 CSS 预处理文件(raw)和行内(inline)导入的支持。开发者现在可以通过特定查询参数控制资源的导入方式：

   • ?raw：将文件作为原始字符串导入
   • ?inline：将资源内联到打包结果中

2. 类型声明完善：为各种导入方式添加了完整的 TypeScript 类型支持，包括 CSS 预处理器(raw/inline)和静态资源(raw)的导入类型。

3. 动态导入完整性：为动态导入的模块添加了子资源完整性(SRI)支持，增强了安全性。

开发体验优化

1. 重启机制改进：重构了文件监听和重启逻辑，解决了重启时可能出现的 MaxListenersExceeded 警告问题，使开发服务器的重启更加稳定可靠。

2. 错误处理增强：

   • 改进了构建错误信息的展示方式
   • 为 process.env 定义添加了警告提示
   • 优化了 transform loader 的错误处理机制

3. 上下文暴露：新增了 context.action 属性，使插件能够获取当前构建的上下文信息。

性能优化

1. 惰性编译：集成了 Rspack 的惰性编译中间件，可以显著提升大型项目的开发启动速度。

2. 缓存改进：修复了 buildCache.cacheDirectory 配置不生效的问题，确保缓存机制能够正常工作。

技术细节深入

构建配置变更

对于需要调整 CORS 配置的项目，现在应该这样配置：

export default {
  server: {
    cors: {
      origin: ['http://localhost:3000', 'https://your-domain.com'],
      // 其他CORS选项...
    }
  }
}

资源导入新特性使用示例

使用原始导入CSS：

import cssContent from './styles.css?raw';

使用内联导入Sass：

import './styles.scss?inline';

类型系统增强

新版本完善了以下类型声明：

• import.meta.env 的现有属性
• 各种查询参数(raw/inline)的类型支持
• 插件API中的依赖管理方法类型

升级建议

1. 安全配置迁移：检查项目中是否有依赖开发服务器CORS头部的场景，及时添加 server.cors 配置。

2. 构建缓存：如果使用自定义缓存目录，确保 buildCache.cacheDirectory 配置正确。

3. 资源导入：评估是否可以利用新的raw/inline导入特性优化项目资源加载。

4. 错误处理：检查构建过程中的警告信息，特别是关于 process.env 的警告。

总结

Rsbuild 1.3.0 通过安全策略调整、资源导入增强和开发体验优化，为前端开发者提供了更安全、更高效的构建体验。特别是对CSS预处理和静态资源处理的增强，使得资源管理更加灵活。建议开发者及时升级以获取这些改进，并根据项目需求调整相关配置。