Rollup/Vite Plugin hooks comparison

Let's be honest making plugins in Rollup can be exhausting, making plugins in Vite can be exhausting, but trying to develop a utility that supports both version, with same inputs expecting the same output is where the real adventure begins.

Here's a small analysis and comparison that can help thinking things through.

Rollup

First let's run this snippet,

export default {
  input: 'src/index.js',
  output: { dir: 'dist' },
  plugins: [{
    buildStart() { console.log('build started') },
    transform(code, id) { console.log(`transforming ${id}`) },
    buildEnd() { console.log('build ended') },
  }]
}

If we run npx rollup -c, here's the output

build started
transforming src/index.js
build ended

Nothing surprising, now if we run npx rollup -cw (watch), we got

build started
transforming src/index.js
build ended

Same output but now it's waiting for changes. What happens if we change index.js? Then the output will be the same, buildStart and buildEnd hooks are always called, and transform is subsequently called on changed files only (there is a cache system).

Let's jump on Vite behavior before we can compare the two.

Vite

Here's our test config

export default defineConfig({
  plugins: [{
    buildStart() { console.log('build started') },
    transformIndexHtml() { console.log('transform index html') },
    transform(code, id) { console.log(`transforming ${id}`) },
    buildEnd() { console.log('build ended') },
  }]
})

And let's run npx vite build, here's the output:

build started
transforming src/index.js
build ended
transform index html

Very similar to Rollup. In Vite transformIndexHtml can be used to transform the final index html.

Now let see when we run Vite in watch mode (dev) using npx vite

build started
transform index html
transforming src/index.js

Ok what's going on here? Why is the index html transformed before the script and where is build ended log? The index is prior to the script because it's the first resource dynamically called during development. For the buildEnd hook, well... dev is not build so it makes sense (who is using this hook anyway?)

Comparison

Now that we have enough understanding of how both systems work, it's time to make a cheat sheet for a quick comparison:

The first thing to notice is that both Rollup and Vite have pretty similar execution for the build process. Things get tricky in watch mode.

Another thing important to note is that buildStart and transformIndexHtml can be asynchronous which means the content transformations won't actually start until these functions are actually resolved.