Skip to content

Commit

Permalink
refactor(@angular-devkit/build-angular): remove custom Webpack Stats …
Browse files Browse the repository at this point in the history 
…types

Webpack 5 contains improved types that we can leverage.

(cherry picked from commit cb9e51f)
  • Loading branch information
@alan-agius4 @filipesilva
alan-agius4 authored and filipesilva committed Apr 20, 2021
1 parent b7fc023 commit bf0b3d5
Show file tree
Hide file tree
Showing 9 changed files with 110 additions and 154 deletions.
14 changes: 6 additions & 8 deletions packages/angular_devkit/build_angular/src/browser/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,6 @@ import { normalizeExtraEntryPoints } from '../webpack/utils/helpers';
import {
BundleStats,
ChunkType,
JsonChunkStats,
JsonCompilationStats,
generateBundleStats,
statsErrorsToString,
statsHasErrors,
Expand Down Expand Up @@ -260,7 +258,7 @@ export function buildWebpackBrowser(
emittedFiles = [],
outputPath: webpackOutputPath,
} = buildEvent;
const webpackRawStats = buildEvent.webpackStats as JsonCompilationStats;
const webpackRawStats = buildEvent.webpackStats;
if (!webpackRawStats) {
throw new Error('Webpack stats build result is required.');
}
Expand Down Expand Up @@ -568,7 +566,7 @@ export function buildWebpackBrowser(
executor.stop();
}
for (const result of processResults) {
const chunk = webpackStats.chunks?.find((chunk) => chunk.id.toString() === result.name);
const chunk = webpackStats.chunks?.find((chunk) => chunk.id?.toString() === result.name);

if (result.original) {
bundleInfoStats.push(generateBundleInfoStats(result.original, chunk, 'modern'));
Expand All @@ -580,10 +578,10 @@ export function buildWebpackBrowser(
}

const unprocessedChunks = webpackStats.chunks?.filter((chunk) => !processResults
.find((result) => chunk.id.toString() === result.name),
.find((result) => chunk.id?.toString() === result.name),
) || [];
for (const chunk of unprocessedChunks) {
const asset = webpackStats.assets?.find(a => a.name === chunk.files[0]);
const asset = webpackStats.assets?.find(a => a.name === chunk.files?.[0]);
bundleInfoStats.push(generateBundleStats({ ...chunk, size: asset?.size }));
}
} else {
Expand Down Expand Up @@ -771,15 +769,15 @@ function assertNever(input: never): never {

function generateBundleInfoStats(
bundle: ProcessBundleFile,
chunk: JsonChunkStats | undefined,
chunk: webpack.StatsChunk | undefined,
chunkType: ChunkType,
): BundleStats {
return generateBundleStats(
{
size: bundle.size,
files: bundle.map ? [bundle.filename, bundle.map.filename] : [bundle.filename],
names: chunk?.names,
entry: !!chunk?.names.includes('runtime'),
entry: !!chunk?.names?.includes('runtime'),
initial: !!chunk?.initial,
rendered: true,
chunkType,
Expand Down
4 changes: 2 additions & 2 deletions packages/angular_devkit/build_angular/src/server/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ import {
getStylesConfig,
getTypeScriptConfig,
} from '../webpack/configs';
import { JsonCompilationStats, webpackStatsLogger } from '../webpack/utils/stats';
import { webpackStatsLogger } from '../webpack/utils/stats';
import { Schema as ServerBuilderOptions } from './schema';

/**
Expand Down Expand Up @@ -119,7 +119,7 @@ export function execute(
);
}

webpackStatsLogger(context.logger, webpackStats as JsonCompilationStats, config);
webpackStatsLogger(context.logger, webpackStats, config);

return { ...output, success };
}),
Expand Down
38 changes: 19 additions & 19 deletions packages/angular_devkit/build_angular/src/utils/bundle-calculator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,10 @@
* found in the LICENSE file at https://angular.io/license
*/
import { basename } from 'path';
import { StatsAsset, StatsChunk, StatsCompilation } from 'webpack';
import { Budget, Type } from '../browser/schema';
import { ProcessBundleFile, ProcessBundleResult } from '../utils/process-bundle';
import {
JsonAssetStats,
JsonChunkStats,
JsonCompilationStats,
formatSize,
} from '../webpack/utils/stats';
import { formatSize } from '../webpack/utils/stats';

interface Size {
size: number;
Expand Down Expand Up @@ -108,7 +104,7 @@ export function* calculateThresholds(budget: Budget): IterableIterator<Threshold
*/
function calculateSizes(
budget: Budget,
stats: JsonCompilationStats,
stats: StatsCompilation,
processResults: ProcessBundleResult[],
): Size[] {
if (budget.type === Type.AnyComponentStyle) {
Expand All @@ -121,8 +117,8 @@ function calculateSizes(
type CalculatorTypes = {
new (
budget: Budget,
chunks: JsonChunkStats[],
assets: JsonAssetStats[],
chunks: StatsChunk[],
assets: StatsAsset[],
processResults: ProcessBundleResult[],
): Calculator;
};
Expand Down Expand Up @@ -152,21 +148,21 @@ function calculateSizes(
abstract class Calculator {
constructor (
protected budget: Budget,
protected chunks: JsonChunkStats[],
protected assets: JsonAssetStats[],
protected chunks: StatsChunk[],
protected assets: StatsAsset[],
protected processResults: ProcessBundleResult[],
) {}

abstract calculate(): Size[];

/** Calculates the size of the given chunk for the provided build type. */
protected calculateChunkSize(
chunk: JsonChunkStats,
chunk: StatsChunk,
buildType: DifferentialBuildType,
): number {
// Look for a process result containing different builds for this chunk.
const processResult = this.processResults
.find((processResult) => processResult.name === chunk.id.toString());
.find((processResult) => processResult.name === chunk.id?.toString());

if (processResult) {
// Found a differential build, use the correct size information.
Expand All @@ -176,8 +172,11 @@ abstract class Calculator {
return processResultFile && processResultFile.size || 0;
} else {
// No differential builds, get the chunk size by summing its assets.
return chunk.files
.filter(file => !file.endsWith('.map'))
if (!chunk.files) {
return 0;
}

return chunk.files.filter(file => !file.endsWith('.map'))
.map(file => {
const asset = this.assets.find((asset) => asset.name === file);
if (!asset) {
Expand All @@ -190,7 +189,7 @@ abstract class Calculator {
}
}

protected getAssetSize(asset: JsonAssetStats): number {
protected getAssetSize(asset: StatsAsset): number {
if (asset.name.endsWith('.js')) {
const processResult = this.processResults
.find((processResult) => processResult.original && basename(processResult.original.filename) === asset.name);
Expand Down Expand Up @@ -219,8 +218,9 @@ class BundleCalculator extends Calculator {
// each then check afterwards if they are all the same.
const buildSizes = Object.values(DifferentialBuildType).map((buildType) => {
const size = this.chunks
.filter(chunk => chunk.names.includes(budgetName))
.map(chunk => this.calculateChunkSize(chunk, buildType))
.filter(chunk => chunk?.names?.includes(budgetName))
// tslint:disable-next-line: no-non-null-assertion
.map(chunk => this.calculateChunkSize(chunk!, buildType))
.reduce((l, r) => l + r, 0);

return { size, label: `bundle ${this.budget.name}-${buildTypeLabels[buildType]}` };
Expand Down Expand Up @@ -358,7 +358,7 @@ function calculateBytes(

export function* checkBudgets(
budgets: Budget[],
webpackStats: JsonCompilationStats,
webpackStats: StatsCompilation,
processResults: ProcessBundleResult[],
): IterableIterator<{ severity: ThresholdSeverity, message: string }> {
// Ignore AnyComponentStyle budgets as these are handled in `AnyComponentStyleBudgetChecker`.
Expand Down
36 changes: 19 additions & 17 deletions packages/angular_devkit/build_angular/src/utils/bundle-calculator_spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import { StatsCompilation } from 'webpack';
import { Budget, Type } from '../browser/schema';
import { ThresholdSeverity, checkBudgets } from './bundle-calculator';
import { ProcessBundleResult } from './process-bundle';
Expand Down Expand Up @@ -32,7 +33,7 @@ describe('bundle-calculator', () => {
size: 0.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -60,7 +61,7 @@ describe('bundle-calculator', () => {
size: 0.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -95,7 +96,7 @@ describe('bundle-calculator', () => {
size: 0.75 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand All @@ -121,7 +122,8 @@ describe('bundle-calculator', () => {
},
],
assets: [],
};
} as unknown as StatsCompilation;

const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -164,7 +166,7 @@ describe('bundle-calculator', () => {
},
],
assets: [],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -211,7 +213,7 @@ describe('bundle-calculator', () => {
size: 0.75 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand All @@ -237,7 +239,7 @@ describe('bundle-calculator', () => {
},
],
assets: [],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -281,7 +283,7 @@ describe('bundle-calculator', () => {
},
],
assets: [],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -332,7 +334,7 @@ describe('bundle-calculator', () => {
size: 1.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -367,7 +369,7 @@ describe('bundle-calculator', () => {
size: 0.75 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -402,7 +404,7 @@ describe('bundle-calculator', () => {
size: 0.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -433,7 +435,7 @@ describe('bundle-calculator', () => {
size: 0.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -468,7 +470,7 @@ describe('bundle-calculator', () => {
size: 0.5 * KB,
},
],
};
} as unknown as StatsCompilation;

const failures = Array.from(checkBudgets(budgets, stats, [] /* processResults */));

Expand Down Expand Up @@ -499,7 +501,7 @@ describe('bundle-calculator', () => {
size: 1.25 * KB,
},
],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -542,7 +544,7 @@ describe('bundle-calculator', () => {
size: 1.25 * KB,
},
],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -585,7 +587,7 @@ describe('bundle-calculator', () => {
size: 1.25 * KB,
},
],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down Expand Up @@ -628,7 +630,7 @@ describe('bundle-calculator', () => {
size: 1.25 * KB,
},
],
};
} as unknown as StatsCompilation;
const processResults: ProcessBundleResult[] = [
{
name: '0',
Expand Down
2 changes: 0 additions & 2 deletions packages/angular_devkit/build_angular/src/utils/webpack-diagnostics.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,8 @@ import { Compilation, WebpackError } from 'webpack';

export function addWarning(compilation: Compilation, message: string): void {
compilation.warnings.push(new WebpackError(message));

}

export function addError(compilation: Compilation, message: string): void {
compilation.errors.push(new WebpackError(message));

}
Loading

0 comments on commit bf0b3d5

Please sign in to comment.