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.
- 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.
So how can TypeScript, NPM and Webpack help?
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.
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
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.
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.
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.