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);
},
});