Sharing Top Content from the Angular-sphere.

Angular 2 Bundle Using Rollup

Angular 2 Bundle Using Rollup  #Angular2

  • Rollup is a JavaScript module bundler, which compiles large pieces of code and converts it to a bundle, which can load on Application load cycle.
  • 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.
  • js) in the project root directory to tell Rollup, how to process the Application.
  • Instead, load the bundle file, using a single script tag after the – – 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.
  • Type npm script name like npm build_prod – – All the steps needed to Rollup your Angular 2 Application are given.

In this article, we will see how can we create a bundle of Angular 2 Application, using Rollup.

Rollup is a JavaScript module bundler, which compiles large pieces of code and converts it to a bundle, which can load on Application load cycle.

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.

Step 1

Install Rollup plugin by using the…

Angular 2 Bundle Using Rollup

Comments are closed, but trackbacks and pingbacks are open.