# @bpa-solutions/spfx-build-metrics

> Do some metrics for SPFx Build, and generate a report in user home directory

Latest version **1.0.2** (published 2021-05-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bpa-solutions/spfx-build-metrics
pnpm add @bpa-solutions/spfx-build-metrics
yarn add @bpa-solutions/spfx-build-metrics
bun add @bpa-solutions/spfx-build-metrics
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2021-05-26 |
| First published | 2021-05-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 36.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Léo Maradan |
| Maintainers | leomaradan |

## Links

- npm: https://www.npmjs.com/package/@bpa-solutions/spfx-build-metrics
- npm.io page: https://npm.io/package/@bpa-solutions/spfx-build-metrics

## Dependencies (9)

- [tty-table](https://npm.io/package/tty-table.md) ^4.1.3
- [prettysize](https://npm.io/package/prettysize.md) ^2.0.0
- [typescript](https://npm.io/package/typescript.md) 4.1.5
- [@types/node](https://npm.io/package/@types/node.md) ^15.3.1
- [pretty-time](https://npm.io/package/pretty-time.md) ^1.1.0
- [@types/webpack](https://npm.io/package/@types/webpack.md) ^5.28.0
- [@types/pretty-time](https://npm.io/package/@types/pretty-time.md) ^1.1.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.4.2
- [@types/webpack-bundle-analyzer](https://npm.io/package/@types/webpack-bundle-analyzer.md) ^4.4.0

## Recent versions

- 1.0.2 (latest) — 2021-05-26
- 1.0.1 — 2021-05-21
- 1.0.0 — 2021-05-21

## README

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

### 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

```javascript
    executeTask(gulp, completeCallback) {

      global.spfxMetrics.doMetrics();
```

### Add the bundleAnalyzer

in gulpfile.js

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

---
_Source: https://npm.io/package/@bpa-solutions/spfx-build-metrics · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._