Skip to content

README.md

Latest commit

History

History
215 lines (167 loc) · 5.44 KB

README.md

File metadata and controls

215 lines (167 loc) · 5.44 KB
Raw

Angular Build Optimizer

Angular Build Optimizer contains Angular optimizations applicable to JavaScript code as a TypeScript transform pipeline.

Available optimizations

Transformations applied depend on file content:

Some of these optimizations add /*@__PURE__*/ comments. These are used by JS optimization tools to identify pure functions that can potentially be dropped.

Class fold

Static properties are folded into ES5 classes:

// inputvarClazz=(function(){functionClazz(){}returnClazz;}());Clazz.prop=1;// outputvarClazz=(function(){functionClazz(){}Clazz.prop=1;returnClazz;}());

Scrub file

Angular decorators, property decorators and constructor parameters are removed, while leaving non-Angular ones intact.

// inputimport{Injectable,Input,Component}from'@angular/core';import{NotInjectable,NotComponent,NotInput}from'another-lib';varClazz=(function(){functionClazz(){}returnClazz;}());Clazz.decorators=[{type: Injectable},{type: NotInjectable}];Clazz.propDecorators={'ngIf': [{type: Input}]};Clazz.ctorParameters=function(){return[{type: Injector}];};varComponentClazz=(function(){functionComponentClazz(){}__decorate([Input(),__metadata("design:type",Object)],Clazz.prototype,"selected",void0);__decorate([NotInput(),__metadata("design:type",Object)],Clazz.prototype,"notSelected",void0);ComponentClazz=__decorate([NotComponent(),Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})],ComponentClazz);returnComponentClazz;}());// outputimport{Injectable,Input,Component}from'@angular/core';import{NotInjectable,NotComponent}from'another-lib';varClazz=(function(){functionClazz(){}returnClazz;}());Clazz.decorators=[{type: NotInjectable}];varComponentClazz=(function(){functionComponentClazz(){}__decorate([NotInput(),__metadata("design:type",Object)],Clazz.prototype,"notSelected",void0);ComponentClazz=__decorate([NotComponent()],ComponentClazz);returnComponentClazz;}());

Prefix functions

Adds /*@__PURE__*/ comments to top level downleveled class declarations and instantiation.

Warning: this transform assumes the file is a pure module. It should not be used with unpure modules.

// inputvarClazz=(function(){functionClazz(){}returnClazz;}());varnewClazz=newClazz();varnewClazzTwo=Clazz();// outputvarClazz=/*@__PURE__*/(function(){functionClazz(){}returnClazz;}());varnewClazz=/*@__PURE__*/newClazz();varnewClazzTwo=/*@__PURE__*/Clazz();

Prefix Classes

Adds /*@__PURE__*/ to downleveled TypeScript classes.

// inputvarReplayEvent=(function(){functionReplayEvent(time,value){this.time=time;this.value=value;}returnReplayEvent;}());// outputvarReplayEvent=/*@__PURE__*/(function(){functionReplayEvent(time,value){this.time=time;this.value=value;}returnReplayEvent;}());

Import tslib

TypeScript helpers (__extends/__decorate/__metadata/__param) are replaced with tslib imports whenever found.

// inputvar__extends=(this&&this.__extends)||function(d,b){for(varpinb)if(b.hasOwnProperty(p))d[p]=b[p];function__(){this.constructor=d;}d.prototype=b===null ? Object.create(b) : (__.prototype=b.prototype,new__());};// outputimport{__extends}from"tslib";

Wrap enums

Wrap downleveled TypeScript enums in a function, and adds /*@__PURE__*/ comment.

// inputvarChangeDetectionStrategy;(function(ChangeDetectionStrategy){ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"]=0]="OnPush";ChangeDetectionStrategy[ChangeDetectionStrategy["Default"]=1]="Default";})(ChangeDetectionStrategy||(ChangeDetectionStrategy={}));// outputvarChangeDetectionStrategy=/*@__PURE__*/(function(){varChangeDetectionStrategy={};ChangeDetectionStrategy[ChangeDetectionStrategy["OnPush"]=0]="OnPush";ChangeDetectionStrategy[ChangeDetectionStrategy["Default"]=1]="Default";returnChangeDetectionStrategy;})();

Library Usage

import{buildOptimizer}from'@angular-devkit/build-optimizer';consttranspiledContent=buildOptimizer({content: input}).content;

Available options:

exportinterfaceBuildOptimizerOptions{content?: string;inputFilePath?: string;outputFilePath?: string;emitSourceMap?: boolean;strict?: boolean;isSideEffectFree?: boolean;}

Webpack loader usage:

import{BuildOptimizerWebpackPlugin}from'@angular-devkit/build-optimizer';module.exports={plugins: [newBuildOptimizerWebpackPlugin(),]module: {rules: [{test: /\.js$/,loader: '@angular-devkit/build-optimizer/webpack-loader',options: {sourceMap: false}}]}}

CLI usage

build-optimizer input.js
build-optimizer input.js output.js