Today more and more JavaScript code is being used on the front end as a result of many JavaScript frameworks available today.Also we need to use JavaScript in our code to make our web application provide better end user experience.
If we don’t use any JavaScript Bundling then if our application uses 3 different JavaScript files then we include those files in our application as:
<script type="text/javascript" scr="file1.js"> <script type="text/javascript" scr="file2.js"/> <script type="text/javascript" scr="file3.js"/>
Now if the JavaScript in file3 is dependent on the code in file2 then we strictly need to follow the above pattern when referencing JavaScript files.So we can not include file3 before file2.If we do that then our JavaScript code will break and will not execute.
So we need to follow a strict order when referring JavaScript files in our HTML page.For small number of files this may not be an issue but with large number of files it can difficult to maintain order of JavaScript files.
JavaScript Bundling handles such types of dependency issues. JavaScript bundler put all the JavaScript code which our application uses as well as all the dependent code in a single JavaScript file.
If we are referencing many JavaScript files in our html page then it will cause multiple http requests.But as the JavaScript bundlers dumps all the JavaScript code in a single file so it reduces the number of http requests.
Some of the common JavaScript bundlers are:
Browserify
jspm
Webpack
We can run webpack with the following command
npm run webpack
this creates a file bundle.js containing the JavaScript code.
Leave a Reply