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

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"));

Add Step in copy-assets

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

    executeTask(gulp, completeCallback) {

      global.spfxMetrics.doMetrics();

Add the bundleAnalyzer

in gulpfile.js

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