Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why and where all do we need bundle.js?

What is the need for bundle.js for Node.js/Angular/React applications? What if its not used while building and deploying the application?

like image 250
Ashfaque Rifaye Avatar asked Dec 09 '18 07:12

Ashfaque Rifaye


People also ask

Why do we need to bundle JavaScript?

JavaScript bundling is an optimization technique you can use to reduce the number of server requests for JavaScript files. Bundling accomplishes this by merging multiple JavaScript files together into one file to reduce the number of page requests.

Why do we need Webpacks?

Application of Webpack:It helps to use different javascript files without having tension that will load first. It makes code shorter. It helps in converting many files other than javascript into modules. It compiles different javascript module.

Why do we need Webpack in Nodejs?

Webpack provides a great developer experience as it not only bundles JavaScript applications (supporting both EcmaScript Modules and CommonJS), but when paired with plugins and loaders it can be used for taking care of dependencies and assets, such as images, fonts, SASS, CSS, etx.

What is Webpack and what's the use of having it in place?

Webpack is a static module bundler for JavaScript applications — it takes all the code from your application and makes it usable in a web browser. Modules are reusable chunks of code built from your app's JavaScript, node_modules, images, and the CSS styles which are packaged to be easily used in your website.


2 Answers

Where bundling comes from?

We started bundling our assets because of performance reasons.

  • HTTP1 supports a limited requests on a single connection. Creating connections for each asset was killing the performance.
  • We started bundling things page by page to increase performance with more effective caching.
  • We were able to add the fingerprint to it and upload it to a CDN. (home-page.231434.js). So we were able to deploy our application by dockerizing it.
  • Bundling also helps us reduce the page size more because bundler knows the full system. This means it can remove unused things and minify things easier. You can't do it without a bundler easily.
  • Also, bundlers are using transpilers. Browsers can't always be able to run the codes that we write like Typescript, CoffeeScript. Bundlers can transpile these codes easily into bundles.

Do we still need it?

Nowadays things are changed a lot like we bundle our assets.

  • First of all, almost every browser now supports HTTP/2. So we can request multiple files on the same connection. Bundling is not needed because of this anymore. Also, we have http/2 server push.
  • Libraries like React, Angular, Vue are a lot more effective in size. They can be easily downloaded to a page from a gzip supporting source.

These are the reasons we don't need bundling anymore.

But based on your project we may still need bundling. This is the real truth.

I would still go with bundling.


In my company, we are using a container orchestration system to control our dockerized applications. We may run more than a version same time. Creating fingerprints for files while bundling and uploading them to CDN is still more effective for us. And also we are trying to get use of prefetching and preloading. CDN helps us reduce the loading times of other country visitors. And also we are getting support from service worker to change assets when we need it by page.

So actually nowadays it is just based on your project. There are not much performance reasons anymore.

like image 130
Ahmet Can Güven Avatar answered Oct 07 '22 02:10

Ahmet Can Güven


how to create bundle.js

Nowadays,we usually use pack tools like webpack to pack js、css or other files.With proper loaders, webpack will pack the files into many bundle files and the browser will understand them.

the need for bundle.js

  1. The module bundler will analysis the project ,find the dependency relationship and only fetch the necessary package when loading the web page.
  2. And with module bundler, it will compiler some lanuages that browser can't read, like typescript 、less and so on.

What if its not used

Module bundler is not necessary for web project, but it will improving the performance of web pages.If not using the module bundler, web can't only fetch necessary bundle when loading.So the loading time will be longer.

like image 45
Root Avatar answered Oct 07 '22 03:10

Root