Rollup
esbuild
Our great sponsors
Rollup | esbuild | |
---|---|---|
55 | 291 | |
23,150 | 34,927 | |
1.2% | - | |
9.7 | 9.8 | |
5 days ago | 2 days ago | |
JavaScript | Go | |
GNU General Public License v3.0 or later | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
Rollup
-
React Server Components and Client Components with Rollup
Awhile back I wrote about packaging your JavaScript library code into a dual-module bundle (ESM + CommonJS) using Rollup module bundler. Make sure to check it out (it's been updated for Rollup v3!).
While searching for a solution, I came across this issue. Ironically, one of the suggested solutions in there was the initial solution described earlier above. However, there was also another suggestion.
-
The Complete Guide to User Authentication in Firebase
In this blog, we'll cover how to implement a simple login signup functionality using firebase. We'll be using modular JavaScript SDK, which (according to the documentation) provides a reduced SDK size and greater efficiency with modern JavaScript build tools such as Webpack or Rollup.
-
What is your ideal setup for new project for solo developers
My go-to front end these days is Lit with web components, rollup, and web dev server.
-
How to use Firestore with Redux in a React application
With tools like webpack (used by create-react-app under the hood), your entire application needs to be bundled in a single file before it can be served to the browser. Vite, on the other hand, takes advantage of native ES modules in the browser to make bundling more efficient with Rollup, serving parts of the source code as needed.
-
Enhance your Docsify experience with your own plugin
We use Vite as a dev server. This allows you to take advantage of hot reloading in development and easily build and minify code with Rollup integration. Vitest is also provided, so you can write tests in the matching folder.
-
Introduction to React Suspense
In this project I use my favorite bundling tool called vite, It is a fast compiler & bundler, and it uses rollup under the hood.
-
Fixing Class Composition in Tailwind CSS
While not too long, css`@apply is a lot to repeat for every class you want to “compile”. That’s why using Vite and some Rollup plugins (Vite uses Rollup under the hood) I was able to shorten it into this:
-
Getting Tailwind to Work with Elm Book
Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.
-
Front-end Guide
Rollup
esbuild
-
Benchmarking the AWS SDK
The other option I want to highlight is packaging the project using something like Webpack or esbuild. JS Bundlers transpile all of your separate files and classes (along with all node_modules) into one single file, a practice originally developed to reduce package size for frontend applications. This helps improve the cold start time in Lambda, as unimported files can be pruned and the entire handler becomes one file.
-
Rspack: A fast Rust-based web bundler
I wonder how this compares (performance and feature-wise) to esbuild (https://github.com/evanw/esbuild), which is also a bundler written in a compiled language (Go)? esbuild claims to be 10-100x faster than JS-based builders, while Rspack doesn't provide any concrete numbers (at least I didn't find any)...
-
What’s New With Nuxt 3
It uses esbuild so you can write the latest JavaScript syntax while supporting older browsers,
-
Anyone else doing compiler work in Golang?
The javascript bundler esbuild is written in Go and is extremely fast for that reason. The author originally tried both Rust and Go and ended up using Go. There is a discussion of why he chose Go here: https://news.ycombinator.com/item?id=22336284
-
Building a Node API with Fastify, esbuild, and Nx
Now that we have our production-ready app, let’s examine how Nx handles the build process using [esbuild](https://esbuild.github.io/).
-
Configure Stimulus with esbuild and Babel — Rails & Javascript
// config/esbuild.mjs import path from 'path' import esbuild from 'esbuild' import rails from 'esbuild-rails' import babel from 'esbuild-plugin-babel' esbuild .build({ bundle: true, // Path to application.js folder absWorkingDir: path.join(process.cwd(), 'app/javascript'), // Application.js file, used by Rails to bundle all JS Rails code entryPoints: ['application.js'], // Destination of JS bundle, points to the Rails JS Asset folder outdir: path.join(process.cwd(), 'app/assets/builds'), // Enables watch option. Will regenerate JS bundle if files are changed watch: process.argv.includes('--watch'), // Split option is disabled, only needed when using multiple input files // More information: https://esbuild.github.io/api/#splitting (change it if using multiple inputs) splitting: false, chunkNames: 'chunks/[name]-[hash]', // Remove unused JS methods treeShaking: true, // Adds mapping information so web browser console can map bundle errors to the corresponding // code line and column in the real code // More information: https://esbuild.github.io/api/#sourcemap sourcemap: process.argv.includes('--development'), // Compresses bundle // More information: https://esbuild.github.io/api/#minify minify: process.argv.includes('--production'), // Removes all console lines from bundle // More information: https://esbuild.github.io/api/#drop drop: process.argv.includes('--production') ? ['console'] : [], // Build command log output: https://esbuild.github.io/api/#log-level logLevel: 'info', // Set of ESLint plugins plugins: [ // Plugin to easily import Rails JS files, such as Stimulus controllers and channels // https://github.com/excid3/esbuild-rails rails(), // Configures bundle with Babel. Babel configuration defined in babel.config.js // Babel translates JS code to make it compatible with older JS versions. // https://github.com/nativew/esbuild-plugin-babel babel() ] }) .catch(() => process.exit(1))
-
Integrating a complex JavaScript library, three.js, that uses <script type="module"> import and export (Tweego compiler)
You can also roll-up your JS files using a bundler. I use esbuild, and a plugin called glslify so I can include .glsl files, to integrate ThreeJS into my Twine projects.
-
Justifying a Backwards Design Decision for My Programming Language
esbuild.
- You don't say
-
How can I make my CRA server start up quicker?
You should know that CRA is using webpack and babeljs for bundling and compiling the js, jsx to es5( based on your configs), and these two are pretty damn slow! you can change babel with esbuild which you can read here and also there are other articles out there... this will make a hige speedup for you because you are replacing those two which is written by javascript with esbuild which is written by golang that is pretty (fast](https://esbuild.github.io/), actually vite is using esbuild behind the scene and that is why its is super fast!
What are some alternatives?
swc - Rust-based platform for the Web
vite - Next generation frontend tooling. It's fast!
webpack - A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.
tsup - The simplest and fastest way to bundle your TypeScript libraries.
parcel - The zero configuration build tool for the web. 📦🚀
terser - 🗜 JavaScript parser, mangler and compressor toolkit for ES6+
Tailwind CSS - A utility-first CSS framework for rapid UI development.
ts-node - TypeScript execution and REPL for node.js
import-maps - How to control the behavior of JavaScript imports