How to: Replace Rollup.js with Vite ⚡️

For me, it was once again time to take care of a project that I haven't worked on for almost a year. As we can see in the output below (the package.json was analyzed using npm-check-updates), the project still uses rollup.js and many libraries have become outdated in the meantime:

Current dependencies:

@rollup/plugin-commonjs      ^21.1.0  →   ^25.0.7
@rollup/plugin-node-resolve  ^13.3.0  →   ^15.2.3
@rollup/plugin-replace        ^3.1.0  →    ^5.0.5
@rollup/plugin-typescript     ^8.5.0  →   ^11.1.6
@tsconfig/svelte              ^2.0.1  →    ^5.0.2
contentful                    ^9.3.5  →  ^10.6.21
prettier                      ^2.8.8  →    ^3.2.5
prettier-plugin-svelte       ^2.10.1  →    ^3.2.1
rollup                       ^2.79.1  →   ^4.12.0
rollup-plugin-css-only        ^3.1.0  →    ^4.5.2
rollup-plugin-scss            ^3.0.0  →    ^4.0.0
svelte                       ^3.59.2  →   ^4.2.11
svelte-check                 ^2.10.3  →    ^3.6.4
svelte-preprocess            ^4.10.7  →    ^5.1.3
typescript                    ^4.9.5  →    ^5.3.3

So it's time to update!

Update the application and dependencies

In fact, the introduction of Vite and updating the dependencies were much easier than anticipated. These are the steps I took:

Setup the basics:

Run npm create vite@latest, enter a <project-name> and choose svelte. When the initial setup is done copy all newly generated files from ./<project-name> to the actual project directory. Afterwards delete package-lock.json once and run npm install. You can also delete rollup.config.js now.

Further tasks

The basic setup is now already done! All I have to do now is to install the dependencies I'm using for my project (like leaflet, contentful, sass, etc.) and replace the generated App.svelte file with my actual application files.

Since I'm using some environment variables I also have to prefix the variable names in .env with VITE_ and replace all process.env.VARIABLEs with import.meta.env.VITE_VARIABLE in the source files.

Bonus task: Run ncu once again and update!

I then checked the dependencies again with ncu:

➜  vgnmap git:(feat/replace-rollup) ncu
Checking /Users/hendrik/dev/vgnmap/package.json
[====================] 16/16 100%

 @playwright/test          1.41.2  →    1.42.1
 @types/node             20.11.19  →  20.11.24
 contentful               10.6.21  →   10.6.22
 prettier-plugin-svelte     3.2.1  →     3.2.2
 svelte                    4.2.11  →    4.2.12
 svelte-check               3.6.4  →     3.6.6
 typescript                 5.2.2  →     5.3.3

This time there were only minor updates. But while I'm at it, I'll also install these updates! I simply run ncu -u followed by npm install!

Comparison: build times

Let's take a look at the times required for the production build

Using Rollup.js:

➜  vgnmap git:(main) ✗ npm run build

> svelte-app@1.0.0 build
> rollup -c


src/main.ts → public/build/bundle.js...

created public/build/bundle.js in 2.8s

Using Vite:

➜  vgnmap git:(feat/replace-rollup) npm run build
> vgnmap@1.1.0 build
> vite build

 ✓ 46 modules transformed.
dist/index.html                   1.23 kB │ gzip:  0.66 kB
dist/assets/index-DfWY1ihM.css   19.01 kB │ gzip:  7.45 kB
dist/assets/index-CPtvyui6.js   265.34 kB │ gzip: 84.48 kB
✓ built in 857ms

As we can see, the build for the same application is two seconds faster with Vite than with Rollup. Furthermore: Vite also works noticeably faster in development mode! 💛

Netlify deployment issues 🚨

Two notes if you also deploy your application to Netlify:

• Don't forget to update the names of your environment variables on netlify.app!
• Vite places the build output in the dist folder. So you have to change your Netlify Deploment settings, otherwise you'll get a 404 error!

References:

For reference you can take a look at these commits:

• b489e8c - Introduce vite
• ab4e7b6 - Drop rollup, run prettier

For general information about Vite see: https://vitejs.dev/guide/