Today’s header image was created by Joanna Kosinka, the original source for the image is available here

Before we begin, I want to give credit where it’s due. This article wouldn’t have happened if it weren’t for the background information provided by Raja Mani.

What Is Bundling And Why Would You Need It?

Let’s say that you have a massive MVC application. It’s a multi-page application, with JavaScript on every page. Maybe you have jQuery, Bootstrap’s JavaScript, and Knockoutjs, all of which needs to be loaded on each page, and a different set of view models for each one of those multiple pages.

You can include jQuery, Bootstrap and Knockout.js in your shared layout file, but including each of the view models on their respective pages can get tedious (especially if you end up using a set of several view models on those pages).

Which can definitely happen. Better to re-use than re-implement, and all that.

A little about how web browsers work

This isn’t going to be an in depth description on how a web browser works. I am, however, going to give a brief overview of how a browser gets most of the resources for a page (css, js, images, anything that isn’t HTML, etc.)

Let’s say that you have the following _layout.cshtml file:

Once your browser has received this file, it will queue up requests for the external resources.

My use of external here refers to any resource that’s external to the HTML file

The resources it starts to request are:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

/css/site.css

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

https://code.jquery.com/jquery-3.1.1.min.js

https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js

/js/site.js

What’s wrong with this? Well, there’s nothing wrong with this at all. The problem is that it would be slow to load all resources and fully render the page.

Each time that a web browser finds a link or script tag, it needs to put in a request for the external file. It has to establish a connection with the server, request the file and wait for it to download. Modern web browsers can do this in parallel, but there’s an upper limit to how many simultaneous requests that your browser can make.

The upper limit differs depending on which browser you are using.

In the above example, we can see some of the requests for files that are needed to render the front page of Amazon’s UK website. You can see that each file takes some time to download, each of these files needs to be downloaded before the page is completely loaded.

You can see that it took just under 2 seconds to download the DOM content, just over 3 seconds to download external resources, but almost 40 seconds to parse and paint everything.

Although most of the content that took 40 seconds to load and render was below the fold, so you wouldn’t see it until you scroll down far enough.

Bundling helps to reduce the number of simultaneous requests that the browser has to perform (and wait on) before it can render a web page.

Seriously, in 2008 Amazon calculated that a 1 second slow down on page load could cost them $1 billion

Minification is another trick that we can use to decrease page load time, but we’ll cover that another time.

Bundling in .NET Core MVC Applications

Over in .NET Framework land, enabling bundling is pretty easy. There’s a bit of set up required, but once you’ve done that it’s easy to add to.

However, there are no native bundling options in .NET Core. This is because bundling is seen as a design time action for .NET Core.

Bundling and minifying before deployment provides the advantage of reduced server load. However, it’s important to recognize that design-time bundling and minification increases build complexity and only works with static files.

So how do we bundle our JavaScript and css in .NET Core? The answer is external tools.

Options

There are a plethora of options available to help with bundling. There’s:

Gulp

Grunt,

Bower,

webpack

BundlerMinifier.Core

to name just a few.

All of these have their benefits and drawbacks (mostly in the amount of set up required to get them up and running), and most of them are JavaScript Task Runners (or just JavaScript applications) and will require npm to be installed on your development machine (and your build server, if you’re using one) before you can use any of them.

Zac talked about how to install npm in his guest post.

Today I’ll talk webpack.

I’ll write about the others in separate posts.

webpack

The creators of webpack describe it like this:

webpack is a module bundler for modern JavaScript applications

Once it’s configured, it will take a collection of entry points, build a graph of all of that entry point’s dependencies, and bundle them all together into one file.

Let’s say that you have a series of pages, and each one is related to one of the following:

searching for products

account management (signing up, viewing orders, changing payment details, etc.)

providing feedback

Each of these groups of pages will have different JavaScript requirements. The search page, for example, might have validation on search strings being a certain length and code to perform ajax GET requests for the search results. But your account management JavaScript will be different to that (you might need client side verification of password length or complexity, for example).

Never forgetting to to server side validation too, of course.

The JavaScript required for each of these pages would be perfect as entry points in our webpack configuration. Each of the modules would be added to an entry point, then bundled together and outputted as a single js file.

webpack Worked Example

What we’re going to do here is build a trivial example using the yeoman generator and some npm magic. Along the way, we’ll introduce TypeScript (but we won’t touch on it much), then bring in webpack and bundle our transpiled JavaScript together.

In fact, what we’ll actually do is recreate the code in this GitHub repo. So feel free to head there for a sneak peak.

Empty Web Application

So the first thing we’re going to do is have yeoman generate an Empty Web Application.

We’re going to make this into an MVC application by hand, because we’ve taken the easy road so far.

You should be pretty familiar with the yoeman generator by now. But I’ll list each command that we need to run for completeness.

Choose “Empty Web Application” and give it the name “webpack-ts”, then restore it’s packages.

Adding MVC

Next we want to add MVC and Static Files to the project. Add the following two lines to the project.json:

Then restore packages again

Then we need to alter our startup.cs. Just take this version and paste it over the current class:

What we’ve done here is added told the startup class that we want to add MVC to the list of services available to our application (at line 22). Then we’ve told the ApplicationBuilder that we want to use StaticFiles, and default MVC routing (between lines 37 and 43).

I’ve highlighted the lines that I was talking about, for your convenience

Adding Controllers and Views

Now we’ll need to add a controller and a view. You can do this from the terminal, but I’ll show you how to do it from within VS Code.

Because we’re going to spend enough time in the terminal today

Right click on the webpack-ts node, choose New Folder, and give this folder the name “Controllers”. Then do it again to add a folder called Views.

Right click on the Controllers folder, choose New File, and give this file the name “HomeContoller.cs”. Then paste the following code into it

What we’ve done here is added two Action Methods (Index and SayName) which return views. We need to go add those views now.

Right click on the Views node, choose New Folder, and give this folder the name “Shared”. Then do it again (on the Views node) and name this newer folder “Home”.

Right click on your Shared node, choose New File, and give it the name “_layout.cshtml” (the underscore is important). Then paste the following markup into it:

There’s nothing too special here, we’re just declaring what our master page is going to look like.

Right click on the Home node (under the Views node), choose New File, and give this file the name “Index.cshtml”. Then do it again (on the Views node) and name this newer file “SayName.cshtml”.

Paste the following markup into the Index.cshtml file:

And the following markup into the SayName.cshtml file:

Finally, right click on the Views node, choose New File, and give this file the name “_ViewImports.cshtml”. Then do it again (on the Views node) and name this newer file “_ViewStart.cshtml”.

Here’s the content for those two files:

Adding TypeScript Support

This part isn’t 100% essential, but TypeScript is really useful (if a little terse at first). Wikipedia describes TypeScript as:

[TypeScript] is a strict superset of JavaScript, and adds optional static typing and class-based object-oriented programming to the language

TypeScript is along the same lines as CoffeeScript in that it attempts to make JavaScript easier to use by hiding away some of the idiosyncrasies and edge cases of JavaScript syntax, and by enabling full object oriented support (including inheritance).

I’ll explain the contents of the TypeScript files as I add them, but first we need to go do some npm magic.

Go to your terminal and run this command (you might need to do it with sudo or as root, if you’re running a Linux distribution or a Unix-like):

This tells npm to install the latest version of the official TypeScript package. Then issue this command:

This tells npm to install the latest version of the TypeScript Typings package.

Each external library that you use with TypeScript requires a “.d.ts” (or typings) file to be added to the project. This file tells TypeScript all about the types that the library contains (for example, what the jQuery selector returns, etc.). Without them, you can’t transpile a TypeScript file which uses an external library.

Well, not without using the any keyword, which isn’t great practice because it undermines the whole point of TypeScript.

Adding TypeScript Files

Right click on the webpack-ts node, choose New Folder, and give this folder the name “Content”. Then right click on the Content node, choose New Folder, and give this folder the name “js”.

Right click on the “js” node, choose New File, and give this file the name “greeter.ts”. Then past the following TypeScript into it:

We’re creating the Greeter class as a CommonJs Module and exporting it, so that it can be consumed by any other module or file.

Let’s have a quick look at some of the contents of the file.

Here we’re creating the Greeter class’s constructor. We’re also passing in an argument (called message) of type string.

The most interesting thing here is the use of the private keyword. This tells TypeScript that we want the Greeter class to have a private variable called message, of type string, and that it should initialise it’s value to whatever we pass into the constructor as the first parameter.

Here we’re telling TypeScript to create a get method (called GreetingMessage) which will return a string value. It uses string interpolation to create the returned value.

String Interpolation is a feature of ECMA Script 6

Right click on the “js” node, choose New File, and give this file the name “main.ts”. Then past the following TypeScript into it:

The first thing we’re doing here is importing the Greeter class, we do this by looking the the same directory as the main.ts file (“./”) for a file called greeter (note that we don’t need to supply a file extension).

As with the Greeter class, we’re making a class called Main and exporting it as a CommonJs Module. This class uses an instance of the greeter class, and uses it’s methods to interact with the page it sits on.

After the class declaration, we use an instance of it to set the value of the element with the Id of ‘greeting’ to ‘Hello there’ and prints to the console.

Only one file left to add to the “js node: someOther.ts. Here are it’s contents:

This file is a combination of both Main and Greeter (without any internal instances or either).

Adding tsconfig

Now that we’ve added our TypeScript files, we want to tell TypeScript how to transpile them. To do this we need to add a file called “tsconfig.json” to the root of our project. Here are the contents of that file:

This file tells TypeScript that we want to :

Transpile to ECMA Script 5

Use CommonJs’s Module pattern

Include a Source Map (these allow us to place breakpoints in the JS in Chrome’s dev tools, for instance)

Where the root of the source files are (/content/js)

Where to place the transpiled files

Adding webpack

Finally onto the fun stuff. Up until this point, none of our TypeScript has been transpiled, let along bundled. Let’s do both now.

Back to the terminal:

This tells npm to install the latest version of webpack.

We still can’t bundle our TypeScript files, because they need to be transpiled to JavaScript first. We could to this by hand by running tsc in the terminal, like this:

This will read our tsconfig.json file and produce a js and map file for each of our TypeScript files.

But we’d have to bundle the files after transpiling them. Can webpack do both steps for us?

Of course.

Adding awesome-typescript-loader

awesome-typescript-loader is a plugin for webpack that takes care of the transpiling step for you. This means that when you tell webpack to bundle all of your javascript

And we’ll get to that in a minute

it’ll do the transpiling from TypeScript for you in memory before bundling them. This means that the transpiled JavaScript files (the main.js and main.js.map files that are created from the main.ts file, for instance) wont appear on disk and you wont need to clean them up afterwards – the bundles will appear on disk, obviously.

Back at the terminal:

Now that we have awesome-typescript-loader installed, we should create a webpack config file.

Adding a webpack.config.json

If you run the webpack command without any arguments (or a config file present), you’re going to get a large cli help message.

Told you so.

Also, this is for the version I have installed, and yours might vary.

Using those cli switches we could perform the webpack steps that we need, but it wouldn’t be easy to manage. So we’ll add a confg file.

Add a file called “webpack.config.js” to the root of the project and paste these contents in:

There’s a lot going on here, so lets dissect it in chunks:

These are our entry points to the webpack dependency graph. If we take the path of the “bundle” entry we:

Find the file ./content/js/main.ts

Read it’s contents and find any modules that it lists as dependencies (via the import keyword)

It only has one: greeter.ts

Recursively read the contents of the modules that they rely on

It doesn’t have any

Place these files in memory, ready for outputting

Here we’re defining the rules for the outputted bundles.

The variable __dirName is a Node variable which means “the path we’re running this command in”, so __dirname + “/wwwroot/app” evaluates to the app directory found in the wwwroot directory in the root of our project (which is where webpack’s config file is located, thus where it runs from).

[name] is a reserved token in webpack and means “the name of the entry point”. This means that our two entry points will produce two bundles, one named “bundle.js” and one named “someOtherBundle.js”

Here we’re telling webpack’s resolver that we’re only interested in files with one of the following extensions:

<blank extension>

.ts

.webpack.js

.web.js

.js

Any other files that webpack finds as a dependency for the entry points are ignored.

This tells webpack to create a source map for each bundle that it creates.

Here is where we call awesome-typescript-loader as a plugin.

We do this by creating an array of loaders within a temporary module. The loaders array contains one entry (but we can easily add more to enhance the processing of the bundle files), which is for our plugin.

The value of test is a regular expression which is tested against the names of the files within the bundle. Any files that match are processed by the loader, any that don’t match are ignored.

The list of matching files are then passed to awesome-typescript-loader for processing. And awesome-typescript-loader is what will do the transpiling for us.

Running Everything

Now that we’ve set everything up, we need to run two commands in the terminal. First we need to tell webpack to do it’s thing:

Now that we have a config file webpack will use that to do it’s processing, and will produce something similar to this as output:

The first three lines tell us that awesome-typescript-loader has found our tsconfig.json file and that it transpiled all of our TypeScript files to JavaScript:

Then webpack takes over and builds our bundled JavaScript files and their source maps:

Heading back to VS Code, we can see the generated files and their source maps:

Since we’ve now bundled our JavaScript, all the remains to be done is to build and run the application:

One caveat to remember when browsing to your server is that you’ll have to explicitly mention the HomeController in your request (i.e. “localhost:5000/Home” for the index page).

Accessing Your Pages

If we send a request for /Home/Index (or just /Home) we’ll get the following response:

I’ve included the Chrome dev tool view of the included JavaScript in both screen shots so that you can see that the relevant bundles are loaded in.

If we send a request for /Home/SayName, we’ll get the following response:

And no, Geoff isn’t my name. It was just the first name that came to mind.

… I may have been watching a lot of Eddie Izzard recently.

And That’s About It

As I said at the top of this article, there are many different options available and webpack is just one of them. It seems to be the bundler of choice these days, Gulp and Grunt having fallen out of favour simply being not being as new as webpack.

Developers can be very fickle things. Especially front end developers.