1 | # Angular Build Optimizer
|
---|
2 |
|
---|
3 | Angular Build Optimizer contains Angular optimizations applicable to JavaScript code as a TypeScript transform pipeline.
|
---|
4 |
|
---|
5 | ## Available optimizations
|
---|
6 |
|
---|
7 | Transformations 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 |
|
---|
12 | Some of these optimizations add `/*@__PURE__*/` comments.
|
---|
13 | These are used by JS optimization tools to identify pure functions that can potentially be dropped.
|
---|
14 |
|
---|
15 | ### Class fold
|
---|
16 |
|
---|
17 | Static properties are folded into ES5 classes:
|
---|
18 |
|
---|
19 | ```typescript
|
---|
20 | // input
|
---|
21 | var Clazz = (function () {
|
---|
22 | function Clazz() {}
|
---|
23 | return Clazz;
|
---|
24 | })();
|
---|
25 | Clazz.prop = 1;
|
---|
26 |
|
---|
27 | // output
|
---|
28 | var Clazz = (function () {
|
---|
29 | function Clazz() {}
|
---|
30 | Clazz.prop = 1;
|
---|
31 | return Clazz;
|
---|
32 | })();
|
---|
33 | ```
|
---|
34 |
|
---|
35 | ### Scrub file
|
---|
36 |
|
---|
37 | Angular decorators, property decorators and constructor parameters are removed, while leaving non-Angular ones intact.
|
---|
38 |
|
---|
39 | ```typescript
|
---|
40 | // input
|
---|
41 | import { Injectable, Input, Component } from '@angular/core';
|
---|
42 | import { NotInjectable, NotComponent, NotInput } from 'another-lib';
|
---|
43 | var Clazz = (function () {
|
---|
44 | function Clazz() {}
|
---|
45 | return Clazz;
|
---|
46 | })();
|
---|
47 | Clazz.decorators = [{ type: Injectable }, { type: NotInjectable }];
|
---|
48 | Clazz.propDecorators = { 'ngIf': [{ type: Input }] };
|
---|
49 | Clazz.ctorParameters = function () {
|
---|
50 | return [{ type: Injector }];
|
---|
51 | };
|
---|
52 | var 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
|
---|
76 | import { Injectable, Input, Component } from '@angular/core';
|
---|
77 | import { NotInjectable, NotComponent } from 'another-lib';
|
---|
78 | var Clazz = (function () {
|
---|
79 | function Clazz() {}
|
---|
80 | return Clazz;
|
---|
81 | })();
|
---|
82 | Clazz.decorators = [{ type: NotInjectable }];
|
---|
83 | var 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 |
|
---|
98 | Adds `/*@__PURE__*/` comments to top level downleveled class declarations and instantiation.
|
---|
99 |
|
---|
100 | Warning: this transform assumes the file is a pure module. It should not be used with unpure modules.
|
---|
101 |
|
---|
102 | ```typescript
|
---|
103 | // input
|
---|
104 | var Clazz = (function () {
|
---|
105 | function Clazz() {}
|
---|
106 | return Clazz;
|
---|
107 | })();
|
---|
108 | var newClazz = new Clazz();
|
---|
109 | var newClazzTwo = Clazz();
|
---|
110 |
|
---|
111 | // output
|
---|
112 | var Clazz = /*@__PURE__*/ (function () {
|
---|
113 | function Clazz() {}
|
---|
114 | return Clazz;
|
---|
115 | })();
|
---|
116 | var newClazz = /*@__PURE__*/ new Clazz();
|
---|
117 | var newClazzTwo = /*@__PURE__*/ Clazz();
|
---|
118 | ```
|
---|
119 |
|
---|
120 | ### Prefix Classes
|
---|
121 |
|
---|
122 | Adds `/*@__PURE__*/` to downleveled TypeScript classes.
|
---|
123 |
|
---|
124 | ```typescript
|
---|
125 | // input
|
---|
126 | var ReplayEvent = (function () {
|
---|
127 | function ReplayEvent(time, value) {
|
---|
128 | this.time = time;
|
---|
129 | this.value = value;
|
---|
130 | }
|
---|
131 | return ReplayEvent;
|
---|
132 | })();
|
---|
133 |
|
---|
134 | // output
|
---|
135 | var 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 |
|
---|
146 | TypeScript helpers (`__extends/__decorate/__metadata/__param`) are replaced with `tslib` imports whenever found.
|
---|
147 |
|
---|
148 | ```typescript
|
---|
149 | // input
|
---|
150 | var __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
|
---|
161 | import { __extends } from 'tslib';
|
---|
162 | ```
|
---|
163 |
|
---|
164 | ### Wrap enums
|
---|
165 |
|
---|
166 | Wrap downleveled TypeScript enums in a function, and adds `/*@__PURE__*/` comment.
|
---|
167 |
|
---|
168 | ```typescript
|
---|
169 | // input
|
---|
170 | var ChangeDetectionStrategy;
|
---|
171 | (function (ChangeDetectionStrategy) {
|
---|
172 | ChangeDetectionStrategy[(ChangeDetectionStrategy['OnPush'] = 0)] = 'OnPush';
|
---|
173 | ChangeDetectionStrategy[(ChangeDetectionStrategy['Default'] = 1)] = 'Default';
|
---|
174 | })(ChangeDetectionStrategy || (ChangeDetectionStrategy = {}));
|
---|
175 |
|
---|
176 | // output
|
---|
177 | var 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
|
---|
188 | import { buildOptimizer } from '@angular-devkit/build-optimizer';
|
---|
189 |
|
---|
190 | const transpiledContent = buildOptimizer({ content: input }).content;
|
---|
191 | ```
|
---|
192 |
|
---|
193 | Available options:
|
---|
194 |
|
---|
195 | ```typescript
|
---|
196 | export 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
|
---|
209 | import { BuildOptimizerWebpackPlugin } from '@angular-devkit/build-optimizer';
|
---|
210 |
|
---|
211 | module.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
|
---|
232 | build-optimizer input.js
|
---|
233 | build-optimizer input.js output.js
|
---|
234 | ```
|
---|