Your webpack build takes 60 seconds. Rspack does the same in 6 seconds. Same config. Same plugins.
What Is Rspack?
Rspack is a Rust-based JavaScript bundler that's compatible with webpack's ecosystem. Same configuration format, same plugin API, same loaders — but 5-10x faster.
// rspack.config.js — looks exactly like webpack.config.js
module.exports = {
entry: './src/index.js',
output: { path: './dist', filename: 'bundle.js' },
module: {
rules: [
{ test: /\.tsx?$/, use: 'builtin:swc-loader' },
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(png|jpg)$/, type: 'asset' }
]
},
plugins: [new rspack.HtmlRspackPlugin({ template: './index.html' })]
}
Migration from webpack
// package.json
{
"scripts": {
- "build": "webpack",
- "dev": "webpack serve"
+ "build": "rspack build",
+ "dev": "rspack serve"
},
"devDependencies": {
- "webpack": "^5.0.0",
- "webpack-cli": "^5.0.0",
+ "@rspack/cli": "^1.0.0",
}
}
Rename webpack.config.js to rspack.config.js. Most configs work as-is.
Speed Comparison
| Project | webpack | Rspack | Speedup |
|---|---|---|---|
| Cold build (1000 modules) | 25s | 2.5s | 10x |
| HMR update | 800ms | 50ms | 16x |
| Production build | 60s | 8s | 7.5x |
Why Rspack
- Webpack compatible — same config, same plugin API
- Incremental compilation — only recompile changed modules
- Built-in SWC — TypeScript/JSX without ts-loader or babel-loader
- Tree shaking — built-in, optimized
- Used in production — ByteDance (TikTok parent) uses it for their monorepo
npm create rspack@latest
Building JavaScript tooling? Check out my developer tools or email spinov001@gmail.com.
Top comments (0)