DEV Community

Cover image for Unlocking Meteor 3.2: New Profiling Tool to Track Bundler Performance and Size
Nacho Codoñer for Meteor

Posted on

7 3 4 3 3

Unlocking Meteor 3.2: New Profiling Tool to Track Bundler Performance and Size

Meteor continues to evolve. After focusing on improving runtime performance, the latest update, Meteor 3.2, pivots toward bundler performance and optimizing the developer experience.

With Meteor 3.2, we introduced profiling. We revisited the old implementation to restore functionality and added meteor profile for automatic analysis of the app build process. This tool helps you track critical data like build phase timings and bundle sizes, which are key for optimizing performance and reducing build times.

This marks the beginning of exciting improvements to Meteor’s bundler, as we integrate modern solutions while maintaining Meteor’s performance and developer-friendly experience. Whether you’re working on a private project or contributing to the Meteor core, the new meteor profile tool is here to help you monitor and optimize the app’s build process.

Getting Started: A Quick Hands-On

Ready to dive in? To start using the new profiling tool, ensure your app is on Meteor 3.2 (or create a new one).

Update Your App

# Update your existing Meteor app to version 3.2
meteor update --release 3.2
Enter fullscreen mode Exit fullscreen mode

Create a New App

# Create a new Meteor app using Meteor 3.2
meteor create meteorite-app --release 3.2
Enter fullscreen mode Exit fullscreen mode

Profiling Your App’s Development Process

The key to Meteor 3.2's new profiling feature is the meteor profile command. Here’s how you can run it:

meteor profile [<meteor-run-options>...]
Enter fullscreen mode Exit fullscreen mode

This command tracks the time taken across various phases of running your Meteor app, capturing insights that will help you fine-tune performance.

Here’s a Breakdown of the Profiling Phases:

  • Cold Start: This is the first run of your app, when no data is cached in the .meteor/local folder. (Use meteor reset to simulate this phase.)
  • Cache Start: The second run, where the app leverages cached data, improving startup speed.
  • Rebuild Client: When you change client-side code, this phase measures the time required to rebuild the client-side app.
  • Rebuild Server: Similar to the client rebuild, but this tracks the time to rebuild the server-side code.

With these key phases, you can easily track how your app’s performance changes as you make updates.

Here’s an example output from the small-sized Meteor React example, to see what it looks like in action:

profiling-dev

A detailed log is generated during profiling, which you’ll find in the logs folder. This log contains full meteor run and METEOR_PROFILE output for each phase. Feel free to adjust the METEOR_PROFILE environment variable to suit your needs. For more options, run meteor profile --help.

Profiling Your App’s Size

The meteor profile command can also help you track bundle sizes. Run:

meteor profile --size-only [<meteor-run-options>...]
Enter fullscreen mode Exit fullscreen mode

This command provides a breakdown of the package sizes across different bundlers, such as Meteor Modern, Legacy, and Cordova, helping you identify optimization opportunities. You’ll see the results in a neat table format, making it easy to spot potential issues.

profiling-size

If you want to include bundle size analysis as part of a full profiling session, simply add the --size option.

Tip: Exclude Architectures for a Faster Dev Experience

Here’s a quick tip to improve your development speed. If you’re not targeting legacy browsers or Cordova, you can exclude those architectures to speed up builds.

For example, compare the default behavior with excluding certain architectures:

# 1) `meteor run`
meteor profile

# 2) `meteor run` excluding certain archs
meteor profile --exclude-archs web.browser.legacy,web.cordova
Enter fullscreen mode Exit fullscreen mode

The output comparison for the small-sized Meteor React example is shown below.

default-vs-exclude-archs

The impact will be much greater on large, full-featured apps. By excluding legacy and Cordova builds, you can see reduction in build times, especially when restarting Meteor apps ("Build App" stage in profile). These architectures are useful for testing older browsers or building for Cordova, but they’re often unnecessary during regular development, especially if you’re targeting modern browsers or platforms.

What’s Next for Meteor and Beyond?

Meteor 3.2 sets the stage for future improvements. The new meteor profile command helps ensure performance gains or size reductions without regressions. Automated profiling replaces subjective assessments with data-driven releases, now available to all Meteor developers.

Upcoming improvements to the Meteor bundler include:

  • SWC Support: We’re working on integrating SWC for enhanced compilation and analysis capabilities.
  • CPU Profiling and Memory Snapshots: This will allow for deeper performance tuning across all phases of app building.
  • Modern Bundler Integration: Expect improved bundler features and faster speeds with the adoption of modern bundlers.
  • Default Modern Architecture: Soon, Meteor will build only for modern architecture by default, skipping legacy and Cordova builds unless you specify otherwise.

These improvements will help keep Meteor aligned with current standards on the bundler side while improving performance and developer experience.

What Else Is New in Meteor 3.2?

Meteor 3.2 brings more than just new profiling tools. Want to explore further?

Join the Conversation

Watch the Discussion

Join the Meteor Renaissance!

Meteor 3.2 brings a new era of profiling tools, allowing developers to monitor app performance and bundle size like never before. With these updates, you’ll have the insights needed to optimize your app’s performance with data-driven decisions.

We’re excited about what’s to come and can’t wait for you to join the Meteor renaissance!

For feedback, questions, or support, visit our forums or join our Discord channel.

Follow us on Twitter and GitHub.

Top comments (2)

Collapse
 
smart_egg profile image
Dmitriy A. • Edited

Great addition to Meteor! Articles like this one can include all options hidden behind meteor profile --help with additional examples and comments. I'd also like to reference bundle-visualizer as it's relative to this topic and can be used in conjunction with meteor profile

Collapse
 
albumcoverai profile image
AlbumCover AI

This 100% deserved the attention it got! It was really interesting to me.