Vite Bundler v3

[JorgenVatle]

Try the preview build

You can check the latest available version on Packosphere

npm i meteor-vite@next

# Meteor v3
meteor add jorgenvatle:vite-bundler@3.0.0-meteor3-next.9

# Meteor v2
meteor add jorgenvatle:vite-bundler@3.0.0-meteor2-next.9

⚡ Making Meteor be more like Vite

Working around Isopack entirely, your Meteor builds are now (almost) entirely handled by Vite. Meteor will no longer try to process your client app. Instead your client app is bundled as raw static files and served as-is by Meteor's webapp.

Now, the only client-side assets built by Meteor are Meteor's own client-side dependencies and any Atmosphere dependencies your project depends on.

Improved caching & module preloading

Added support for module preloading and edge/CDN-caching for dynamic imports. Something not previously possible or easily achievable with Meteor's native dynamic imports which relies mostly on DDP and client-side caching.

Much faster production builds.

Prior to this release, Vite's build output would have to be transpiled and fed back into Meteor as normal JS and CSS files. This was originally done to ensure some level compatibility with the Meteor ecosystem and it's implementation for dynamic imports.

Essentially, when building for production, you'd end up with your app being bundled and processed twice. Despite the extra build step, Meteor-Vite would still speed up the build process for most apps as a lot of the load would be taken off of Isobuild, Meteor's internal build system.

But Isobuild was still holding things back. When Vite would take approximately 2 seconds to build a small app, Meteor would spend roughly 10 - 15 seconds parsing and minifying that tiny bundle created by Vite.

(todo add build benchmark pre v3 and post v3)

Migration steps and breaking changes

Upgrading to v3 shouldn't require any changes to your application. But there are some changes that could potentially impact your users.

• Most of your application assets will be served from /vite-assets/<chunkFileName>.<css | js>
  • If you're using a CDN and serve your app under multiple hostnames, you might want to load those assets from one host instead of relative to the current host. This can be done by setting assetsBaseUrl in your meteor-vite plugin config.
  • Static assets served by Meteor does not have any CORS headers. You will have to apply these on your web server or use a CloudFlare transform rule if you're using a static host for your assets.
• Browser support for ESM is required. Global support is around 97% at the time of writing.