Microbundle VS webpack

We’ll also use Microbundle for bundling our modules. Let’s create the package using Lerna:

This definition is tailored to microbundle but the tldr is property names can have large impact on size .

To begin, you need to prepare your environment. A few ways to build a React package include tools like Bit, Storybook, Lerna, and TSDX. However, for this tutorial, you will use a zero-configuration bundler for tiny modules called Microbundle.

I discovered microbundle lately, and I would like to share with you a mini template with the bare essentials and comfort to develop your packages with TypeScript.

For package authoring - microbundle is a handy boilerplate (I would avoid tsdx personally - it’s basically been abandoned for turborepo but that’s not apparent at first glance).

My tech stack was React + Typescript, Storybook for docs, vite.js for build instead of webpack, microbundle for bundling (basically a no-config rollup wrapper), and Google's release please bot for handling release/deployment.

Setting up a modern Typescript or Javascript development stack is a daunting task, there are a lot of moving parts, and sometimes the whole process seems like magic, so I switched to Microbundle. While microbundle handles the compilation, there are a lot of other moving parts that need to be set up to start developing with Nodejs/Typescript (CI, tests, linting, etc). So I've created an opinionated template repository with Typescript, Microbundle, Jest, eslint, husky, prettier, github actions, pnpm, and a bunch of other scripts. It enables me to start developing a library immediately by using the repository as a starter template. Let me know what you think and if some processes could be improved, or some valuable tools that could be added. Pull requests and suggestions are welcomed.

I would recommend starting by using https://github.com/developit/microbundle , as it has pretty good default behavior for generating library output.

Check out microbundle, which is what TSDX started as a typescript alternative to.

Use webpack or esbuild for bundling and pruning dead code Want to audit your bundle? Tools like pkg-size or cost-of-modules can show you which packages are inflating your deploy size.

At the heart of webpack lies a powerful architecture built from numerous plugins working together in perfect harmony. These plugins communicate and coordinate through tapable hooks, forming the backbone of webpack's extensibility.

Webpack's core consists of a collection of plugins working harmoniously together. These plugins communicate with each other through tapable hooks.

Webpack: A static module bundler for modern JavaScript applications

Why are there so many JavaScript build tools? Gulp, Grunt, Webpack, Laravel Mix, Rollup.js, and now Vite. And these are just the ones that I've worked with. Haven't we solved this problem? And why build a new tool? Why not improve existing tools?

to then serve to the browser. If I was using something like Vite or Webpack I would have gotten this handling for free.

17. Webpack

The JS code gets transpiled by tools like Babel, then bundled (often by Webpack) into a single or few files (like bundle.js). This optimizes the website to load faster, as the browser can fetch everything from one file instead of multiple.

Remember that Webpack is highly configurable, and this article only scratches the surface of what's possible. Be sure to check the official Webpack documentation for more detailed information and advanced configurations.

Website: webpack.js.org