ember-asset-size-report

A utility for generating CSV files describing the assets in your ember-cli bundles

Usage

First, ensure you have broccoli-concat-analyser installed in your app

As a CLI tool

You should then be able to run

npx ember-asset-size-report

and after the command is done, you'll find a module-size-report.csv in your working directory

As a library

Check out our api documentation

import { generateReport } from "ember-asset-size-report";

async function main() {
  await generateReport(
    "path-to-my-ember-project-root", // optional
    "my-desired-report-output-path.csv" // optional
  );
}

Experimental Usage

Experimental use (read: no SemVer guarantees) of a lower level JavaScript API

If you're using typescript, you'll need to make the following adustment to your tsconfig.json in order to "detect" this new API surface

"paths": {
    "ember-asset-size-report": ["node_modules/ember-asset-size-report/dist/ember-asset-size-report-beta.d.ts"]
}

You should then be able to do something like

import {
  Spinner,
  EmberProject,
  ReportGenerator
} from "ember-asset-size-report";

// Create a progress spinner
const spinner = new Spinner();

// Create a "controller" for your ember-cli project
const project = new EmberProject("/Users/me/my-project-path", spinner);
// Create a report generator
const rptBuilder = new ReportGenerator(project, "/Users/me/my-report.csv");
// Create a prod build of the ember app, with concat stats output enabled
await project.build();

// analyze the stats data (and other things) to arrive at module/bundle sizes
await rptBuilder.analyze();

// add other files from the ./public folder to the csv data
await rptBuilder.addPublicFile(
  path.join(project.distPath, "assets", "i18n", "support_en_US.js")
);

// save the report. the .csv file should now appear
await rptBuilder.save();

CSV Format

The csv format is designed to be easy to parse with tools like Google Sheets. To allow for easy backwards compatibility in parsing logic, data output is versioned. Please consult the [#Schema]

Example output

schema-version, 3

type, dataset, bundleName, moduleName, size, minSize, gzipSize, brSize, bundleRatio, soloGzSize, soloBrSize

type, dataset, bundleName, size, minSize, gzipSize, brSize

module, experiment: drop ie11, ember-fetch.js, abortcontroller.js, 4977, 1913, 637, 567, 0.1927, 774, 655
module, experiment: drop ie11, ember-fetch.js, fetch.js, 14540, 8015, 2671, 2374, 0.8073, 2687, 2390
module, experiment: drop ie11, example-app.js, vendor/ember-cli/app-prefix.js, 16, 13, 3, 3, 0.0014, 33, 17
module, experiment: drop ie11, example-app.js, example-app/adapters/-json-api.js, 348, 247, 57, 50, 0.027, 185, 155

bundle, experiment: drop ie11, ember-fetch.js, 19519, 9928, 3308, 2941
bundle, experiment: drop ie11, example-app.js, 15996, 9164, 2127, 1862
bundle, experiment: drop ie11, ember-testing.js, 81182, 22122, 5569, 4962
bundle, experiment: drop ie11, ember.js, 1951427, 490714, 126574, 106521
bundle, experiment: drop ie11, vendor.js, 2855105, 731260, 183679, 152473

Extracting multiple tables from the CSV

Multiple tables (i.e., "modules" and "bundles" can be extracted from the single .csv file, using the conventions described above). Here is an example of Google Sheets being used to analyze CSV data pulled directly from this github repo

Schema

schema-version (1 row)

This numeric version allows us to introduce breaking changes to the output format, while preserving the ability to parse both old and new data

Version 3

There are several sections

module data headers (1 row)

a single row of headers corresponding to module data

bundle data headers (1 row)

a single row of headers corresponding to bundle data

module data (many rows)

these rows always begin with "module" in the first column

bundle data (many rows)

these rows always begin with "bundle" in the first column

Legal

© 2019 LinkedIn All Rights Reserved