DEV Community

Valentin Degenne
Valentin Degenne

Posted on

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') },
  }]
}


Enter fullscreen mode Exit fullscreen mode

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



build started
transforming src/index.js
build ended


Enter fullscreen mode Exit fullscreen mode

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



build started
transforming src/index.js
build ended


Enter fullscreen mode Exit fullscreen mode

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') },
  }]
})


Enter fullscreen mode Exit fullscreen mode

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



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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:

Image description

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.

Top comments (0)