DEV Community

Alex Spinov
Alex Spinov

Posted on

Rspack Has a Free API: The Webpack-Compatible Bundler That's 10x Faster

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' })]
}
Enter fullscreen mode Exit fullscreen mode

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",
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Building JavaScript tooling? Check out my developer tools or email spinov001@gmail.com.

Top comments (0)