Rollup VS tsup

Vite is a modern frontend build tool used to develop fast and super efficient web applications. It serves files instantly and ensures that changes are updated immediately after they are implemented. It makes use of Rollup for optimized builds and has support for when you want to build a Javascript library (instead of a full app).

In 2025, mastering Vite for your React projects means leveraging powerful configurations, intelligent optimizations, and a robust plugin ecosystem. By understanding Vite’s modern architecture—native ES modules (ESM) during development and optimized Rollup bundling for production—you can significantly streamline your workflow, improve developer experience, and deliver fast, performant applications at scale.

6. Production-Ready Code Vite uses Rollup for production builds, which optimizes the code by bundling it efficiently, performing tree shaking, and minifying JavaScript. This results in smaller, optimized production builds that are ready for deployment.

Meanwhile, esbulid (developed in Go language, as introduced earlier) and rollup can also be used separately as packaging tools, and many third-party JS plugins are packaged using rollup.

npm packages dramatically sped up the productivity of developers by being able to leverage other developers' work. However, it had a major disadvantage: cjs was not compatible with web browsers. To solve this problem, the concept of bundlers was born. browserify was the first bundler which essentially worked by traversing an entry point and "bundling" all the require()-ed code into a single .js file compatible with web browsers. As time went on, other bundlers with additional features and differentiators were introduced. Most notably webpack, parcel, rollup, esbuild and vite (in chronological order).

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. Rollup Documentation

The JS SDK now lets you opt out of specific modules you don't need and optimize the final bundle size. You can do that by using either of two popular JavaScript build tools: Rollup or Webpack.

Rollup.js is a JavaScript module bundler that compiles small pieces of code into larger, more complex applications. It is particularly well-suited for bundling ES6 modules and is known for its efficient tree-shaking capabilities, which eliminate unused code from the final bundle, resulting in smaller file sizes.

Rollup bundles runtime artifacts.

This is also a valid approach, but what we really want is to be able to write our code in TypeScript and have it transpile into the JavaScript we need. Enter Rollup.

By the way, this is the first time I’ve published one of my own packages on npm. It was a great experience to learn how to publish on npm and discover the convenience of tools like tsup.

The Icons and Fonts modules add depth to the visual language. Icons are managed through an efficient process that generates components from SVG files using SVGR and tsup. This ensures that icons are consistent and can be flexibly integrated across the system.

1. tsup docs: https://tsup.egoist.dev/ 2. npm: https://www.npmjs.com/package/tsup 3. tsup usage in shadcn-ui/ui: https://github.com/shadcn-ui/ui/blob/main/packages/cli/package.json#L33 4. My open source CLI related project: https://github.com/Ramu-Narasinga/TThroo/blob/main/packages/cli/package.json#L35

All the compilation of new features into old ones is done internally by @swc/core, which is a very fast compiler. Luckily its all built-in into tsup, which is the build tool I use for every single package I publish and cannot recommend it enough.

Now, we can run all this server reaching the port 4000. If you want to test, build it with tsup or any other way that you want, like ts-node.

If you're building hooks, providers & components you can go with only React + TypeScript, and use something ESBuild or tsup to build it.

I am using `tsup` to transpile my application - https://github.com/egoist/tsup

I spent way to much time over the last couple days trying to line up vite/rollup to bundle my component library with types, type maps and the correct formats. Until I ran across this blog post which introduced me to https://github.com/egoist/tsup and it all just worked in a single readable command. I figured I'd share with you beautiful people so you could get your code bundled faster and carry on with the fun part of programming.

As we iterate on the definition, we are going to want a better developer experience for rebuilding the package on changes. Typically, for a “library” or “utility” style package, I’d reach for either unbuild’s stub concept or use esbuild/tsup/rollup to implement a more traditional watch/rebuild, but in this case, I’m watching a proto file that lives outsides of the source, which breaks assumptions of those tools.