Thread by @probablynull

6 core elements of every bundler

Content Creator: @jerry__chang

#webdevelopment #frontenddev #javascript #Reactjs #vuejs #nextjs #remix

1/n

1/n

Bundling isn’t really a new concept.

Many folks have been doing it since Browserify.

These bundlers offer:

1. Bundling system
2. Options for the ability to optimize and other build time modifications

2/n

Here are common elements shared between all the different bundlers.

3/n Resolve

In this step, the bundler is just resolving the file by following import statements.

This could be in the filesystem or from CDN (with new bundlers like snowpack).

4/n Transform

Most of the modern code base are made up of superset syntax that are not supported by browsers.

So, part of the process is transforming that to js, css.

This also means the `import` and `export` statements.

5/n Code splitting

This is an optimization technique where you split up your bundles so you can determine which ones are considered an “entry” bundle.

Entry meaning it’s part of the critical rendering path and it goes well with “Lazy Loading”.

6/n Lazy Loading

Related to code splitting, this technique allows us defer loading part of our app.

Breaking the bundles and loading it in separately allows us to optimize the performance.

7/n Minification

If you’ve inspected your final bundle, you probably have noticed that the bundler replaces your variables and functions.

This allows us to keep our final bundle we send to the browser lean.

8/n Tree shaking

Also known as dead code elimination.

Most bundlers do this by default where it would remove any code that is unused.

A common example is bundles from a component library.

⚠️ This is a great optimization technique but be careful of “side effects”

9/n Recap of the 6 elements

10/n

That’s it!

If you found this helpful please share this with someone 📬

Also, follow @probablynull to level up your #dev, #javascript, #Reactjs, #aws and #Cloud skills!