• Code Splitting with Parcel Web App Bundler
  • By Ankush Chatterjee
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: kk
  • Proofread by: Noahziheng Pot-code

Code segmentation is a hot topic in today’s Web development. Today, we’ll explore how to use Parcel to easily split code.

What is code splitting?

If you are familiar with it, then you can skip this part. Otherwise, keep reading.

If you’ve ever used a JavaScript framework for front-end development, you’ll almost certainly end up packaged into one big JavaScript file. Maybe it’s because you’re writing a complex application with lots of modules and stuff, but anyway, these packages are just too big. A large file takes longer to download, especially on a low-bandwidth network. So, think carefully: Do users really need to load all the functionality at once?

Imagine a single page application for e-commerce. The user can log in just to look at the product list, but he has already spent a long time downloading JavaScript that not only renders the product part, but also renders the filtering, product details, availability, and so on.

If do so, that is too unfair to users! Wouldn’t it be great if we only loaded the part of the code that the user wanted?

So this method of splitting a larger package into smaller packages is called code splitting. These smaller packages can be loaded on demand or asynchronously. As difficult as it may sound, modern packaging tools like WebPack can do this for you, and Parcel is much easier to use.

The files split into these cute little babies. From Shreya [them]

But what does Parcel mean?

The Parcel is a

Fast zero configuration Web application packaging tool

It makes module packaging very simple! If you don’t already know Parcel, I recommend you read this article by Indrek Lasn.

Let’s go!

B: well… In the code part, I won’t use any framework, it doesn’t affect the operation. The following example uses very simple code to show how to split the code.

Create a new folder and initialize a project:

npm init
Copy the code

Or,

yarn init
Copy the code

Choose the way you like it (YARN is my thing 😉) and create some files as shown below.

Is there the simplest structure in the world?

In this example, we just import the index.js file in index.html, and then load the somemodule.js file with an event (in this case, click the button) and render some content with its methods.

Open index.html and add the following code.

<! DOCTYPE html> <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Code Splitting like Humans</title>
  </head>
  <body>
    <button id="bt">Click</button>
    <div class="holder"></div>
    <script src="./index.js"></script>
  </body>
</html>
Copy the code

The example is simple, just an HTML template with a button button and a div that renders the somemodule.js content.

Next we write the someModule file:

console.log("someModule.js loaded");
module.exports = {
  render : function(element){
      element.innerHTML = "You clicked a button"; }}Copy the code

We export an object that has a Render method that takes an element and renders “You clicked a button” inside the element.

Now it’s interesting. In our index.js, we handle the button click event and load someModule dynamically.

For dynamic asynchronous loading, we use the import() syntax, which asynchronously loads a module on demand.

Let’s see how it works,

import('./path/to/module').then(function(page){
//Do Something
});
Copy the code

Because import is asynchronous, we use then to handle the promise objects it returns. In the THEN method, we pass in a function that receives an object loaded from the module. Const page = require(‘./path/to/module’); Very similar, but dynamically and asynchronously executed.

So in our case,

import('./someModule').then(function (page) {
   page.render(document.querySelector(".holder"));
});
Copy the code

So we load someModule and call its Render method.

It is then added to the listener function for the button click event.

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"));
     });
});
}
Copy the code

Now that the code is done, all you need to do is run the parcel, which does all the configuration for you!

parcel index.html
Copy the code

It produces the following files.

Run it in your browser and watch the results.

Console output

Network activity Record

As you can see from the console output, someModule is loaded after the button is clicked. Network shows how codesplit-parcel. Js loads the module after import is called.

Code splitting is such an amazing thing, since we can implement it so easily, why not? 💞 💞

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.