- 📚 Designed to be used in CI/CD pipelines
- 🎱 Designed to represent real-world scenarios
- 🧰 Supports single packages & monorepos
- 🍿 Supports various bundlers (Webpack, esbuild, implement your own? 🐱)
- ☁️ Supports various storage adapters
# yarn
yarn add --dev monosize
# npm
npm install --save-dev monosizeNote:
monosizerequires building packages first before doing any kind of measurements. Make sure to accommodate this in your pipeline
Fixtures declare exports that should be measured by the monosize tool. Fixtures are created inside each package.
For example:
import { Component } from '@library/component';
export { Component };
// 👆 "export" is required to be able to measure the size of the component
export default {
name: 'Component',
// 👆 defines a name for a fixture that will be used in output
};You need to create a monosize.config.mjs in the root of your project directory (next to package.json) to configure storage and bundler adapters.
my-proj/
├─ src/
├─ monosize.config.mjs
├─ node_modules/
├─ bundle-size/
│ ├─ Fixture.fixture.js
├─ package.json
A global configuration can also be used for monorepo scenarios:
my-proj-a/
├─ src/
├─ node_modules/
├─ bundle-size/
│ ├─ Fixture.fixture.js
├─ package.json
my-proj-b/
├─ src/
├─ node_modules/
├─ bundle-size/
│ ├─ Fixture.fixture.js
├─ package.json
monosize.config.mjs
// monosize.config.mjs
import storageAdapter from 'monosize-storage-*';
import webpackBundler from 'monosize-bundler-webpack';
/** @type {import('monosize').MonoSizeConfig} */
const config = {
repository: 'https://github.com/__ORG__/__REPOSITORY__',
storage: storageAdapter(),
bundler: webpackBundler(config => {
// customize config here
return config;
}),
// Optional `compare-reports`/`upload-reports` commands config overrides
reportResolvers: {
packageRoot: async reportFile => {
// provide custom logic on how to resolve package root
return '...';
},
packageName: async packageRoot => {
// provide custom logic on how to resolve packageName used within reports
return '...';
},
},
};
export default config;To build fixtures and produce artifacts you need to use a bundler adapter. Following adapters are available:
To store reference results and run comparisons you need to use a storage adapter. Following adapters are available:
monosize measure [--debug] [--artifacts-location] [--fixtures] [--quiet]Builds fixtures and produces artifacts. For each fixture:
[fixture].fixture.js- a modified fixture without a default export, used by a bundler[fixture].output.js- a fully minified file, used for measurements[fixture].debug.js- a partially minified file, useful for debugging (optional, if--debugis passed)
Produces a report file (dist/bundle-size/monosize.json) that is used by other steps.
artifacts-location- defines relative path from the package root where the artifact files will be stored (monosize.json& bundler output). If specified,--report-files-globinmonosize collect-reports&monosize upload-reportsshould be set accordingly.fixtures- optional argument to pass a fixture filename or globbing pattern. If not specified, all fixture files matching a*.fixture.jspattern will be measured.
monosize measure --fixtures ba* - matches any fixtures with filenames starting with ba
monosize measure --fixtures Fixture.fixture.js - matches a fixture with the exact filename
Compares local (requires call of monosize measure first) and remote results, provides output to CLI or to a Markdown file.
monosize compare-reports --branch=main --output=["cli"|"markdown"] [--deltaFormat=["delta"|"percent"]] [--report-files-glob] [--quiet]Tip
In order to resolve package name used within report, we look for package.json or project.json by default to identify project root and use #name property from obtained configuration.
If you have custom solution that needs changes please use monosize configuration API (MonoSizeConfig.reportResolvers).
branch- the branch to compare the results with, usuallymainoutput- defines the output formatter, eithercliormarkdowndeltaFormat- defines the format of the delta column, eitherdeltaorpercentreport-files-glob- defines a glob pattern to search for report files, defaults topackages/**/dist/bundle-size/monosize.json
Caution
Should be called only during CI builds.
Tip
Requires a configured storage adapter.
Tip
In order to resolve package name used within report, we look for package.json or project.json by default to identify project root and use #name property from obtained configuration.
If you have custom solution that needs changes please use monosize configuration API (MonoSizeConfig.reportResolvers).
monosize upload-report --branch=main --commit-sha=HASH [--report-files-glob] [--quiet]Aggregates local results to a single report and uploads data to Azure Table Storage.
branch- the branch to compare the results with, usuallymaincommit-sha- the commit SHA to associate the report withreport-files-glob- defines a glob pattern to search for report files, defaults topackages/**/dist/bundle-size/monosize.json
This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.