Rspack 在 0.3 版本将 experiments.css = true
的情况下的 css 默认处理行为和 webpack 进行了对齐,移除了很多内置的 css 转换逻辑,这同时带来了一些 breaking change,如果你的应用之前依赖了这些转换逻辑,请注意按照下述迁移方式进行迁移。
@rspack/postcss-loader
和 builtins.postcss
在 Rspack 完全支持 postcss-loader
之前,Rspack fork 实现了 @rspack/postcss-loader
和内置实现了 builtins.postcss
以满足功能,目前 Rspack 已经完全支持了 postcss-loader
,因此我们决定废弃掉 @rspack/postcss-loader
和 builtins.postcss
,使用 @rspack/postcss-loader
的用户可以无缝迁移到 postcss-loader
上,而之前 Rspack 的 builtins.postcss
只实现了 px2rem
的转换功能,使用该功能的用户可以迁移到 postcss-loader
和 postcss-plugin-px2rem
上,如下是迁移方式。
module.exports = {
builtins: {
postcss: {
pxtorem: {
rootValue: 50,
},
},
},
};
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'postcss-plugin-px2rem',
{
rootValue: 100,
},
],
],
},
},
},
],
},
],
},
};
为了更好的对齐 webpack 的 CSS 处理, Rspack 从 0.3 移除了内置的 autoprefixer 功能,你可以使用 postcss-loader 来实现 autoprefixer。
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [['autoprefixer']],
},
},
},
],
type: 'css',
},
],
},
};
完整的示例可参考 examples/postcss-loader。
考虑到 Rspack 目前的内部模块的 API 不够稳定,直接使用 Rspack 内部模块的 API 很容易导致 breaking,因此 Rspack 限制了用户直接访问内部模块的能力,仅支持从根模块访问 Rspack 的 API。
import { Stats } from '@rspack/core/dist/stats'; // not supported since 0.3
import { Stats } from '@rspack/core';
Rspack 原生支持了 Web Workers,这意味着你不需要使用 worker-loader 即可开箱即用的使用 Web Workers。使用方式如下:
new Worker(new URL('./worker.js', import.meta.url));
new Worker(new URL('./worker.js', import.meta.url), {
name: 'my-worker',
});
更多关于 Web Workers 的支持说明见 Web Workers 文档
builtin:swc-loader
支持Rspack 虽然提供了很多 SWC 的编译配置选项,但是这些配置都是全局性的编译配置,业务侧如果需要不同的模块走不同的 SWC 转换逻辑则难以满足,因此 Rspack 支持 builtin:swc-loader
以提供更精细的 SWC 转换配置,builtin:swc-loader
相比于 js 版本的 swc-loader 性能更优。你可以通过如下方式使用 builtin:swc-loader
const path = require('path');
/** @type {import('@rspack/cli').Configuration} */
const config = {
module: {
rules: [
{
test: /\.jsx$/,
use: {
loader: 'builtin:swc-loader',
options: {
// Enable source map
sourceMap: true,
jsc: {
parser: {
syntax: 'ecmascript',
jsx: true,
},
transform: {
react: {
pragma: 'React.createElement',
pragmaFrag: 'React.Fragment',
throwIfNamespace: true,
development: false,
useBuiltins: false,
},
},
},
},
},
type: 'javascript/auto',
},
],
},
};
module.exports = config;
更多的示例可参考 examples/builtin-swc-loader
目前的 builtin:swc-loader
仍然有诸多限制,如不支持 wasm plugin 等,Rspack 在后续版本将继续迭代支持 builtin:swc-loader
的更多功能。
业务支持中性能调优是一个很常见的需求,为了减小给业务调优性能的成本,我们优化了 Rspack Profile 的体验,你可以通过 RSPACK_PROFILE 环境变量来生成 profile 相关文件来进行性能调优。
$ RSPACK_PROFILE=ALL rspack build
关于 Profile 更详细的说明,见性能分析
splitChunks.chunks
支持正则splitChunk.\{cacheGroup\}.type
splitChunk.\{cacheGroup\}.idHint
ensureChunkConditionsPlugin
rule.use
支持函数configuration.profile
相比 0.2 版本,我们在 0.3 版本中实现了更多的插件 API 和兼容了更多的插件,同时我们对 webpack 的 插件 API 进行了梳理,将 插件 API 的支持进度透明化,你可以在这里plugin-api-progress 追踪插件 api 的实现进度。
我们在 0.3 版本进一步优化了和 webpack 架构的对齐工作,从原来的基于 AST 的 codegen 架构迁移到基于字符串变换的架构,该对齐工作可以进一步保障 Rspack 在 codegen 阶段能够对齐 webpack 更多的 Hook API 以兼容更多的社区插件。
Rspack 在 0.2 版本提供了对 vue-loader
的支持,但是基于 vue-loader
封装一套完整的 Vue.js cli 的解决方案是一个较为复杂工作,Modern.js Builder
提供了 Vue.js 的开箱即用的工程化方案 Modern.js Vue.js Support 来简化使用 Rspack 开发 Vue.js 的工作。