UNPKG

5.91 kBMarkdownView Raw
1# Angular Build Optimizer
2
3Angular Build Optimizer contains Angular optimizations applicable to JavaScript code as a TypeScript transform pipeline.
4
5This package is **deprecated** and should not be used. It has always been experimental (never hit
6`1.0.0`) and was an internal package for the Angular CLI. All the relevant functionality has been
7moved into
8[`@angular-devkit/build-angular`](https://npmjs.com/package/@angular-devkit/build-angular).
9
10## Available optimizations
11
12Transformations applied depend on file content:
13
14- [Class fold](#class-fold), [Scrub file](#scrub-file) and [Prefix functions](#prefix-functions): applied to Angular apps and libraries.
15- [Import tslib](#import-tslib): applied when TypeScript helpers are found.
16
17Some of these optimizations add `/*@__PURE__*/` comments.
18These are used by JS optimization tools to identify pure functions that can potentially be dropped.
19
20### Class fold
21
22Static properties are folded into ES5 classes:
23
24```typescript
25// input
26var Clazz = (function () {
27 function Clazz() {}
28 return Clazz;
29})();
30Clazz.prop = 1;
31
32// output
33var Clazz = (function () {
34 function Clazz() {}
35 Clazz.prop = 1;
36 return Clazz;
37})();
38```
39
40### Scrub file
41
42Angular decorators, property decorators and constructor parameters are removed, while leaving non-Angular ones intact.
43
44```typescript
45// input
46import { Injectable, Input, Component } from '@angular/core';
47import { NotInjectable, NotComponent, NotInput } from 'another-lib';
48var Clazz = (function () {
49 function Clazz() {}
50 return Clazz;
51})();
52Clazz.decorators = [{ type: Injectable }, { type: NotInjectable }];
53Clazz.propDecorators = { 'ngIf': [{ type: Input }] };
54Clazz.ctorParameters = function () {
55 return [{ type: Injector }];
56};
57var ComponentClazz = (function () {
58 function ComponentClazz() {}
59 __decorate([Input(), __metadata('design:type', Object)], Clazz.prototype, 'selected', void 0);
60 __decorate(
61 [NotInput(), __metadata('design:type', Object)],
62 Clazz.prototype,
63 'notSelected',
64 void 0,
65 );
66 ComponentClazz = __decorate(
67 [
68 NotComponent(),
69 Component({
70 selector: 'app-root',
71 templateUrl: './app.component.html',
72 styleUrls: ['./app.component.css'],
73 }),
74 ],
75 ComponentClazz,
76 );
77 return ComponentClazz;
78})();
79
80// output
81import { Injectable, Input, Component } from '@angular/core';
82import { NotInjectable, NotComponent } from 'another-lib';
83var Clazz = (function () {
84 function Clazz() {}
85 return Clazz;
86})();
87Clazz.decorators = [{ type: NotInjectable }];
88var ComponentClazz = (function () {
89 function ComponentClazz() {}
90 __decorate(
91 [NotInput(), __metadata('design:type', Object)],
92 Clazz.prototype,
93 'notSelected',
94 void 0,
95 );
96 ComponentClazz = __decorate([NotComponent()], ComponentClazz);
97 return ComponentClazz;
98})();
99```
100
101### Prefix functions
102
103Adds `/*@__PURE__*/` comments to top level downleveled class declarations and instantiation.
104
105Warning: this transform assumes the file is a pure module. It should not be used with unpure modules.
106
107```typescript
108// input
109var Clazz = (function () {
110 function Clazz() {}
111 return Clazz;
112})();
113var newClazz = new Clazz();
114var newClazzTwo = Clazz();
115
116// output
117var Clazz = /*@__PURE__*/ (function () {
118 function Clazz() {}
119 return Clazz;
120})();
121var newClazz = /*@__PURE__*/ new Clazz();
122var newClazzTwo = /*@__PURE__*/ Clazz();
123```
124
125### Prefix Classes
126
127Adds `/*@__PURE__*/` to downleveled TypeScript classes.
128
129```typescript
130// input
131var ReplayEvent = (function () {
132 function ReplayEvent(time, value) {
133 this.time = time;
134 this.value = value;
135 }
136 return ReplayEvent;
137})();
138
139// output
140var ReplayEvent = /*@__PURE__*/ (function () {
141 function ReplayEvent(time, value) {
142 this.time = time;
143 this.value = value;
144 }
145 return ReplayEvent;
146})();
147```
148
149### Import tslib
150
151TypeScript helpers (`__extends/__decorate/__metadata/__param`) are replaced with `tslib` imports whenever found.
152
153```typescript
154// input
155var __extends =
156 (this && this.__extends) ||
157 function (d, b) {
158 for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
159 function __() {
160 this.constructor = d;
161 }
162 d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
163 };
164
165// output
166import { __extends } from 'tslib';
167```
168
169### Wrap enums
170
171Wrap downleveled TypeScript enums in a function, and adds `/*@__PURE__*/` comment.
172
173```typescript
174// input
175var ChangeDetectionStrategy;
176(function (ChangeDetectionStrategy) {
177 ChangeDetectionStrategy[(ChangeDetectionStrategy['OnPush'] = 0)] = 'OnPush';
178 ChangeDetectionStrategy[(ChangeDetectionStrategy['Default'] = 1)] = 'Default';
179})(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
180
181// output
182var ChangeDetectionStrategy = /*@__PURE__*/ (function () {
183 var ChangeDetectionStrategy = {};
184 ChangeDetectionStrategy[(ChangeDetectionStrategy['OnPush'] = 0)] = 'OnPush';
185 ChangeDetectionStrategy[(ChangeDetectionStrategy['Default'] = 1)] = 'Default';
186 return ChangeDetectionStrategy;
187})();
188```
189
190## Library Usage
191
192```typescript
193import { buildOptimizer } from '@angular-devkit/build-optimizer';
194
195const transpiledContent = buildOptimizer({ content: input }).content;
196```
197
198Available options:
199
200```typescript
201export interface BuildOptimizerOptions {
202 content?: string;
203 inputFilePath?: string;
204 outputFilePath?: string;
205 emitSourceMap?: boolean;
206 strict?: boolean;
207 isSideEffectFree?: boolean;
208}
209```
210
211## Webpack loader usage:
212
213```typescript
214import { BuildOptimizerWebpackPlugin } from '@angular-devkit/build-optimizer';
215
216module.exports = {
217 plugins: [
218 new BuildOptimizerWebpackPlugin(),
219 ]
220 module: {
221 rules: [
222 {
223 test: /\.js$/,
224 loader: '@angular-devkit/build-optimizer/webpack-loader',
225 options: {
226 sourceMap: false
227 }
228 }
229 ]
230 }
231}
232```
233
234## CLI usage
235
236```bash
237build-optimizer input.js
238build-optimizer input.js output.js
239```