Optimizing Vite Plugin with Filters

Like every year, I was watching ViteConf in parallel while doing my work. However, a slide from Alexander Lichter caught my attention: the filter hooks available on Vite plugins.

The Current Filter Option

I wasn't aware of this feature. It was introduced in Vite 6.3 (available in March 2025) and remained undocumented until October 2025 (it is now).

So, why add filters to each hook (load, resolveId, and transform)? This worked fine before: just add a condition in the handler and that's it, right?

// An example working well, right?
export default function pluginSvgTransformer() {
  const svgFileRegex = /\.svg$/

  return {
    name: 'svg-transformer',
    transform: {
      handler(code, id) {
        if (!svgFileRegex.test(id))
          return null

        return {
          code: transformSvg(code),
          map: null,
        }
      },
    },
  }
}

Well, not exactly, at least not for long.

The Power of the New Filter Feature

If you haven't been following the latest news, you can now use Rolldown to replace Rollup as the builder used under the hood by Vite. To implement this, follow the official guide. It will become the default in Vite 8.

Rolldown is written in Rust, and calling JavaScript is relatively expensive. Performance can degrade significantly if you have many plugins that perform transformations.

With this simple change, Rolldown can run the filter check on the Rust side (for example, your id RegExp) and skip calling into JavaScript when a module doesn't match. This prevents many small Rust-to-JavaScript crossings that would slow down bundling and hurt parallelization. With many plugins, these improvements add up to a significant performance boost.

// That's better
export default function pluginSvgTransformer() {
  const svgFileRegex = /\.svg$/

  return {
    name: 'svg-transformer',
    transform: {
      filter: { // New filter option
        id: svgFileRegex // Filter by ID, only transform SVG files
      },
      handler(code, id) {
        // Keep it to work in older Vite 6.3 version
        if (!svgFileRegex.test(id))
          return null

        return {
          code: transformSvg(code),
          map: null,
        }
      },
    },
  }
}

With 10 plugins, this is 3.74x faster than not using the new filter options. For a deeper dive, you can check the Rolldown article with all the benchmarks and how all of this is orchestrated.

You can also pass an array, use include/exclude patterns, or filter on multiple properties. See the Rolldown documentation for details.

Conclusion

Yes, this isn't a big change, and you won't see any benefits yet if you're not using Rolldown. However, it's a good practice to start using it now to be ready for Vite 8. Now that you've read this post, watch the full video and get excited about the future of Vite with Rolldown 😁