We’ve got a name for our project and a target platform. Now we’ve got to decide on bundling. My experience has been with Steel and Webpack, with some experience in Browserify. Looking around, I see that the popular frameworks today are Webpack, Parcel, and Rollup. (Correction, I just learned that Vite is a bundler too, and very popular)

Others with weekly downloads: esbuild (22m), parcel (164k), @rspack/cli (70k), Snowpack (10k), wmr (100), turbopack (N/A)

Logo
Name	Webpack	Rollup	Vite
NPM Weekly Downloads	20,274,994	16,545,646	9,578,398
License	MIT	MIT	MIT
Hot Module Reload/Replacement (HMR)	Yes	N/A (bundler only – use Vite)	Yes
Module Support	CommonJS, ES Modules	ES Modules, CommonJS, UMD, SystemJS	ES Modules, CommonJS, UMD
Tree Shaking	Yes	Yes	Yes
Code Splitting	Yes	Yes	Yes
Minification	Yes	Yes	Yes
Compression	GZip Plugin	GZip Plugin	Broti, GZip, Deflate Plugin
Content Hashing	Yes	Yes	Yes
Multiple Targets	Yes	Multi Entry Plugin	Yes

While looking at rspack, I saw there was a progress showing build times for Webpack using SWC and babel. I only know of babel. I need to look at what SWC is.

I just found esbuild has 22 million downloads in the past week. Looking… looks good, but not friendly. Very terse documentation.

It looks like vite used to use rollup for its builds, but now relies on esbuild itself (or vice versa). Well this is odd. I’m seeing that Vite is also a bundler. I thought it was simply just a local web server with HMR. Nice, they are explaining comparisons with themselves and others. In the part about Why Not Bundle with esbuild? they highlight that code splitting is still a work in progress for esbuild. I need the code splitting, so that rules out esbuild.

I started working with esbuild to test it out, but need to roll it back. I’m going to move onto using vite. I liked using it for the Three.js project for the 3D model testing. Let’s see how easy it is to configure.

Interesting. A lot of the legwork is already taken care of with Vite. I was installing babel with babel-loader, @babel-core, @babel/preset-env, @babel/preset-env and setting up a configuration file and learned that none of this is necessary. It’s all built-in with vite.

I’ve got a project setup with vite. It seems fast just with a small app. It only updates files that change. I got react with typescript setup, eslint and prettier.

I confirmed that tree shaking was taking place. It looks like minification is already applied as well. Source maps are created by flagging build.sourcemap as true. I was also able to confirm that Vite supports code splitting, but it doesn’t give you the ability to name chunks with “magic comments“. I understand webpack has its own name built into the standard, but I thought vite may offer something similar with its own name or a generic replacement. It appears that there is a plugin called vite-plugin-magic-comments that uses the webpack comments. The ability to name chunks is more for the developer to review what is going across the wire. Those files are not deployed separately. I just need the ability to split my code.

Things that are impressing me is that GZip appears to be built in. No configuration necessary. I see statistics being listed for the compressed size. However, I’m not seeing the .gz files themselves.

With webpack, I had the option to compress files only if they gave me a specific ratio of compression. I then configured the server to serve the gzip version if both the browser supported it and the file was available.

I’m also finding suggestions about Brotli compression. I’ve not heard of it previous to today, and would be concerned that browsers wouldn’t support it. I’ve only heard about gzip and deflate. It appears that Google developed Brotli to be more efficient than gzip and supported by Chrome, Firefox, Safari and Edge. It has a .br extension, so a compressed index.js downloads as index.js.br. This is similar to gzip for index.js.gz. The tricky part would be to ensure the correct mime type is served for the files. ie text/javascript for .js.br files and text/css for .css.br files.

Impressive… at 39kB, it’s much smaller than then the estimated 46.29 kB size of gzip. Lets test all of the compression options on the index file.

Compression	Size
None	143.52 kB
Brotli	39.50 kB
Gzip	45.14 kB
Deflate	45.12 kB
DeflateRaw	45.12 kB

It looks like Brotli is the way to go. Once I start getting into deployments, I’ll see what my web server is compatible with.

Next is setting up vite to run as a secure website locally so that I can use the barcode detection api. This time ChatGPT gave me a different command to create certificates.

openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

I answered a few questions asking who I was and where I was. Vite was easy enough to configure as well.

import { readFileSync } from 'fs';
const key = readFileSync('./key.pem');
const cert = readFileSync('./cert.pem');
export default defineConfig({
  server: {
    https: { key, cert }
  }
});

So what do I think about vite? Holy smokes its simple to setup. With webpack, I often go through a process where I’m creating different configurations for a production and development environment, sharing a third configuration file for the common things between them. I’m often adding a ton of loaders to use with babel, stylesheets, and more. Even setting the index pages script src requires a separate plugin to read it as an ejs file. On top of that, the webpack bundler is a separate npm package from the development server.

A vite configuration is very simple.

/* eslint-env node */
import { defineConfig } from 'vite';
import path from 'path';
import compression from 'vite-plugin-compression';
import { readFileSync } from 'fs';

const key = readFileSync('./key.pem');
const cert = readFileSync('./cert.pem');

export default defineConfig({
  root: path.resolve(__dirname, 'src'),
  server: {
    base: '',
    https: {
      key,
      cert,
    },
  },
  build: {
    sourcemap: true,
    outDir: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    compression({
      algorithm: 'brotliCompress',
      ext: '.br',
      threshold: 1040,
      deleteOriginFile: false,
    }),
  ],
});

I can see why the community is moving to vite. The large number of people using vite is impressive, especially when considering that webpack has twice the number of downloads this week, but has been established for many, many years. Webpack now feels bloated somehow compared to vite.

Reviewing search term trends in “Computers & Electronics” over the past five years, I can see a crossover where Vite had overtaken Webpack in 2022. Vite is continuing on an upward trend, and Webpack is on a downward trend.

It’s definitely time to switch bundlers to keep up with the latest technology.