Git Product home page Git Product logo

webpack-bundle-delta's Introduction

webpack-bundle-delta

npm typings included Nodejs Workflow

Webpack Bundle Delta Logo

Get insights into your webpack (v4 or v5) bundles as early as possible.

Features:

  • See webpack chunk deltas (size, gzip size, and brotli size)
  • Computes the delta for pull requests between base and head
  • Surface the relevant information to pull requests via dangerjs
  • Plugin system allows extending with more features as we improve our knowledge on how to better optimise our bundles

Why?

  • Performance is crucial to any website
  • Understanding the changes that occur in applications as early as possible ensures that any unforeseen changes don't make it to production
  • Automates steps that the performance team manually were doing earlier

Check out the docs folder for more details, including architecture design.

Note: this tool is still in its infancy and we welcome contributions to make it better.

Usage

  1. Gather webpack bundle stats
  2. Produce compressed output of your files
  3. Install via yarn or npm
    yarn add @trainline/webpack-bundle-delta --dev
    # or
    npm i -D @trainline/webpack-bundle-delta
  4. [Optionally] configure webpack-bundle-delta to your needs
  5. Follow either the cli or dangerjs setup below
  6. Enjoy the stats!

CLI

CLI can be used if you wish to simply see the results as part of your build.

As an example, to compare 2 compilation stats JSON files, you could do the following

$ webpack-bundle-delta local ./path-to/base-stats.json ./path-to/head-stats.json

Which would result in a similar output to the below

# Webpack Bundle Delta

3 files changed significantly, 144 files had little to no change

## Size changes

### Significant changes

| File                       |            Size             |         Gzip size          |        Brotli size         |
| :------------------------- | :-------------------------: | :------------------------: | :------------------------: |
| vendors~tocInformation.mjs | 30.28KB (+7.39KB / +32.31%) | 9.34KB (+2.03KB / +27.81%) | 8.06KB (+1.73KB / +27.25%) |
| vendors~tocInformation.js  | 32.19KB (+7.68KB / +31.36%) | 9.75KB (+2.09KB / +27.34%) | 8.43KB (+1.78KB / +26.69%) |
| trainTimesPageV2.css       | 237.71KB (+2.42KB / +1.03%) |  37.46KB (+398B / +1.05%)  |  30.81KB (+353B / +1.13%)  |

### Minor changes

| File                 |           Size            |        Gzip size         |       Brotli size        |
| :------------------- | :-----------------------: | :----------------------: | :----------------------: |
| trainTimesPageV2.mjs | 565.71KB (+347B / +0.06%) | 150.4KB (-431B / -0.28%) | 118.66KB (+69B / +0.06%) |
| trainTimesPageV2.js  | 623.43KB (+370B / +0.06%) | 162.1KB (-22B / -0.01%)  | 124.97KB (+10B / +0.01%) |
| intl.js              |            80B            |            -             |            -             |
| intl.mjs             |            80B            |            -             |            -             |
| locale-data-fr.js    |          11.08KB          |          1.8KB           |          1.54KB          |
| locale-data-fr.mjs   |          10.71KB          |          1.61KB          |          1.38KB          |

<truncated as the table gets quite long>

## Trace changes

trainTimesPageV2.js

- ./src/private/common/pages/train-times-v2/index.jsx: 2.06KB (641B / 43.58%)
- ./src/private/common/pages/train-times-v2/TrainTimesPage.jsx + 20 modules: 24.58KB (346B / 1.39%)

vendors~tocInformation.js

- @fleet-components/app-banner/module/index.js + 3 modules: 16.67KB (ADDED, +3 modules)
- @fleet-components/app-banner/module/translations/en.json: 2B (ADDED)

trainTimesPageV2.mjs

- ./src/private/common/pages/train-times-v2/index.jsx: 1.71KB (567B / 47.73%)
- ./src/private/common/pages/train-times-v2/TrainTimesPage.jsx + 20 modules: 21.17KB (322B / 1.51%)

vendors~tocInformation.mjs

- @fleet-components/app-banner/module/index.js + 3 modules: 15.27KB (ADDED, +3 modules)
- @fleet-components/app-banner/module/translations/en.json: 2B (ADDED)


## Duplication detection

No duplicate dependencies introduced


## Resolve Alias Remap

Your build is all good! (no suggestions available)
Done in 2.83s.

Use webpack-bundle-delta -h to see what options are available:

  • base and head sha need to be manually specified if the data sources require it

Danger JS file (Pull request integration)

Whilst being able to see the output in build log files is great, surfacing the information up to pull requests makes it clear for developers and reviews as to the impact of their changes.

Danger js is a great tool for helping consumers (and plugins) add information to pull requests (and provides a lot of flexibility such as ability to use it with other code repositories other than GitHub).

Given that, if you have not set up Danger, that would be the first step. Once you've done that, in your dangerfile.js import the danger setup, and an appropriate data source.

import { danger, TeamCityDataSource } from 'webpack-bundle-delta';

// ... other danger rules

delta({
  dataSource: new TeamCityDataSource({
    // data source options
  }),
  baseSha: danger.github.pr.base.sha,
  headSha: danger.github.pr.head.sha,
});

Which would result in a PR comment Danger post on PR comment with Webpack Bundle Delta Output

And when expanded

Danger post on PR comment with Webpack Bundle Delta Output expanded

webpack-bundle-delta's People

Contributors

dannycroft avatar davidhouweling avatar dependabot[bot] avatar lucacolonnello avatar santino avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

webpack-bundle-delta's Issues

GitHub Actions not running on PRs

On the PR I opened few days ago, the GitHub Actions didn't run.
As I don't have permissions to the repo, as it was a PR from a fork, I could not see what the problem see.

Actions seem to have run just fine on the previous PR, done by @davidhouweling

real life ci example

Hello! Thanks for this great tool. I just got here by reading the excellent article on medium. I am considering setting up this project into our ci integration, but I could not figure out how to get a previous stats.json from a previous build to compare with the current stats.json? Do you have a real-world example with Github actions, for instance?

I can think of many possibilities, but I wonder if you already have a GitHub workflow ready to go?

Thank you.

Setup automated security audit

At present we don't have an automated security audit which could fix issues automatically from dependencies which might have security vulnerabilities.

GitHub has a built in system using dependabot or alternatively we can use a different tool such as Snyk or renovate.

Need to discuss here and then implement what we think is most appropriate.

Reference: #7

Feature: Duplicate dependency detection across different chunks

Currently webpack-bundle-delta detects duplicate dependencies when they are in the same chunk which is awesome, however it would be good to push this one step further with duplicate dependency detection across all chunks. This should be an opt-in feature behind a flag as by default not all applications would need it.

The idea behind this is that some complex applications will have chunks brought in by other chunks (EG: dynamic imports) which could end up with duplicate dependencies. Take the following example:

Example

// bundle-a.js
require.ensure('bundle-c.js');
deps: [
  'cool-dependency': ^2.6.0,
]

// bundle-b.js
require.ensure('bundle-c.js');
deps: [
  'cool-dependency': ^3.0.2,
]

// bundle-c.js
deps: [
  'cool-dependency': ^3.1.0,
]

Any page that uses bundle-a will have have [email protected] and [email protected] which we would want to know be reported on the PR.

Improve GitHub workflow

The following improvements should be made to provide a more robust and verified package:

  • Move linting to its own workflow: at present it lints for every build, but really we only need it to lint once, so would be better to move it to its own build pipelines to make the other ones a little faster
  • Create integration pipelines:
    • at present we have build and test pipelines for each version of node we are supporting, but this doesn't actually prove it would be fully functional across the different operating systems
    • Windows is the notable one which may work differently than Mac and Linux, so having integration pipelines which run a set of integration tests across the varying node versions on each platform ensures that we don't miss any users (3 x 3)
    • This should be doable by creating a really basic integration test using the existing fixtures and the local command

Feature: support webpack v5 stats

At present webpack-bundle-delta only supports webpack v4. As webpack v5 has been our for a few months now we need to look at adding support for it.

Based on initial investigations the following likely cause of action needs to be taken:

  • Use package alias remapping to rename the present webpack to webpack 4 as well as @types/webpack
  • Webpack 5 does comes with types, however it doesn't have stats types, so we need to create a PR for webpack itself to output the stats defintions, making sure the stats are aligned
  • Consumed the new version of webpack which would contain the stats
  • Update WBD code to logically work out what to do given each version that is passed to it

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.