Tree Shaking Part 1: Building Lightweight Applications using ASP.net Core, NPM, Webpack and TypeScript

The goal of this article is to demonstrate how to setup an environment that can be used in building lightweight web pages using VS2017, ASP.net Core, NPM, Webpack and TypeScript.

Context

The acceleration rate of the web-development scene has been astonishing in the recent years. Tons of JavaScript frameworks had been introduced to help developers quickly bootstrap projects without the need to re-write commonly performed task like managing the DOM, sending data to server side and etc.

The convenience and accessibility of these JavaScript frameworks lures clueless developers to relentlessly plug tons of frameworks to perform very minor UI related coding which leads to:

  • Bloated JavaScript Files
  • High HTTP Request Count
  • High percentage of dead-code (unused-code)
  • And ultimately, extremely slow page load times.

Detecting and Measuring Dead-Code.

In computer programming, dead-code refers to source code that were not utilized but released with the legit and relevant ones. This problem have plagued the web-development scene for a long time and in-fact some of the very popular websites (See Instagram Dead-Code metrics below) still suffer from it at the moment of this article's writing (Feb 25, 2018).

The most basic step in any scientific problem solving is data gathering through the use of measurement tools that provide relevant metrics. Google Chrome recently introduced a code coverage detection feature that helps developers identify and measure dead-code existence on their websites.

Above is a code coverage assessment of Instagram's JavaScript files. Google Chrome's code coverage component states that 965 KB out of 1.8 MB (55%) of the JavaScript downloaded to the browser were not used which is quite bad for a huge and popular website.

So how can TypeScript, NPM and Webpack help?

Using this tools can help us utilize Tree Shaking or dead-code elimination. Tree Shaking is the process of stripping code that isn't required to run a web-page. Majority of dead code originates from framework level code that were not utilized. Below is short description of the tools that we would use to perform bundling, minification and Tree Shaking on JavaScript files.

  • TypeScript

    TypeScript is a syntactical superset (meaning plain JS works on it) of the JavaScript language that primarily aims to provide static typing through the use of the class, interface and module concepts. The biggest benefit of static typing is that it provides IDEs the capability to perform compile time error detection. It also enables tools like Webpack to identify the dependency structure of a JavaScript file.

  • Webpack

    Webpack is a front-end resource bundler tool. Together with TypeScript, it gives you the capability to remove dead-code (Unused code) through the use of its Tree Shaking feature that maximizes module import/export mechanisms to analyze dependency graphs of an application.

  • Node Package Manager (NPM)

    Node Package Manager (aka NPM), is a package manager for managing JavaScript files and it is the default package manager of NodeJS. It allows you to install, update and remove packages (JavaScript files that you depend on). Think of NPM as the NuGet package manager for .Net Applications and the combination of Ant extended by Maven on Java.

Setting up the coding environment

  • Step 1: Create a new project using ASP.net Core

    Open VS2017 and do the following:

    • Click File -> New -> Project -> Web -> ASP.net Core Web Application
    • Select Empty Project
    • Open StartUp.cs and replace the content of the class with the code below:
      The code above would enable MVC routing and usage of static files.

  • Step 1.1: Close VS2017 after creating the project!!

    UPDATE: For some users, NPM does not install properly while VS is currently open. Make sure that there are no process that would prevent CMD from installing script files. #VsSucks.

  • Step 2: Install Node JS and NPM

    Download and install NodeJS by following the guide at its website's setup page. This step would give us the capability to install and use NPM extension of VS2017.

  • Step 3: Open command-prompt on administrator mode

    You can do this by Right-clicking on command prompt app-icon and selecting "Run on administrator" mode.

  • Step 4: Initialize NPM on your application

    You can do this by executing the following command on your web-project's root folder using CMD.

  • Step 5: Downloading the latest NPM.

    You will probably run into problems related to the version of your NPM if you already have it prior to this exercise, the command below enables you to download the latest NPM files that could fix issues that might be associated with outdated NPM files.

  • Step 6: Install Webpack

    After installing NPM, you have to install Webpack to get access to its bundling and tree shaking capabilities.

    The --save-dev option tells NPM to install dependencies on your development environment only. This would prevent the bloating of your wwwroot folder for production builds.

  • Step 7: Install TypeScript and its Webpack loader

    Installing TypeScript would give us the capability to write TypeScript files (.ts). The TypeScript loader on the other hand would be used by Webpack on transpiling our TypeScript file into raw JavaScript files.

  • Step 8: Disable the Native VS TypeScript Compiler

    Since we would be using Webpack for transpiling our TypeScript files, we have to disable the native transpilation process provided by Visual Studio 2017. You can do this by manually editing your ASP.net Core's CS project file by adding the code below.


Summary

At the end of this article you should have the following:

  • An blank ASP.net Core project with MVC and static file support.
  • A package.json file that contains references to NPM, TypeScript, TS-Loader and Webpack.


Conclusion

In this article, we have learned how to setup an ASP.net Core application that can utilize NPM, TypeScript and Webpack as a preparation for the Tree shaking article.

We've also learned that utilizing too much JavaScript dependencies could slow down your web page's load time. To reduce the side-effect of having too much dead-code from this frameworks, you could Minify, Bundle and Tree-Shake your JavaScript files with the use of NPM, TypeScript and WebPack. I would be writing the second part of this article that would showcase the advantages and strengths of using the tools mentioned on this article.

Looking for JavaScript Goodies?


Comments

Post a Comment

Popular posts from this blog

Building Simple API Gateways with Ocelot and ASP.net Core

API Gateway in a Nutshell

Replicating Netflix Part 1: Installing Raspbian Lite using Etcher

10 Steps to Setup and Containerize an Express Server