Code Splitting with Parcel Web App Bundler

Code Splitting!! Quite a buzzword in web development nowadays. Today, we will explore code splitting and see how can we do it super easily with parcel. What is Code Splitting? If you are already familiar with it… you may skip this part, others, ride along… If you have done frontend web with any framework, you have surely packed all of your modules into one big bundle JavaScript file, which you attach to your webpage and do amazing stuff. But hey, those bundles are quite big! You have written your awesome(and complicated) web app, with so many parts… they ought to produce big bundles; and bigger the things, longer it takes to download them on slow networks. Ask yourself the question, does the user need at once? development JavaScript all of it Imagine it’s an e-commerce single page app. The user logs in to see the product listing, he may have come just to check out the products, but he has already spent a lot of time and data not just to download the JavaScript to render the product listing, but also the JavaScript to render about, filters, product detail, offers… and so on and so forth. By doing this we are doing the users injustice!! Wont it be awesome, if we could give the users what they need,only when they need it?. So, this idea of splitting your large bundle into multiple smaller bundles is called code splitting. These smaller bundles are loaded on demand and asynchronously. It surely sounds tough to do, but modern bundlers like Webpack make it quite easy, and parcel takes this easiness to whole another level. The parent is divided into these cute babies. Courtesy [ ] Shreya Instagram So, what is this new Parcel thing?? is the Parcel Blazing fast, zero configuration web application bundler It makes module bundling really very easy!! If you haven’t heard about it, I recommend by . this article Indrek Lasn Let’s get Splitting! To the coding part… I wont use any framework here(which you normally would), but framework or no framework, the process would remain the same. This example would have really really simple code to demonstrate the process. Create a new empty directory, and a project, by init npm init Or, yarn init Start it with whatever your favorite is(yarn in my case 😉) and create the files like show below. World’s simplest file structure The idea is, we will only include the contents of in our and on an event(it will be a button click in this case) we will load and render some content with it. index.js index.html someModule.js Open and add the following code. index.html Code Splitting like Humans Click Nothing special, just basic HTML boiler plate, with a button and a where we will render the content from div someModule.js So, lets write the code for the module someModule console.log("someModule.js loaded"); module.exports = { render : function(element){ element.innerHTML = "You clicked a button"; } } We are exporting an object, which has a function which takes in an element and sets its inner HTML to “You clicked a button”. render Now, comes the magic. In our file we have to handle the button click event and dynamically load index.js someModule For the dynamic asynchronous loading we will use the function syntax. This function loads a module on demand and asynchronously. import() Look at the usage, import('./path/to/module').then(function(page){ //Do Something}); As is asynchronous it returns a promise which we handle with . In we pass a function which accepts the object loaded from the module. It is similar to , only done dynamically and asynchronously. import then then const page = require('./path/to/module'); In our case, import('./someModule').then(function (page) { page.render(document.querySelector(".holder")); }); We load and call its render function. someModule Lets add it up inside a button’s click event listener. console.log("index.js loaded"); window.onload = function(){document.querySelector("#bt").addEventListener('click',function(evt){console.log("Button Clicked"); import('./someModule').then(function (page) { page.render(document.querySelector(".holder")); }); }); } Now that the code is all written, let’s run parcel. Parcel will automatically handle all the configuration work! parcel index.html It produces, the following files. Run it in your browser and observe. Console output Network tab Notice in the console output, is loaded only after the button click. In the network tab see how the module is loaded by after function call. someModule codesplit-parcel.js import Code Splitting is something awesome, and if it can be done so easily, there is no reason we should step back from it. 💞💞 _Click to see my Youtube channel!!_🤓🤓 I need your love there Please hit some claps 👏 if you like the content, your support keeps me going. ❤❤