React

Why do I need a JavaScript Module Bundler in hushh Chrome extensions 🤷🏻‍♂️

Why do I need a JavaScript Module Bundler in hushh Chrome extensions 🤷🏻‍♂️

JavaScript Module Bundler in Hushh Chrome Extensions

As of now Chrome Extensions inherently are built for the Vanilla Web Projects i.e The Pure HTML, CSS & JS builds. While working on the hushh.ai Chrome Extension, Me and the team wanted to take benefit of the React Library for quick and dynamic development of the frontend, however the Browser will not accept a Node Project (The Create-React-App project) directly as an extension. To solve this problem I had to find a way to convert the Node Project into a Vanilla Web Project, this is exactly where Javascript Bundlers like Webpack come in handy! Let me share with you what I learnt while integrating a JS bundler like Webpack in chrome extension:

  • JS Module bundlers are development tools that can combine large number of JS files with their dependencies into a single static JS file which is production ready.
  • To achieve this these bundler’s make use of a data structure called dependency graph, A dependency graph starts from an entry / source JS file provided and then tracks all the files this entry file is dependent on, so that when creating the bundled code, these dependencies are also added and linked properly.
  • Dependencies can include CSS, Images even Web fonts, if a JS file is dependent on another JS file, then the dependencies are tracked recursively. This also ensures that only necessary files are included in the production build
  • The aim of these module bundlers is to make the bundle as small as possible, often with just 1 JS file, hence now we do not need to attach 10 different JS scripts to the website but rather just 1 bundled JS is enough
  • When combining the JS files, bundlers often optimise the performance via code splitting, hot module replacement, error logging etc
  • While doing dependency resolution, each file is assigned a unique id in order to resolve naming conflicts
  • Dependency resolution also helps in maintaining a dependency order, i.e. in what order should which dependencies be loaded in order to avoid errors. (reminds me of topo-sort)
  • Popular Bundlers: browserify, esbuild, parcel, rollup, webpack (most popular)

Hope this introduction helps you to become a better dev, since it certainly helped me. PS: also attaching some great resources to learn more as always

Happy Hushh Coding 🤫

vectoDatabaseBrands

Apoorv Bedmutha (SDE @hushh)

References: Link to the post
Link-1 Link-1 Link-1


Recent Posts

View All Blogs ArrowYellowIcon

Connect with hushh

Say something to reach out to us

info@hush1one.com

+14252969050

Hushh.ai
1021 5th St W
Kirkland, WA 98033

CircelFormShadowBigCircleFormShadow

First Name

Last Name

Email

Phone Number

Select Subject:

Message

Future of “Digital Identity” & “Personalised Experiences”

Manish Sainani, 2024

Call +14252969050

© 2024 HushOne Inc. All rights reserved.

Future of “Digital Identity” & “Personalised Experiences”

Manish Sainani, 2024

Call +14252969050

© 2023 Hush1One Inc. All rights reserved.