Module-Bundler RollupJS entfernt unnötigen Code

Je weniger Daten über die Leitung gehen, umso schneller sind Websites und Apps geladen. Ein Module-Bundler wie WebPack oder RollupJS kann hier Wunder wirken, sorgt er doch dafür, dass der Code, der über die Leitung geht, kleiner wird. Mit dem Befehl

rollup main.js --o bundle.js --f iife

weisen Sie RollupJS an, aus der Anwendung, deren Einstiegsdatei main.js heißt ein Paket mit Namen bundle.js zu erzeugen.

Das Besondere an RollupJS ist, dass dieser Bundler auch versucht, Code zu entfernen, der nicht benötigt wird. Anstatt eine komplette Bibliothek laden zu müssen, gehen dann nur die Teile davon über die Leitung, die auch tatsächlich verwendet werden. Dazu analysiert RollupJS den importierten Code und es wird all denjenigen ausschließen, der nicht benutzt wird.

Unter CommonJS muss die gesamte Bibliothek utils importiert werden.

// import the entire utils object with CommonJS
var utils = require( './utils' );
var query = 'Rollup';
// use the ajax method of the utils object
utils.ajax( 'https://api.example.com?search=' + query ).then( handleResponse );

Unter ES6 hingegen kann auch nur die benötigte Funktion importieren:

// import the ajax function with an ES6 import statement
import { ajax } from './utils';
var query = 'Rollup';
// call the ajax function
ajax( 'https://api.example.com?search=' + query ).then( handleResponse );

Den Rest der utils-Bibliothek lässt RollupJS dann unter den Tisch fallen.

Die Homepage von RollupJS