– – Step 7 – – – – Add the scripts given below to your package.json files for your convenience to build and Rollup by running a single script, namely build_prod.
In this article, we will see how can we create a bundle of Angular 2 Application, using Rollup.
Rollup is based on ES2015 modules, which are more efficient thaN CommonJS, which is also used by Webpack and Browserify.
There is a concept in Rollup called Tree-Shaking, which has the main purpose of eliminating unused code from the files and as the name suggests, it can remove unused code like we shake the tree and the leaves or branches shed. After removing the unused code from the files, we have included only the final code to be moved to the production.
The best benefit of Tree Shaking is when we have third party plugins and tools used in our Application, which have plenty of functions which we selectively used and also integrates with production to increase the code and the performance overload.
This is all about the basic introduction of Rollup and Tree Shaking. Now, let’s proceed by following step by step integration of Rollup and make a bundle from it.
Before proceeding further, you have to setup the environment for Angular 2. If you already have setup, proceed with this article by using step wise implementation and if you still haven’t set up an environment to point to for this article, set the development environment for Angular 2 by clicking here.
Install Rollup plugin by using the…