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.)
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.
Making just one HTTP request, to your bundled code, is faster and uses less data than making multiple requests.