How to: Replace Rollup.js with Vite ⚡️
Tags: webdev, frontend, svelte, vite
Published: 2024-03-02 12:49:23

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](https://www.npmjs.com/package/npm-check-updates)), the project still uses rollup.js and many libraries have become outdated in the meantime:

## Current dependencies:

```bash
@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.VARIABLE`s 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:

```bash
➜  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:
```bash
➜  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:

 ```bash
➜  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](https://github.com/thr0n/vgnmap/pull/3/commits/b489e8ce0af15103a7777fd7ada1fbed1cdb4683)
- [ab4e7b6 - Drop rollup, run prettier](https://github.com/thr0n/vgnmap/pull/3/commits/ab4e7b617aca7c498f4ef4e39e1952a66a379c2b)

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