CODEWITHSUNDEEP
webpackbundlebrowserify
qsi14
qsi14

Reputation: 29

How does bundling improve performance?

I understand that bundling allow pulling fewer dependency files from the server. However, if the file size of that one bundled-dependency-file is the same size of the files bundled. Why would it be faster?

I read about the concept of bundle splitting but don't we need to specify the bundle in the main html file (which I understand as the page the user first land on)?

(I am sorry if the question is not well phrased. I'm very confused about the whole bundling concept and don't know how to make the question more specific.)

Upvotes: 1

Views: 1167

Answers (2)

Ben Gubler
Ben Gubler

Reputation: 1441

Benefits of Bundling

Minification

While you can minify your code even if it's not bundled, bundling your code allows much more minification, which in turn leads to faster load times.

For example, say you have two files, file1.js and file2.js. file1.js uses a global function from file1.js.

Minifying the files separately requires that the function names in file1 and file2 stay the same, because the minifier couldn't know what the function was called in file2 (if it was minified) while minifying file1.

Bundling the files and minifying them, on the other hand, allows a minifier to rename each occurence of a function or variable, thus making your code much smaller.

Additionally, as @gauraysingh said, a bundler can remove unused code such as functions. For example, say you use jQuery in your application. When you bundle your code, the bundler and minifier can remove all of the unused jQuery methods, meaning that you will save a lot on file size.

Fewer HTTP requests

Making just one HTTP request, to your bundled code, is faster and uses less data than making multiple requests.

Upvotes: 1

Gaurav Singh
Gaurav Singh

Reputation: 176

If your javascript application has one build only then all the unnecessary code loads when even first page is loading. we can leverage asynchronous capabilities provided by js and load chunks(modules generated from code splitting) on demand. Suppose if my fist page has just some info and also i show popup on some button click on second page ,then i do not need to call pop's code along with fist page but i can load that popup bundle in future on any conditional basis. In addition to that of course our bundle should be uglified, minified and gzipped.

Upvotes: 0

Related Questions