SPFx Build Metrics

This tool help to identify some bottleneck in the SPFx Build, by logging the build time and memory usage for some steps:

- Booting (from the launching of the build task to the TypeScript parsing)
- TypeScript Parsing
- JS Bundling
- Solution Packaging

It also offer a method to add more metrics steps

How to use

in gulpfile.js

``javascript
const gulp = require("gulp");
let build = require("@microsoft/sp-build-web");
const Metrics = require("@bpa-solutions/spfx-build-metrics");

global.spfxMetrics.doMetrics = Metrics.doMetrics;

Metrics.start(
{
spfx: "1.11", // Current SPFx Version
bundler: "wp4", // The bundler used.
typescript: "3.9", // TypeScript version
monorepo: "lerna", // Tool used to manage the monorepo
structure: "partial-mono", // Project Structure
workflow: "ms-build", // Project Workflow
steps: [
"Project Booting",
"Building sources",
"Bundling",
"Package Solution",
],
writeReport: true,
displayReport: true,
},
build,
isDev, // Is the build in dev or in prod
path.resolve(__dirname, "dist") // Absolute path to dist folder
);

gulp.task("metrics-end", () => {
Metrics.end();
});

gulp.task("dist", gulpSequence("bundle", "package-solution", "metrics-end"));
`

$3

We need to modify the file node_modules/@microsoft/sp-build-core-tasks/lib/copyAssets/CopyAssetsTask.js, and add global.spfxMetrics.doMetrics(); on the executeTask function

`javascript
executeTask(gulp, completeCallback) {

global.spfxMetrics.doMetrics();
`

$3

in gulpfile.js

`javascript
build.configureWebpack.mergeConfig({
additionalConfiguration: (generatedConfiguration) => {
generatedConfiguration = Metrics.bundleAnalyzer(generatedConfiguration);
},
});
``