Meteor-RSPack Integration: A Modern Bundler Meets Meteor 3.4

Hello community!

Meteor 3.4 will use a modern bundler to speed up builds and rebuilds to match common JS tools throughput, and add features long requested in Meteor: tree shaking, secure final bundles, community plugins, bundler lifecycle hooks, advanced bundle analytics, and much more.

I’ve opened this Meteor forum thread to share over time performance updates, showcase modern bundler features and benefits with this integration, and welcome your questions and feedback.

The Meteor-RSPack integration began as hobby work years ago, and is now moving to the Meteor core, highlighting its benefits and reasoning. Recently, I even got RSPack HMR working with Meteor’s dev server, fixing past limits on my approach. I covered the approach in Modernizing Meteor’s Bundler, and it’s great to see issues from that time got resolved in the current integration work.

For those asking about Vite, I tried my approach with Vite but ran into limits and extra overhead in automation, which needs a more complex configuration for core adoption. Meteor also has meteor-vite alternative for those who prefer.

To meet our goals within our capacity, we’re sticking with RSPack for now. RSPack is faster than Vite because it’s built entirely in Rust (Vite plans similar support via future Rolldown integration). It’s also compatible with the widely used Webpack ecosystem, so you can use its many plugins and tools.

Demo

I share a demo video showing how fredmaiaarantes/simpletasks is integrated with RSPack using a new rspack Meteor package that automates the process, and how fast development experience is achieved on code changes.

With Meteor 3.4, you will opt into a new rspack package in your existing app that will unlock all integration benefits, performance gains, and advanced bundler capabilities, with no additional configuration.

Performance

Here is a comparison of meteor profile runs for Meteor 3.2, 3.3, and the upcoming 3.4 on a checkout with RSPack integration using simpletasks app on my machine:

On average, build times drop by 75.4% in Meteor 3.4 using RSPack.

Build and rebuild phases are drastically faster. Client rebuilds now only run the RSPack step thanks to the new dev server and HMR, reducing refresh time on client changes by about 96%. Rebuild times, key to the development experience, have fallen sharply for both client and server.

The Meteor 3.4 profile separates the RSPack(Build App) and Meteor(Build App) phases, adding up to the total build time. The first phase uses RSPack to build your app code, and the second compiles packages and links code with Meteor. Meteor remains slower on its own work, but now only handles package compilation and linking. The Meteor 3.3 modern build stack with SWC also speeds up the Meteor(Build App) phase, so it’s still recommended to enable "modern": true in your project.

Meteor + RSPack benefits greatly by offloading app compilation to RSPack.

Further Work

I’m preparing a PR with the new rspack package for the Meteor core. I also plan to verify this integration across several Meteor setups to identify and fix any limitations.

As covered in another forum post, our goals for the Meteor bundler are clear and this approach takes a modern-first view. We already see promising results and will explore its limits and how to address them. So far, the benefits are clear, with no loss of standard JS workflows, and it opens our community to other ecosystems.

Call to Action

As with Meteor 3.3, we’ll release betas before the official launch to collect feedback and give everyone a chance to try a modern bundler. If you want to help early, please, create and share minimal apps in repositories that match your typical Meteor apps, including packages and configurations you use, especially those that directly affect the Meteor bundler. This lets us test the new modern bundler integration and ensure a smooth integration for you in the first betas.

20 Likes

Is this speed legal?!

3 Likes

Awesome work! :rocket:

Version 3.3 has just been released, but I’m already looking forward to testing 3.4!

6 Likes

awesome work :tada:

What does that mean for the Vue front-end? Currently, it is supported via meteor-vite. RSPack would support it. Which choice will be the official one?

Thanks.

3 Likes

Adding RSPack to compile your app code lets you use its full bundler capabilities. RSPack fully supports Vue with a config (Vue - Rspack), so your Vue app will compile successfully and still integrate with Meteor Atmosphere packages.

We will confirm the official Meteor-RSPack integration works for every Meteor skeleton and example, and begin maintaining it as the official solution.

5 Likes

Will rspack work with coffeescript? Google search rspack coffeescript does not find this kind of plugins.

2 Likes

According to Perplexity, this should be possible. Will probably require some additional work though. But I know that @nachocodoner is not forgetting about Coffee Script :heart:
https://www.perplexity.ai/search/will-rspack-work-with-coffeesc-AMdmMC8BRKifgv5bfPHTKQ

1 Like

The goal is to explore compatibility with existing Meteor setups. So far, I’ve focused on React and Blaze and found working examples. And I know vue and others will be accomplished by direct Rspack support.

For CoffeeScript, since rspack is based on webpack, we can configure rspack.config.js to use coffee-loader. This should enable compatibility.

I’ve requested minimal example repositories to explore compatibilities with your common setups. I asked @janmp for CoffeeScript example and he provided me. I hope to test rspack integration on Meteor apps with various setups before the beta, aiming to ensure compatibility at least with the default example apps from meteor create.

Great news hearing about the integration of RsPack with meteor. What would be an optimistic estimated release date?
Also, if meteor will be supporting RSPack, does that mean that an integration of angular 20 and meteor 3.4 would be possible through an RSPack plugin (for example the @nx/angular-rspack) or would there be limitations on meteor’s side?

2 Likes

Incredible stuff! I really think this addresses the primary DX pain point of working with Meteor apps.

While I would’ve loved to see Vite become a part of the Meteor build system, mainly due to the current ecosystem. RSPack does feel like a better choice for an everything-included framework like Meteor, and a huge leap for the platform.

This should open up for a lot of flexibility and allow for interoperability with build tools that weren’t hand-crafted just for Meteor.

The “UnJS (unplugin)” plugins aim to be an universal and compatible with most major build systems. And with RSPack, Meteor automatically gets to benefit from this. And hopefully the inverse as well, where it moves the JS community slightly closer to standardization within the bundler ecosystem.

I’m really excited for this!

3 Likes

No release date yet. We’re focused on stability in 3.3.1 while progressing on 3.4, the Rspack bundler and Change Streams.

Like with Meteor 3.3’s SWC and other optimizations, we’ll ship several betas to test both small and large apps, address edge cases, and gather feedback. We also plan core improvements, such as dev-only packages to slim production bundles. Betas should begin at the end of July, with Rspack support beta likely in August. After the beta phase, we’ll move toward an RC and the final release.

would be possible through an RSPack plugin (for example the @nx/angular-rspack) or would there be limitations on meteor’s side?

We can try that. It should be supported, but I’m not familiar with @nx/angular-rspack. It doesn’t act as a loader or plugin for rspack.config.js and instead uses its own config approach, similar to what we plan for Meteor, so I’m not sure how it would fit. Thanks for bringing this up.

Could you share a small Angular app repo that uses Rspack? That would make it easier to test compatibility later.

1 Like

It doesn’t act as a loader or plugin for rspack.config.js and instead uses its own config approach, similar to what we plan for Meteor, so I’m not sure how it would fit.

From what I understand, it’s just a wrapper, so it returns a compatible RsPackOptions configuration at runtime. This is how an output would look like: Untitled (ri3sgor0) - PasteCode.io

Could you share a small Angular app repo that uses Rspack?

I’ve created a github repository with a working example using angular 20 and the latest version of rspack and @nx/angular-rspack. GitHub - Joyzyy/angular-rspack-test: rspack integration with angular 20

I’ve also tried to implement the angular rs-pack configuration over on the modern-bundler-integration branch, but to no avail. I might be misunderstanding some things about how meteor works internally (since I don’t have that much experience), so i might’ve done something wrong, that being said, these were issues I ran into:

  • I’ve manged to compile the angular frontend, deploying it on port 3005, and serving the assets on the publicPath of __rspack__/, so the rspack_server can create the proxy. What i fail to understand is why there is a need for the main-client.dev.js inside the _rspack folder since in development we are using setMeteorAppCustomScriptUrl(addEnvSuffixToFilename('/__rspack__/main-client.js')); which just uses the proxy?
  • Also, is it possible to add multiple script tags to the <body></body> of the generated html by meteor’s static-html plugin? Since the compilation of the angular frontend generates 6 main files: vendor.js, polyfills.js, main.js, runtime.js, styles.js, styles.css which all are needed in the index.html on localhost:3000, or can we skip the index.html generated by meteor and use the index.html generated by rspack (but using this option, how would meteor append the needed scripts (like ddp, tracker) to the index.html)?

I’m sorry in advance if some of the question don’t make any sense, didn’t get a chance to get a good look into how meteor works fully.

I think it’s too soon to check out that branch. I haven’t even created a PR yet since it’s still in an early experimental phase. It’s not final code, it isn’t fully automated, and it doesn’t cover every config or setup scenario.

I’ve made it work: as shown in this post, a React setup with build times as a preview of what’s coming. Over the past week I’ve tested other setups on manual and local apps. I’m building an abstraction to handle different setups and configs, and I’m continuing with automation and cleanup. I’ll create a PR once it covers the abstraction and addresses basic edge cases, and I’ll explain the approach when the time is right.

Thanks for the Angular example repository. It will help me understand Angular requirements. First, we need to cover the basics of Rspack integration in Meteor. Then we can address any remaining Angular config questions and code needs, like having multiple script tags and etc, if needed.


From what I understand, it’s just a wrapper, so it returns a compatible RsPackOptions configuration at runtime. This is how an output would look like: Untitled (ri3sgor0) - PasteCode.io

I understand, that’s helpful. Meteor will also add a wrapper around the rspack config with its own expectations, which may conflict with the Angular config from that package. We should be able to make both configs work together and support Meteor. Let’s revisit this later. :pray: