

Just install Parcel and run Parcel build, and it will do everything for you out of the box. Parcel wins here as it doesn’t require a config file at all. Coming back to the experiment I was talking of in the beginning: I thought of sharing with you my findings on how webpack, Rollup, and Parcel fared on some important requirements a developer would have. Making the right choice of a bundler from the many available can be life-changing for your app, depending on the use case.

Sure you can, but when working with huge codebases, minifying the app manually isn’t a scalable solution. Why Install Bundlers When We Can Do It on Our Own?

Moreover, fetching a minified file weighing a few KBs is faster than the actual file, which might run into MBs, resulting in improved load time of the app. However, the performance of the app substantially improves with a bundler on board as now the browser only has to request a single file to display your app to the user. In the case of large apps such as Facebook, this can lead to disastrous performance and UX. The efficiency of this transmission is directly proportional to the number and size of the files being requested.
#Webpack electron livereload code
For the import of each of these files to make your code run, the browser has to send a separate HTTP request to the server. Suppose your code is not bundled and hosted as a package of multiple files on the server. It must be now easy for you to guess the importance of a bundler, right? You might say the code is not readable, but who cares? You bundle your code once it’s ready, and minified code is easy to fetch and interpret for the browser. The minified version of this code will look somewhat like this: for(var a= ++i<20 a=i) įewer characters and lines. We just created an array called test and initialised its members till 100. Let’s try to understand this through a simple code snippet: var test = for (var i = 0 i < 100 i++) Bundlers can also minify your files by removing unnecessary white spaces, new lines, comments, and block delimiters without affecting their functionality. While webpack has always been my standard choice, I decided to put it up against two other popular bundlers - Rollup and Parcel.įor those coming from a non-JavaScript background, a bundler is a tool that recursively follows all imports from the entry point of your app and bundles them up into a single file. Recently I was publishing a library to npm and I thought of experimenting with the bundler I was going to package my code in. webpack: Who wins as the best choice for a bundler?
