Webpack Size Insights

"Code Insights" is a powerful feature of Bitbucket Server 5.15+ allowing external tools to attach reports to commits. These reports are then presented in the Pull Request interface.

This tool calculates insights related to Webpack builds:

• total size of JavaScript, CSS and other medias,
• per-chunk size of JavaScript and CSS.

Note: there is no assumption on the CI environment; the git hash is resolved as git rev-parse HEAD.

Usage

• Install the npm module @massive/bitbucket-webpack-insights as dev dependency,
• Set static configuration in your package.json (see below),
• Set build-specific configuration in environment variables (see below),
• Execute bb-webpack-insights

Configuration

Webpack

Your Webpack build must produce a stats.json with at least the assets and namedChunkGroups sections:

// minimum required `stats.json` configuration
new StatsPlugin({
    fields: ['assets', 'namedChunkGroups']
})

Authentication

The tool needs READ access to the target Bitbucket repository. Access should be provided through environment variables:

• Either a Personal Access Token: BITBUCKET_TOKEN,
• or BITBUCKET_USER (email) and BITBUCKET_PSWD.

Options

Configuration can be set in package.json or/and environment variables (who take precedence).

In package.json, add a webpack_insights object:

{
    "name": "your-project",
    "dependencies": {...},
    "webpack_insights": {
        ...
    }
}

Note: when used in conjunction with bitbucket-changelog, configuration can be added to the changelog object instead.

Here are the options (package.json key name / environment variable name):

• bitbucket / WPINSIGHTS_BITBUCKET: base URL of your Bitbucket/Stash server,
• projectKey / WPINSIGHTS_PROJECT: Bitbucket project key,
• repositoryKey / WPINSIGHTS_REPOSITORY: Bitbucket repository key,
• reportKey / WPINSIGHTS_KEY: (default: webpack_insights) a key for the report (use to discriminate multiple builds of the same repo),
• title / WPINSIGHTS_TITLE: (default: Webpack Size) title of the report,
• stats / WPINSIGHTS_STATS: (default: ./stats.json) Webpack stats output,
• exclude / WPINSIGHTS_EXCLUDE: array / comma-separated list of chunks to exclude from calculations,
• link / WPINSIGHTS_LINK: (optional) link to an external resource

Suggestion for the link

Create an artefact with bundle-report.html produced by BundleAnalyzerPlugin that you can link from this Webpack size summary.