source: trip-planner-front/node_modules/@angular-devkit/build-optimizer/README.md@ 84d0fbb

Last change on this file since 84d0fbb was 6a3a178, checked in by Ema <ema_spirova@…>, 3 years ago

initial commit

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