1 | # Angular Build Optimizer
|
2 |
|
3 | Angular Build Optimizer contains Angular optimizations applicable to JavaScript code as a TypeScript transform pipeline.
|
4 |
|
5 | This 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
|
7 | moved into
|
8 | [`@angular-devkit/build-angular`](https://npmjs.com/package/@angular-devkit/build-angular).
|
9 |
|
10 | ## Available optimizations
|
11 |
|
12 | Transformations 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 |
|
17 | Some of these optimizations add `/*@__PURE__*/` comments.
|
18 | These are used by JS optimization tools to identify pure functions that can potentially be dropped.
|
19 |
|
20 | ### Class fold
|
21 |
|
22 | Static properties are folded into ES5 classes:
|
23 |
|
24 | ```typescript
|
25 | // input
|
26 | var Clazz = (function () {
|
27 | function Clazz() {}
|
28 | return Clazz;
|
29 | })();
|
30 | Clazz.prop = 1;
|
31 |
|
32 | // output
|
33 | var Clazz = (function () {
|
34 | function Clazz() {}
|
35 | Clazz.prop = 1;
|
36 | return Clazz;
|
37 | })();
|
38 | ```
|
39 |
|
40 | ### Scrub file
|
41 |
|
42 | Angular decorators, property decorators and constructor parameters are removed, while leaving non-Angular ones intact.
|
43 |
|
44 | ```typescript
|
45 | // input
|
46 | import { Injectable, Input, Component } from '@angular/core';
|
47 | import { NotInjectable, NotComponent, NotInput } from 'another-lib';
|
48 | var Clazz = (function () {
|
49 | function Clazz() {}
|
50 | return Clazz;
|
51 | })();
|
52 | Clazz.decorators = [{ type: Injectable }, { type: NotInjectable }];
|
53 | Clazz.propDecorators = { 'ngIf': [{ type: Input }] };
|
54 | Clazz.ctorParameters = function () {
|
55 | return [{ type: Injector }];
|
56 | };
|
57 | var 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
|
81 | import { Injectable, Input, Component } from '@angular/core';
|
82 | import { NotInjectable, NotComponent } from 'another-lib';
|
83 | var Clazz = (function () {
|
84 | function Clazz() {}
|
85 | return Clazz;
|
86 | })();
|
87 | Clazz.decorators = [{ type: NotInjectable }];
|
88 | var 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 |
|
103 | Adds `/*@__PURE__*/` comments to top level downleveled class declarations and instantiation.
|
104 |
|
105 | Warning: this transform assumes the file is a pure module. It should not be used with unpure modules.
|
106 |
|
107 | ```typescript
|
108 | // input
|
109 | var Clazz = (function () {
|
110 | function Clazz() {}
|
111 | return Clazz;
|
112 | })();
|
113 | var newClazz = new Clazz();
|
114 | var newClazzTwo = Clazz();
|
115 |
|
116 | // output
|
117 | var Clazz = /*@__PURE__*/ (function () {
|
118 | function Clazz() {}
|
119 | return Clazz;
|
120 | })();
|
121 | var newClazz = /*@__PURE__*/ new Clazz();
|
122 | var newClazzTwo = /*@__PURE__*/ Clazz();
|
123 | ```
|
124 |
|
125 | ### Prefix Classes
|
126 |
|
127 | Adds `/*@__PURE__*/` to downleveled TypeScript classes.
|
128 |
|
129 | ```typescript
|
130 | // input
|
131 | var ReplayEvent = (function () {
|
132 | function ReplayEvent(time, value) {
|
133 | this.time = time;
|
134 | this.value = value;
|
135 | }
|
136 | return ReplayEvent;
|
137 | })();
|
138 |
|
139 | // output
|
140 | var 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 |
|
151 | TypeScript helpers (`__extends/__decorate/__metadata/__param`) are replaced with `tslib` imports whenever found.
|
152 |
|
153 | ```typescript
|
154 | // input
|
155 | var __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
|
166 | import { __extends } from 'tslib';
|
167 | ```
|
168 |
|
169 | ### Wrap enums
|
170 |
|
171 | Wrap downleveled TypeScript enums in a function, and adds `/*@__PURE__*/` comment.
|
172 |
|
173 | ```typescript
|
174 | // input
|
175 | var ChangeDetectionStrategy;
|
176 | (function (ChangeDetectionStrategy) {
|
177 | ChangeDetectionStrategy[(ChangeDetectionStrategy['OnPush'] = 0)] = 'OnPush';
|
178 | ChangeDetectionStrategy[(ChangeDetectionStrategy['Default'] = 1)] = 'Default';
|
179 | })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
|
180 |
|
181 | // output
|
182 | var 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
|
193 | import { buildOptimizer } from '@angular-devkit/build-optimizer';
|
194 |
|
195 | const transpiledContent = buildOptimizer({ content: input }).content;
|
196 | ```
|
197 |
|
198 | Available options:
|
199 |
|
200 | ```typescript
|
201 | export 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
|
214 | import { BuildOptimizerWebpackPlugin } from '@angular-devkit/build-optimizer';
|
215 |
|
216 | module.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
|
237 | build-optimizer input.js
|
238 | build-optimizer input.js output.js
|
239 | ```
|