Code Splitting Your Aurelia Webpack Applications

In this article we won’t be detailing how to setup a new Webpack application, but how you can leverage code splitting to reduce the size of your application.

If you would like to know how to create a new Webpack application capable of supporting code splitting, this post has you covered.

This will be a rather quick post, no advanced concepts to learn or remember here.

What is code splitting?

It’s a fancy term describing how you can break parts of your application into smaller Javascript bundles. Instead of having one massive Javascript file that contains your application and dependencies, you take parts of your app and split it into smaller files (sharing the load).

A good starting point is splitting at routes/screens. This means that your split bundle will only be loaded if it is requested, which means the user is downloading smaller amounts of Javascript instead of everything at once (especially if you only need 10% of your code on first-load).

Let’s get started

Remember, we are making the assumption you already have an Aurelia application ready to go, preferably with some routes created.

We have a fictional application with four routes. We are going to split our code at these routes on each moduleId which contains the path to our route.

The following code goes inside of your configureRouter method and you’ll need to import PLATFORM from the aurelia-pal module or aurelia-framework module.

    config.map([
      { route: ["", "home"], name: "home", moduleId: PLATFORM.moduleName("home", "home"), nav: true, title: "Homepage" },
      { route: "products", name: "products", moduleId: PLATFORM.moduleName("products", "products"), nav: true, title: "Products" },
      { route: "product/:product_id", name: "product", moduleId: PLATFORM.moduleName("product", "product"), nav: true, title: "Single Product" },
      { route: "contact", name: "contact", moduleId: PLATFORM.moduleName("contact", "contact"), nav: true, title: "Contact Us" }
    ])

The first argument of moduleName is the name of the view-model we want to load and the second argument is an optional chunk name. The second argument (if supplied) will generate a bundle based on the provided value.

Taking the above routes, we will have four generated split bundles. These bundles are loaded on demand, with the idea being the initial load is faster because you are loading less. The bundles are lazy loaded when they are needed.

Seriously, that’s it. All you need to do is supply a chunk/bundle name as the second argument and Webpack takes care of the rest, even loading the bundles when they’re needed.

If you are looking for runnable example code, core team member Joel Dumas (@jods4) has you covered with an example here if the above went over your head.

Once you grasp the simple concept of code splitting on your routes, you can also do the same for resources and anything else that makes use of PLATFORM.moduleName in your applications.

Webpack is the future.