@angular-devkit/build-angular 13.0.4 → 13.1.0-next.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +37 -37
- package/src/babel/presets/application.d.ts +1 -0
- package/src/babel/webpack-loader.js +9 -0
- package/src/builders/browser/index.js +7 -9
- package/src/builders/dev-server/index.js +31 -6
- package/src/builders/extract-i18n/index.js +1 -4
- package/src/builders/karma/index.d.ts +2 -2
- package/src/builders/karma/index.js +1 -7
- package/src/builders/server/index.js +1 -7
- package/src/utils/build-options.d.ts +1 -2
- package/src/utils/bundle-calculator.d.ts +6 -7
- package/src/utils/bundle-calculator.js +3 -1
- package/src/utils/i18n-inlining.js +18 -2
- package/src/utils/i18n-options.d.ts +16 -10
- package/src/utils/i18n-options.js +45 -34
- package/src/utils/index-file/augment-index-html.d.ts +5 -1
- package/src/utils/index-file/augment-index-html.js +25 -5
- package/src/utils/index.d.ts +0 -1
- package/src/utils/index.js +0 -1
- package/src/utils/normalize-builder-schema.js +2 -0
- package/src/{webpack/configs/worker.d.ts → utils/supported-browsers.d.ts} +1 -3
- package/src/utils/supported-browsers.js +26 -0
- package/src/webpack/configs/common.d.ts +2 -2
- package/src/webpack/configs/common.js +135 -158
- package/src/webpack/configs/dev-server.d.ts +2 -2
- package/src/webpack/configs/dev-server.js +74 -19
- package/src/webpack/configs/index.d.ts +0 -6
- package/src/webpack/configs/index.js +0 -6
- package/src/webpack/configs/styles.d.ts +2 -2
- package/src/webpack/configs/styles.js +2 -4
- package/src/webpack/plugins/index.d.ts +2 -0
- package/src/webpack/plugins/index.js +5 -1
- package/src/webpack/plugins/json-stats-plugin.d.ts +13 -0
- package/src/webpack/plugins/json-stats-plugin.js +54 -0
- package/src/webpack/plugins/named-chunks-plugin.d.ts +17 -0
- package/src/webpack/plugins/named-chunks-plugin.js +49 -0
- package/src/webpack/plugins/progress-plugin.d.ts +11 -0
- package/src/webpack/plugins/progress-plugin.js +38 -0
- package/src/webpack/plugins/transfer-size-plugin.d.ts +12 -0
- package/src/webpack/plugins/transfer-size-plugin.js +47 -0
- package/src/webpack/{configs/browser.d.ts → plugins/typescript.d.ts} +2 -2
- package/src/webpack/{configs → plugins}/typescript.js +5 -24
- package/src/webpack/utils/helpers.d.ts +15 -5
- package/src/webpack/utils/helpers.js +159 -34
- package/src/webpack/utils/stats.d.ts +10 -3
- package/src/webpack/utils/stats.js +112 -35
- package/src/utils/build-browser-features.d.ts +0 -16
- package/src/utils/build-browser-features.js +0 -54
- package/src/webpack/configs/browser.js +0 -81
- package/src/webpack/configs/server.d.ts +0 -14
- package/src/webpack/configs/server.js +0 -73
- package/src/webpack/configs/stats.d.ts +0 -38
- package/src/webpack/configs/stats.js +0 -53
- package/src/webpack/configs/test.d.ts +0 -10
- package/src/webpack/configs/test.js +0 -77
- package/src/webpack/configs/typescript.d.ts +0 -12
- package/src/webpack/configs/worker.js +0 -22
|
@@ -29,10 +29,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
29
29
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
30
30
|
};
|
|
31
31
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
32
|
-
exports.
|
|
32
|
+
exports.getStatsOptions = exports.externalizePackages = exports.assetPatterns = exports.globalScriptsByBundleName = exports.getCacheSettings = exports.getInstrumentationExcludedPaths = exports.assetNameTemplateFactory = exports.normalizeExtraEntryPoints = exports.getOutputHashFormat = void 0;
|
|
33
|
+
const crypto_1 = require("crypto");
|
|
34
|
+
const fs_1 = require("fs");
|
|
33
35
|
const glob_1 = __importDefault(require("glob"));
|
|
34
36
|
const path = __importStar(require("path"));
|
|
35
|
-
const webpack_1 = require("webpack");
|
|
36
37
|
function getOutputHashFormat(option, length = 20) {
|
|
37
38
|
const hashFormats = {
|
|
38
39
|
none: { chunk: '', extract: '', file: '', script: '' },
|
|
@@ -74,38 +75,6 @@ function normalizeExtraEntryPoints(extraEntryPoints, defaultBundleName) {
|
|
|
74
75
|
});
|
|
75
76
|
}
|
|
76
77
|
exports.normalizeExtraEntryPoints = normalizeExtraEntryPoints;
|
|
77
|
-
function getSourceMapDevTool(scriptsSourceMap, stylesSourceMap, hiddenSourceMap = false, inlineSourceMap = false) {
|
|
78
|
-
const include = [];
|
|
79
|
-
if (scriptsSourceMap) {
|
|
80
|
-
include.push(/js$/);
|
|
81
|
-
}
|
|
82
|
-
if (stylesSourceMap) {
|
|
83
|
-
include.push(/css$/);
|
|
84
|
-
}
|
|
85
|
-
return new webpack_1.SourceMapDevToolPlugin({
|
|
86
|
-
filename: inlineSourceMap ? undefined : '[file].map',
|
|
87
|
-
include,
|
|
88
|
-
// We want to set sourceRoot to `webpack:///` for non
|
|
89
|
-
// inline sourcemaps as otherwise paths to sourcemaps will be broken in browser
|
|
90
|
-
// `webpack:///` is needed for Visual Studio breakpoints to work properly as currently
|
|
91
|
-
// there is no way to set the 'webRoot'
|
|
92
|
-
sourceRoot: 'webpack:///',
|
|
93
|
-
moduleFilenameTemplate: '[resource-path]',
|
|
94
|
-
append: hiddenSourceMap ? false : undefined,
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
exports.getSourceMapDevTool = getSourceMapDevTool;
|
|
98
|
-
function isPolyfillsEntry(name) {
|
|
99
|
-
return name === 'polyfills';
|
|
100
|
-
}
|
|
101
|
-
exports.isPolyfillsEntry = isPolyfillsEntry;
|
|
102
|
-
function getWatchOptions(poll) {
|
|
103
|
-
return {
|
|
104
|
-
poll,
|
|
105
|
-
ignored: poll === undefined ? '**/$_lazy_route_resources' : '**/node_modules/**',
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
exports.getWatchOptions = getWatchOptions;
|
|
109
78
|
function assetNameTemplateFactory(hashFormat) {
|
|
110
79
|
const visitedFiles = new Map();
|
|
111
80
|
return (resourcePath) => {
|
|
@@ -140,3 +109,159 @@ function getInstrumentationExcludedPaths(sourceRoot, excludedPaths) {
|
|
|
140
109
|
return excluded;
|
|
141
110
|
}
|
|
142
111
|
exports.getInstrumentationExcludedPaths = getInstrumentationExcludedPaths;
|
|
112
|
+
function getCacheSettings(wco, angularVersion) {
|
|
113
|
+
const { enabled, path: cacheDirectory } = wco.buildOptions.cache;
|
|
114
|
+
if (enabled) {
|
|
115
|
+
const packageVersion = require('../../../package.json').version;
|
|
116
|
+
return {
|
|
117
|
+
type: 'filesystem',
|
|
118
|
+
cacheDirectory: path.join(cacheDirectory, 'angular-webpack'),
|
|
119
|
+
maxMemoryGenerations: 1,
|
|
120
|
+
// We use the versions and build options as the cache name. The Webpack configurations are too
|
|
121
|
+
// dynamic and shared among different build types: test, build and serve.
|
|
122
|
+
// None of which are "named".
|
|
123
|
+
name: (0, crypto_1.createHash)('sha1')
|
|
124
|
+
.update(angularVersion)
|
|
125
|
+
.update(packageVersion)
|
|
126
|
+
.update(wco.projectRoot)
|
|
127
|
+
.update(JSON.stringify(wco.tsConfig))
|
|
128
|
+
.update(JSON.stringify({
|
|
129
|
+
...wco.buildOptions,
|
|
130
|
+
// Needed because outputPath changes on every build when using i18n extraction
|
|
131
|
+
// https://github.com/angular/angular-cli/blob/736a5f89deaca85f487b78aec9ff66d4118ceb6a/packages/angular_devkit/build_angular/src/utils/i18n-options.ts#L264-L265
|
|
132
|
+
outputPath: undefined,
|
|
133
|
+
}))
|
|
134
|
+
.digest('hex'),
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
if (wco.buildOptions.watch) {
|
|
138
|
+
return {
|
|
139
|
+
type: 'memory',
|
|
140
|
+
maxGenerations: 1,
|
|
141
|
+
};
|
|
142
|
+
}
|
|
143
|
+
return false;
|
|
144
|
+
}
|
|
145
|
+
exports.getCacheSettings = getCacheSettings;
|
|
146
|
+
function globalScriptsByBundleName(root, scripts) {
|
|
147
|
+
return normalizeExtraEntryPoints(scripts, 'scripts').reduce((prev, curr) => {
|
|
148
|
+
const { bundleName, inject, input } = curr;
|
|
149
|
+
let resolvedPath = path.resolve(root, input);
|
|
150
|
+
if (!(0, fs_1.existsSync)(resolvedPath)) {
|
|
151
|
+
try {
|
|
152
|
+
resolvedPath = require.resolve(input, { paths: [root] });
|
|
153
|
+
}
|
|
154
|
+
catch {
|
|
155
|
+
throw new Error(`Script file ${input} does not exist.`);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
const existingEntry = prev.find((el) => el.bundleName === bundleName);
|
|
159
|
+
if (existingEntry) {
|
|
160
|
+
if (existingEntry.inject && !inject) {
|
|
161
|
+
// All entries have to be lazy for the bundle to be lazy.
|
|
162
|
+
throw new Error(`The ${bundleName} bundle is mixing injected and non-injected scripts.`);
|
|
163
|
+
}
|
|
164
|
+
existingEntry.paths.push(resolvedPath);
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
prev.push({
|
|
168
|
+
bundleName,
|
|
169
|
+
inject,
|
|
170
|
+
paths: [resolvedPath],
|
|
171
|
+
});
|
|
172
|
+
}
|
|
173
|
+
return prev;
|
|
174
|
+
}, []);
|
|
175
|
+
}
|
|
176
|
+
exports.globalScriptsByBundleName = globalScriptsByBundleName;
|
|
177
|
+
function assetPatterns(root, assets) {
|
|
178
|
+
return assets.map((asset, index) => {
|
|
179
|
+
// Resolve input paths relative to workspace root and add slash at the end.
|
|
180
|
+
// eslint-disable-next-line prefer-const
|
|
181
|
+
let { input, output, ignore = [], glob } = asset;
|
|
182
|
+
input = path.resolve(root, input).replace(/\\/g, '/');
|
|
183
|
+
input = input.endsWith('/') ? input : input + '/';
|
|
184
|
+
output = output.endsWith('/') ? output : output + '/';
|
|
185
|
+
if (output.startsWith('..')) {
|
|
186
|
+
throw new Error('An asset cannot be written to a location outside of the output path.');
|
|
187
|
+
}
|
|
188
|
+
return {
|
|
189
|
+
context: input,
|
|
190
|
+
// Now we remove starting slash to make Webpack place it from the output root.
|
|
191
|
+
to: output.replace(/^\//, ''),
|
|
192
|
+
from: glob,
|
|
193
|
+
noErrorOnMissing: true,
|
|
194
|
+
force: true,
|
|
195
|
+
globOptions: {
|
|
196
|
+
dot: true,
|
|
197
|
+
followSymbolicLinks: !!asset.followSymlinks,
|
|
198
|
+
ignore: [
|
|
199
|
+
'.gitkeep',
|
|
200
|
+
'**/.DS_Store',
|
|
201
|
+
'**/Thumbs.db',
|
|
202
|
+
// Negate patterns needs to be absolute because copy-webpack-plugin uses absolute globs which
|
|
203
|
+
// causes negate patterns not to match.
|
|
204
|
+
// See: https://github.com/webpack-contrib/copy-webpack-plugin/issues/498#issuecomment-639327909
|
|
205
|
+
...ignore,
|
|
206
|
+
].map((i) => path.posix.join(input, i)),
|
|
207
|
+
},
|
|
208
|
+
priority: index,
|
|
209
|
+
};
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
exports.assetPatterns = assetPatterns;
|
|
213
|
+
function externalizePackages(context, request, callback) {
|
|
214
|
+
if (!request) {
|
|
215
|
+
return;
|
|
216
|
+
}
|
|
217
|
+
// Absolute & Relative paths are not externals
|
|
218
|
+
if (request.startsWith('.') || path.isAbsolute(request)) {
|
|
219
|
+
callback();
|
|
220
|
+
return;
|
|
221
|
+
}
|
|
222
|
+
try {
|
|
223
|
+
require.resolve(request, { paths: [context] });
|
|
224
|
+
callback(undefined, request);
|
|
225
|
+
}
|
|
226
|
+
catch {
|
|
227
|
+
// Node couldn't find it, so it must be user-aliased
|
|
228
|
+
callback();
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
exports.externalizePackages = externalizePackages;
|
|
232
|
+
function getStatsOptions(verbose = false) {
|
|
233
|
+
const webpackOutputOptions = {
|
|
234
|
+
all: false,
|
|
235
|
+
colors: true,
|
|
236
|
+
hash: true,
|
|
237
|
+
timings: true,
|
|
238
|
+
chunks: true,
|
|
239
|
+
builtAt: true,
|
|
240
|
+
warnings: true,
|
|
241
|
+
errors: true,
|
|
242
|
+
assets: true,
|
|
243
|
+
cachedAssets: true,
|
|
244
|
+
// Needed for markAsyncChunksNonInitial.
|
|
245
|
+
ids: true,
|
|
246
|
+
entrypoints: true,
|
|
247
|
+
};
|
|
248
|
+
const verboseWebpackOutputOptions = {
|
|
249
|
+
// The verbose output will most likely be piped to a file, so colors just mess it up.
|
|
250
|
+
colors: false,
|
|
251
|
+
usedExports: true,
|
|
252
|
+
optimizationBailout: true,
|
|
253
|
+
reasons: true,
|
|
254
|
+
children: true,
|
|
255
|
+
assets: true,
|
|
256
|
+
version: true,
|
|
257
|
+
chunkModules: true,
|
|
258
|
+
errorDetails: true,
|
|
259
|
+
moduleTrace: true,
|
|
260
|
+
logging: 'verbose',
|
|
261
|
+
modulesSpace: Infinity,
|
|
262
|
+
};
|
|
263
|
+
return verbose
|
|
264
|
+
? { ...webpackOutputOptions, ...verboseWebpackOutputOptions }
|
|
265
|
+
: webpackOutputOptions;
|
|
266
|
+
}
|
|
267
|
+
exports.getStatsOptions = getStatsOptions;
|
|
@@ -9,14 +9,21 @@ import { WebpackLoggingCallback } from '@angular-devkit/build-webpack';
|
|
|
9
9
|
import { logging } from '@angular-devkit/core';
|
|
10
10
|
import { Configuration, StatsCompilation } from 'webpack';
|
|
11
11
|
import { Schema as BrowserBuilderOptions } from '../../builders/browser/schema';
|
|
12
|
+
import { BudgetCalculatorResult } from '../../utils/bundle-calculator';
|
|
12
13
|
export declare function formatSize(size: number): string;
|
|
13
|
-
export declare type BundleStatsData = [
|
|
14
|
+
export declare type BundleStatsData = [
|
|
15
|
+
files: string,
|
|
16
|
+
names: string,
|
|
17
|
+
rawSize: number | string,
|
|
18
|
+
estimatedTransferSize: number | string
|
|
19
|
+
];
|
|
14
20
|
export interface BundleStats {
|
|
15
21
|
initial: boolean;
|
|
16
22
|
stats: BundleStatsData;
|
|
17
23
|
}
|
|
18
24
|
export declare function generateBundleStats(info: {
|
|
19
|
-
|
|
25
|
+
rawSize?: number;
|
|
26
|
+
estimatedTransferSize?: number;
|
|
20
27
|
files?: string[];
|
|
21
28
|
names?: string[];
|
|
22
29
|
initial?: boolean;
|
|
@@ -27,4 +34,4 @@ export declare function statsErrorsToString(json: StatsCompilation, statsConfig:
|
|
|
27
34
|
export declare function statsHasErrors(json: StatsCompilation): boolean;
|
|
28
35
|
export declare function statsHasWarnings(json: StatsCompilation): boolean;
|
|
29
36
|
export declare function createWebpackLoggingCallback(options: BrowserBuilderOptions, logger: logging.LoggerApi): WebpackLoggingCallback;
|
|
30
|
-
export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration,
|
|
37
|
+
export declare function webpackStatsLogger(logger: logging.LoggerApi, json: StatsCompilation, config: Configuration, budgetFailures?: BudgetCalculatorResult[]): void;
|
|
@@ -34,7 +34,6 @@ const core_1 = require("@angular-devkit/core");
|
|
|
34
34
|
const path = __importStar(require("path"));
|
|
35
35
|
const text_table_1 = __importDefault(require("text-table"));
|
|
36
36
|
const color_1 = require("../../utils/color");
|
|
37
|
-
const stats_1 = require("../configs/stats");
|
|
38
37
|
const async_chunks_1 = require("./async-chunks");
|
|
39
38
|
const helpers_1 = require("./helpers");
|
|
40
39
|
function formatSize(size) {
|
|
@@ -51,35 +50,81 @@ function formatSize(size) {
|
|
|
51
50
|
exports.formatSize = formatSize;
|
|
52
51
|
function generateBundleStats(info) {
|
|
53
52
|
var _a, _b, _c;
|
|
54
|
-
const
|
|
53
|
+
const rawSize = typeof info.rawSize === 'number' ? info.rawSize : '-';
|
|
54
|
+
const estimatedTransferSize = typeof info.estimatedTransferSize === 'number' ? info.estimatedTransferSize : '-';
|
|
55
55
|
const files = (_b = (_a = info.files) === null || _a === void 0 ? void 0 : _a.filter((f) => !f.endsWith('.map')).map((f) => path.basename(f)).join(', ')) !== null && _b !== void 0 ? _b : '';
|
|
56
56
|
const names = ((_c = info.names) === null || _c === void 0 ? void 0 : _c.length) ? info.names.join(', ') : '-';
|
|
57
57
|
const initial = !!info.initial;
|
|
58
58
|
return {
|
|
59
59
|
initial,
|
|
60
|
-
stats: [files, names,
|
|
60
|
+
stats: [files, names, rawSize, estimatedTransferSize],
|
|
61
61
|
};
|
|
62
62
|
}
|
|
63
63
|
exports.generateBundleStats = generateBundleStats;
|
|
64
|
-
function generateBuildStatsTable(data, colors, showTotalSize) {
|
|
64
|
+
function generateBuildStatsTable(data, colors, showTotalSize, showEstimatedTransferSize, budgetFailures) {
|
|
65
65
|
const g = (x) => (colors ? color_1.colors.greenBright(x) : x);
|
|
66
66
|
const c = (x) => (colors ? color_1.colors.cyanBright(x) : x);
|
|
67
|
+
const r = (x) => (colors ? color_1.colors.redBright(x) : x);
|
|
68
|
+
const y = (x) => (colors ? color_1.colors.yellowBright(x) : x);
|
|
67
69
|
const bold = (x) => (colors ? color_1.colors.bold(x) : x);
|
|
68
70
|
const dim = (x) => (colors ? color_1.colors.dim(x) : x);
|
|
71
|
+
const getSizeColor = (name, file, defaultColor = c) => {
|
|
72
|
+
const severity = budgets.get(name) || (file && budgets.get(file));
|
|
73
|
+
switch (severity) {
|
|
74
|
+
case 'warning':
|
|
75
|
+
return y;
|
|
76
|
+
case 'error':
|
|
77
|
+
return r;
|
|
78
|
+
default:
|
|
79
|
+
return defaultColor;
|
|
80
|
+
}
|
|
81
|
+
};
|
|
69
82
|
const changedEntryChunksStats = [];
|
|
70
83
|
const changedLazyChunksStats = [];
|
|
71
|
-
let
|
|
84
|
+
let initialTotalRawSize = 0;
|
|
85
|
+
let initialTotalEstimatedTransferSize;
|
|
86
|
+
const budgets = new Map();
|
|
87
|
+
if (budgetFailures) {
|
|
88
|
+
for (const { label, severity } of budgetFailures) {
|
|
89
|
+
// In some cases a file can have multiple budget failures.
|
|
90
|
+
// Favor error.
|
|
91
|
+
if (label && (!budgets.has(label) || budgets.get(label) === 'warning')) {
|
|
92
|
+
budgets.set(label, severity);
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
72
96
|
for (const { initial, stats } of data) {
|
|
73
|
-
const [files, names,
|
|
74
|
-
const
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
97
|
+
const [files, names, rawSize, estimatedTransferSize] = stats;
|
|
98
|
+
const getRawSizeColor = getSizeColor(names, files);
|
|
99
|
+
let data;
|
|
100
|
+
if (showEstimatedTransferSize) {
|
|
101
|
+
data = [
|
|
102
|
+
g(files),
|
|
103
|
+
names,
|
|
104
|
+
getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
|
|
105
|
+
c(typeof estimatedTransferSize === 'number'
|
|
106
|
+
? formatSize(estimatedTransferSize)
|
|
107
|
+
: estimatedTransferSize),
|
|
108
|
+
];
|
|
109
|
+
}
|
|
110
|
+
else {
|
|
111
|
+
data = [
|
|
112
|
+
g(files),
|
|
113
|
+
names,
|
|
114
|
+
getRawSizeColor(typeof rawSize === 'number' ? formatSize(rawSize) : rawSize),
|
|
115
|
+
'',
|
|
116
|
+
];
|
|
117
|
+
}
|
|
79
118
|
if (initial) {
|
|
80
119
|
changedEntryChunksStats.push(data);
|
|
81
|
-
if (typeof
|
|
82
|
-
|
|
120
|
+
if (typeof rawSize === 'number') {
|
|
121
|
+
initialTotalRawSize += rawSize;
|
|
122
|
+
}
|
|
123
|
+
if (showEstimatedTransferSize && typeof estimatedTransferSize === 'number') {
|
|
124
|
+
if (initialTotalEstimatedTransferSize === undefined) {
|
|
125
|
+
initialTotalEstimatedTransferSize = 0;
|
|
126
|
+
}
|
|
127
|
+
initialTotalEstimatedTransferSize += estimatedTransferSize;
|
|
83
128
|
}
|
|
84
129
|
}
|
|
85
130
|
else {
|
|
@@ -87,12 +132,29 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
|
|
|
87
132
|
}
|
|
88
133
|
}
|
|
89
134
|
const bundleInfo = [];
|
|
135
|
+
const baseTitles = ['Names', 'Raw Size'];
|
|
136
|
+
const tableAlign = ['l', 'l', 'r'];
|
|
137
|
+
if (showEstimatedTransferSize) {
|
|
138
|
+
baseTitles.push('Estimated Transfer Size');
|
|
139
|
+
tableAlign.push('r');
|
|
140
|
+
}
|
|
90
141
|
// Entry chunks
|
|
91
142
|
if (changedEntryChunksStats.length) {
|
|
92
|
-
bundleInfo.push(['Initial Chunk Files',
|
|
143
|
+
bundleInfo.push(['Initial Chunk Files', ...baseTitles].map(bold), ...changedEntryChunksStats);
|
|
93
144
|
if (showTotalSize) {
|
|
94
145
|
bundleInfo.push([]);
|
|
95
|
-
|
|
146
|
+
const initialSizeTotalColor = getSizeColor('bundle initial', undefined, (x) => x);
|
|
147
|
+
const totalSizeElements = [
|
|
148
|
+
' ',
|
|
149
|
+
'Initial Total',
|
|
150
|
+
initialSizeTotalColor(formatSize(initialTotalRawSize)),
|
|
151
|
+
];
|
|
152
|
+
if (showEstimatedTransferSize) {
|
|
153
|
+
totalSizeElements.push(typeof initialTotalEstimatedTransferSize === 'number'
|
|
154
|
+
? formatSize(initialTotalEstimatedTransferSize)
|
|
155
|
+
: '-');
|
|
156
|
+
}
|
|
157
|
+
bundleInfo.push(totalSizeElements.map(bold));
|
|
96
158
|
}
|
|
97
159
|
}
|
|
98
160
|
// Seperator
|
|
@@ -101,12 +163,12 @@ function generateBuildStatsTable(data, colors, showTotalSize) {
|
|
|
101
163
|
}
|
|
102
164
|
// Lazy chunks
|
|
103
165
|
if (changedLazyChunksStats.length) {
|
|
104
|
-
bundleInfo.push(['Lazy Chunk Files',
|
|
166
|
+
bundleInfo.push(['Lazy Chunk Files', ...baseTitles].map(bold), ...changedLazyChunksStats);
|
|
105
167
|
}
|
|
106
168
|
return (0, text_table_1.default)(bundleInfo, {
|
|
107
169
|
hsep: dim(' | '),
|
|
108
170
|
stringLength: (s) => (0, color_1.removeColor)(s).length,
|
|
109
|
-
align:
|
|
171
|
+
align: tableAlign,
|
|
110
172
|
});
|
|
111
173
|
}
|
|
112
174
|
function generateBuildStats(hash, time, colors) {
|
|
@@ -119,30 +181,45 @@ function generateBuildStats(hash, time, colors) {
|
|
|
119
181
|
const runsCache = new Set();
|
|
120
182
|
function statsToString(json,
|
|
121
183
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
122
|
-
statsConfig,
|
|
184
|
+
statsConfig, budgetFailures) {
|
|
123
185
|
var _a, _b;
|
|
124
186
|
if (!((_a = json.chunks) === null || _a === void 0 ? void 0 : _a.length)) {
|
|
125
187
|
return '';
|
|
126
188
|
}
|
|
127
189
|
const colors = statsConfig.colors;
|
|
128
190
|
const rs = (x) => (colors ? color_1.colors.reset(x) : x);
|
|
129
|
-
const changedChunksStats =
|
|
191
|
+
const changedChunksStats = [];
|
|
130
192
|
let unchangedChunkNumber = 0;
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
193
|
+
let hasEstimatedTransferSizes = false;
|
|
194
|
+
const isFirstRun = !runsCache.has(json.outputPath || '');
|
|
195
|
+
for (const chunk of json.chunks) {
|
|
196
|
+
// During first build we want to display unchanged chunks
|
|
197
|
+
// but unchanged cached chunks are always marked as not rendered.
|
|
198
|
+
if (!isFirstRun && !chunk.rendered) {
|
|
199
|
+
continue;
|
|
200
|
+
}
|
|
201
|
+
const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
|
|
202
|
+
let rawSize = 0;
|
|
203
|
+
let estimatedTransferSize;
|
|
204
|
+
if (assets) {
|
|
205
|
+
for (const asset of assets) {
|
|
206
|
+
if (asset.name.endsWith('.map')) {
|
|
207
|
+
continue;
|
|
208
|
+
}
|
|
209
|
+
rawSize += asset.size;
|
|
210
|
+
if (typeof asset.info.estimatedTransferSize === 'number') {
|
|
211
|
+
if (estimatedTransferSize === undefined) {
|
|
212
|
+
estimatedTransferSize = 0;
|
|
213
|
+
hasEstimatedTransferSizes = true;
|
|
214
|
+
}
|
|
215
|
+
estimatedTransferSize += asset.info.estimatedTransferSize;
|
|
216
|
+
}
|
|
138
217
|
}
|
|
139
|
-
const assets = (_b = json.assets) === null || _b === void 0 ? void 0 : _b.filter((asset) => { var _a; return (_a = chunk.files) === null || _a === void 0 ? void 0 : _a.includes(asset.name); });
|
|
140
|
-
const summedSize = assets === null || assets === void 0 ? void 0 : assets.filter((asset) => !asset.name.endsWith('.map')).reduce((total, asset) => total + asset.size, 0);
|
|
141
|
-
changedChunksStats.push(generateBundleStats({ ...chunk, size: summedSize }));
|
|
142
218
|
}
|
|
143
|
-
|
|
144
|
-
runsCache.add(json.outputPath || '');
|
|
219
|
+
changedChunksStats.push(generateBundleStats({ ...chunk, rawSize, estimatedTransferSize }));
|
|
145
220
|
}
|
|
221
|
+
unchangedChunkNumber = json.chunks.length - changedChunksStats.length;
|
|
222
|
+
runsCache.add(json.outputPath || '');
|
|
146
223
|
// Sort chunks by size in descending order
|
|
147
224
|
changedChunksStats.sort((a, b) => {
|
|
148
225
|
if (a.stats[2] > b.stats[2]) {
|
|
@@ -153,7 +230,7 @@ statsConfig, bundleState) {
|
|
|
153
230
|
}
|
|
154
231
|
return 0;
|
|
155
232
|
});
|
|
156
|
-
const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0);
|
|
233
|
+
const statsTable = generateBuildStatsTable(changedChunksStats, colors, unchangedChunkNumber === 0, hasEstimatedTransferSizes, budgetFailures);
|
|
157
234
|
// In some cases we do things outside of webpack context
|
|
158
235
|
// Such us index generation, service worker augmentation etc...
|
|
159
236
|
// This will correct the time and include these.
|
|
@@ -266,7 +343,7 @@ function createWebpackLoggingCallback(options, logger) {
|
|
|
266
343
|
if (verbose) {
|
|
267
344
|
logger.info(stats.toString(config.stats));
|
|
268
345
|
}
|
|
269
|
-
const rawStats = stats.toJson((0,
|
|
346
|
+
const rawStats = stats.toJson((0, helpers_1.getStatsOptions)(false));
|
|
270
347
|
const webpackStats = {
|
|
271
348
|
...rawStats,
|
|
272
349
|
chunks: (0, async_chunks_1.markAsyncChunksNonInitial)(rawStats, extraEntryPoints),
|
|
@@ -275,8 +352,8 @@ function createWebpackLoggingCallback(options, logger) {
|
|
|
275
352
|
};
|
|
276
353
|
}
|
|
277
354
|
exports.createWebpackLoggingCallback = createWebpackLoggingCallback;
|
|
278
|
-
function webpackStatsLogger(logger, json, config,
|
|
279
|
-
logger.info(statsToString(json, config.stats,
|
|
355
|
+
function webpackStatsLogger(logger, json, config, budgetFailures) {
|
|
356
|
+
logger.info(statsToString(json, config.stats, budgetFailures));
|
|
280
357
|
if (statsHasWarnings(json)) {
|
|
281
358
|
logger.warn(statsWarningsToString(json, config.stats));
|
|
282
359
|
}
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright Google LLC All Rights Reserved.
|
|
4
|
-
*
|
|
5
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
6
|
-
* found in the LICENSE file at https://angular.io/license
|
|
7
|
-
*/
|
|
8
|
-
export declare class BuildBrowserFeatures {
|
|
9
|
-
private projectRoot;
|
|
10
|
-
readonly supportedBrowsers: string[];
|
|
11
|
-
constructor(projectRoot: string);
|
|
12
|
-
/**
|
|
13
|
-
* True, when a browser feature is supported partially or fully.
|
|
14
|
-
*/
|
|
15
|
-
isFeatureSupported(featureId: string): boolean;
|
|
16
|
-
}
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @license
|
|
4
|
-
* Copyright Google LLC All Rights Reserved.
|
|
5
|
-
*
|
|
6
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
7
|
-
* found in the LICENSE file at https://angular.io/license
|
|
8
|
-
*/
|
|
9
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
10
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
exports.BuildBrowserFeatures = void 0;
|
|
14
|
-
const browserslist_1 = __importDefault(require("browserslist"));
|
|
15
|
-
const caniuse_lite_1 = require("caniuse-lite");
|
|
16
|
-
class BuildBrowserFeatures {
|
|
17
|
-
constructor(projectRoot) {
|
|
18
|
-
// By default, browserslist defaults are too inclusive
|
|
19
|
-
// https://github.com/browserslist/browserslist/blob/83764ea81ffaa39111c204b02c371afa44a4ff07/index.js#L516-L522
|
|
20
|
-
this.projectRoot = projectRoot;
|
|
21
|
-
// We change the default query to browsers that Angular support.
|
|
22
|
-
// https://angular.io/guide/browser-support
|
|
23
|
-
browserslist_1.default.defaults = [
|
|
24
|
-
'last 1 Chrome version',
|
|
25
|
-
'last 1 Firefox version',
|
|
26
|
-
'last 2 Edge major versions',
|
|
27
|
-
'last 2 Safari major versions',
|
|
28
|
-
'last 2 iOS major versions',
|
|
29
|
-
'Firefox ESR',
|
|
30
|
-
];
|
|
31
|
-
this.supportedBrowsers = (0, browserslist_1.default)(undefined, { path: this.projectRoot });
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* True, when a browser feature is supported partially or fully.
|
|
35
|
-
*/
|
|
36
|
-
isFeatureSupported(featureId) {
|
|
37
|
-
// y: feature is fully available
|
|
38
|
-
// n: feature is unavailable
|
|
39
|
-
// a: feature is partially supported
|
|
40
|
-
// x: feature is prefixed
|
|
41
|
-
const criteria = ['y', 'a'];
|
|
42
|
-
const data = (0, caniuse_lite_1.feature)(caniuse_lite_1.features[featureId]);
|
|
43
|
-
return !this.supportedBrowsers.some((browser) => {
|
|
44
|
-
const [agentId, version] = browser.split(' ');
|
|
45
|
-
const browserData = data.stats[agentId];
|
|
46
|
-
const featureStatus = (browserData && browserData[version]);
|
|
47
|
-
// We are only interested in the first character
|
|
48
|
-
// Ex: when 'a #4 #5', we only need to check for 'a'
|
|
49
|
-
// as for such cases we should polyfill these features as needed
|
|
50
|
-
return !featureStatus || !criteria.includes(featureStatus.charAt(0));
|
|
51
|
-
});
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
exports.BuildBrowserFeatures = BuildBrowserFeatures;
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
/**
|
|
3
|
-
* @license
|
|
4
|
-
* Copyright Google LLC All Rights Reserved.
|
|
5
|
-
*
|
|
6
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
7
|
-
* found in the LICENSE file at https://angular.io/license
|
|
8
|
-
*/
|
|
9
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.getBrowserConfig = void 0;
|
|
11
|
-
const webpack_subresource_integrity_1 = require("webpack-subresource-integrity");
|
|
12
|
-
const plugins_1 = require("../plugins");
|
|
13
|
-
const helpers_1 = require("../utils/helpers");
|
|
14
|
-
function getBrowserConfig(wco) {
|
|
15
|
-
const { buildOptions } = wco;
|
|
16
|
-
const { crossOrigin = 'none', subresourceIntegrity, vendorChunk, commonChunk, allowedCommonJsDependencies, } = buildOptions;
|
|
17
|
-
const extraPlugins = [];
|
|
18
|
-
const { styles: stylesSourceMap, scripts: scriptsSourceMap, hidden: hiddenSourceMap, } = buildOptions.sourceMap;
|
|
19
|
-
if (subresourceIntegrity) {
|
|
20
|
-
extraPlugins.push(new webpack_subresource_integrity_1.SubresourceIntegrityPlugin({
|
|
21
|
-
hashFuncNames: ['sha384'],
|
|
22
|
-
}));
|
|
23
|
-
}
|
|
24
|
-
if (scriptsSourceMap || stylesSourceMap) {
|
|
25
|
-
extraPlugins.push((0, helpers_1.getSourceMapDevTool)(scriptsSourceMap, stylesSourceMap, hiddenSourceMap, false));
|
|
26
|
-
}
|
|
27
|
-
let crossOriginLoading = false;
|
|
28
|
-
if (subresourceIntegrity && crossOrigin === 'none') {
|
|
29
|
-
crossOriginLoading = 'anonymous';
|
|
30
|
-
}
|
|
31
|
-
else if (crossOrigin !== 'none') {
|
|
32
|
-
crossOriginLoading = crossOrigin;
|
|
33
|
-
}
|
|
34
|
-
return {
|
|
35
|
-
devtool: false,
|
|
36
|
-
resolve: {
|
|
37
|
-
mainFields: ['es2020', 'es2015', 'browser', 'module', 'main'],
|
|
38
|
-
conditionNames: ['es2020', 'es2015', '...'],
|
|
39
|
-
},
|
|
40
|
-
output: {
|
|
41
|
-
crossOriginLoading,
|
|
42
|
-
trustedTypes: 'angular#bundler',
|
|
43
|
-
scriptType: 'module',
|
|
44
|
-
},
|
|
45
|
-
optimization: {
|
|
46
|
-
runtimeChunk: 'single',
|
|
47
|
-
splitChunks: {
|
|
48
|
-
maxAsyncRequests: Infinity,
|
|
49
|
-
cacheGroups: {
|
|
50
|
-
default: !!commonChunk && {
|
|
51
|
-
chunks: 'async',
|
|
52
|
-
minChunks: 2,
|
|
53
|
-
priority: 10,
|
|
54
|
-
},
|
|
55
|
-
common: !!commonChunk && {
|
|
56
|
-
name: 'common',
|
|
57
|
-
chunks: 'async',
|
|
58
|
-
minChunks: 2,
|
|
59
|
-
enforce: true,
|
|
60
|
-
priority: 5,
|
|
61
|
-
},
|
|
62
|
-
vendors: false,
|
|
63
|
-
defaultVendors: !!vendorChunk && {
|
|
64
|
-
name: 'vendor',
|
|
65
|
-
chunks: (chunk) => chunk.name === 'main',
|
|
66
|
-
enforce: true,
|
|
67
|
-
test: /[\\/]node_modules[\\/]/,
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
plugins: [
|
|
73
|
-
new plugins_1.CommonJsUsageWarnPlugin({
|
|
74
|
-
allowedDependencies: allowedCommonJsDependencies,
|
|
75
|
-
}),
|
|
76
|
-
...extraPlugins,
|
|
77
|
-
],
|
|
78
|
-
node: false,
|
|
79
|
-
};
|
|
80
|
-
}
|
|
81
|
-
exports.getBrowserConfig = getBrowserConfig;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
* Copyright Google LLC All Rights Reserved.
|
|
4
|
-
*
|
|
5
|
-
* Use of this source code is governed by an MIT-style license that can be
|
|
6
|
-
* found in the LICENSE file at https://angular.io/license
|
|
7
|
-
*/
|
|
8
|
-
import { Configuration } from 'webpack';
|
|
9
|
-
import { WebpackConfigOptions } from '../../utils/build-options';
|
|
10
|
-
/**
|
|
11
|
-
* Returns a partial Webpack configuration specific to creating a bundle for node
|
|
12
|
-
* @param wco Options which include the build options and app config
|
|
13
|
-
*/
|
|
14
|
-
export declare function getServerConfig(wco: WebpackConfigOptions): Configuration;
|