Rspack 最佳实践是一套在编写或审查 Rspack 项目时应用的规则集合,主要面向构建配置、优化与排障场景。
用途 该技能用于配置、审查或排查 Rspack 构建问题,覆盖 loader、CSS、资源、类型检查、包体积优化与性能分析等方面。
配置 建议使用 rspack.config.ts 与 defineConfig。多页应用需显式定义 entry 值。保持单一主配置,仅在必要时按 process.env.NODE_ENV 分支。规则条件应保持狭窄且明确(test、include、exclude、resourceQuery)。当存在等价功能时,优先使用 Rspack 内置插件/loader,而非社区 JS 替代方案。
CLI 若已安装 @rspack/cli:本地开发使用 rspack dev;生产构建使用 rspack build;rspack preview 仅用于本地生产预览。
类型检查 使用 ts-checker-rspack-plugin 集成开发/构建类型检查,或将 tsc --noEmit / vue-tsc --noEmit 作为显式脚本步骤运行。
CSS 选择一种策略:现代方案可使用内置 CSS(type: 'css' | 'css/auto' | 'css/module');从 webpack 迁移时可用 css-loader + CssExtractRspackPlugin 保持兼容;纯样式注入运行时场景可用 style-loader。可选:当目标是语法降级加厂商前缀时使用 builtin:lightningcss-loader;预处理 Sass/Less 文件使用 sass-loader/less-loader;集成 Tailwind CSS 使用 @tailwindcss/webpack。
包体积优化 非关键代码路径优先使用动态 import();尽量选用轻量库;保持 target 与真实兼容性需求一致。
资源管理 从项目源码目录导入由源码管理的资源,而非从 public 导入;public 文件通过绝对 URL 路径引用;优先使用资源模块(asset、asset/resource、asset/inline、asset/source),而非旧版 file-loader/url-loader/raw-loader。
性能分析 怀疑 JavaScript 侧开销时使用 Node CPU 分析(--cpu-prof);使用 RSPACK_PROFILE=OVERVIEW 并分析 trace 输出以定位编译阶段瓶颈;在可行时优先用 Rspack 内置能力替换已知慢栈(babel-loader、PostCSS、terser)。
安全 启用生产 source map 时,不要将 .map 文件发布到公共服务器/CDN。
文档 最新(v2)文档见 http://rspack.rs/llms.txt;Rspack v1 文档见 http://v1.rspack.rs/llms.txt。
适用场景与限制 适用于 Rspack 项目的配置编写、代码审查与构建排障。具体版本兼容性、性能收益与平台支持等细节,资料中暂未提供。