Git Product home page Git Product logo

relative-ci / bundle-stats Goto Github PK

View Code? Open in Web Editor NEW
478.0 2.0 20.0 202.17 MB

Analyze bundle stats(bundle size, assets, modules, packages) and compare the results between different builds. Support for webpack, rspack, rollup and vite.

License: MIT License

JavaScript 34.42% HTML 0.17% CSS 8.88% Shell 0.17% TypeScript 56.37%
webpack bundle-size bundle-analyzer webpack-plugin gatsby-plugin nextjs-plugin bundlesize bundle-stats webpack-analyzer rollup-plugin rollup vite-plugin

bundle-stats's Introduction

BundleStats screenshot

Demos: Bundle analysis comparison ยท Bundle analysis

BundleStats

Analyze webpack stats(bundle size, assets, modules, packages) and compare the results between different builds.

Node version GitHub action CodeQL

RelativeCI

- Bundle size and totals by file type(css, js, img, etc)
- Insights: duplicate packages, new packages
- Initial JS/CSS, Cache invalidation, and other bundle metrics
- Assets report (entrypoint, initial, types, changed, delta)
- Modules report (changed, delta, chunks, duplicate count and percentage)
- Packages report (count, duplicate, changed, delta)
โญ Side by side comparison for multiple builds

Related projects

๐ŸŒ€ relative-ci.com

Optimize your web app's performance with automated bundle stats analysis and monitoring.

  • ๐Ÿ”ฎ In-depth bundle stats analysis for every build
  • ๐Ÿ“ˆ Monitor bundle stats changes and identify opportunities for optimizations
  • ๐Ÿ”” Rule based automated review flow, or get notified via GitHub Pull Request comments, GitHub check reports and Slack messages
  • ๐Ÿ”ง Support for webpack and beta support for Vite/Rollup
  • ๐Ÿ”จ Support for all major CI services(CircleCI, GitHub Actions, Gitlab CI, Jenkins, Travis CI)
  • ๐Ÿ”ฉ Support for npm, yarn and pnpm; support for monorepos
  • ๐Ÿ’• Always free for Open Source

๐Ÿš€ Get started

Standalone web application to compare Webpack/Lighthouse/Browsertime stats.

Compare bundle stats

Github Action that generates bundle-stats reports.

Packages

npm npm

CLI to generate bundle stats report.

npm npm

Webpack plugin to generate bundle stats report.

npm npm

Gatsby plugin for bundle-stats.

npm npm

Next.js plugin for bundle-stats.

npm npm

Rollup plugin to generate bundle stats report.

bundle-stats's People

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  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  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  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

bundle-stats's Issues

Budgets

  • utils: add support for budget insights
  • budget for individual assets (similar to: webpack/webpack#3216)
  • ui: Summary - add support for budget info
  • ui: BudgetInsights
  • ui: Totals - add support for budget insights
  • webpack-plugin: Add support for budget config
  • cli: Add support for budget config

Update chart components

  • ui - replace recharts
  • ui - replace pi + bars with horizontal percentages bars
  • web-compare - replace charts
  • html-template - add chart

An in-range update of eslint-plugin-import is breaking the build ๐Ÿšจ

The devDependency eslint-plugin-import was updated from 2.16.0 to 2.17.0.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-import is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

Commits

The new version differs by 61 commits.

  • 0499050 bump to v2.17.0
  • f479635 [webpack] v0.11.1
  • 8a4226d Merge pull request #1320 from bradzacher/export-ts-namespaces
  • 988e12b fix(export): Support typescript namespaces
  • 70c3679 [docs] make rule names consistent
  • 6ab25ea [Tests] skip a TS test in eslint < 4
  • 405900e [Tests] fix tests from #1319
  • 2098797 [fix] export: false positives for typescript type + value export
  • 70a59fe [fix] Fix overwriting of dynamic import() CallExpression
  • e4850df [ExportMap] fix condition for checking if block comment
  • 918567d [fix] namespace: add check for null ExportMap
  • 2d21c4c Merge pull request #1297 from echenley/ech/fix-isBuiltIn-local-aliases
  • 0ff1c83 [dev deps] lock typescript to ~, since it doesnโ€™t follow semver
  • 40bf40a [*] [deps] update resolve
  • 28dd614 Merge pull request #1304 from bradennapier/feature/typescript-export-type

There are 61 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

An in-range update of eslint-plugin-jest is breaking the build ๐Ÿšจ

The devDependency eslint-plugin-jest was updated from 22.5.1 to 22.6.0.

๐Ÿšจ View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

eslint-plugin-jest is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • โŒ ci/circleci: Your tests failed on CircleCI (Details).

Release Notes for v22.6.0

22.6.0 (2019-05-22)

Features

Commits

The new version differs by 9 commits.

  • 14d83ef feat(rules): add no-commented-out rule (#262)
  • 83ff198 chore: migrate no-jest-import to typescript (#259)
  • 718c08c chore: upgrade @typescript-eslint
  • ca2aa27 chore: port lowercase-name to TypeScript (#258)
  • 3df0058 chore(ci): run danger with lts version of node
  • 48e3a59 chore: precompile with babel (#257)
  • 8670804 chore: bump deps
  • 05eb11a chore: fix lint error
  • dff6446 docs: link to eslint-plugin-jest-formatting

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those donโ€™t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot ๐ŸŒด

Meta data

  • webpack - builtAt, hash
  • utils - report date
  • utils - get git commit data (commit, branch, message)
  • ui - JobsHeader component
  • ui - change job counting (baseline should be 1st)
  • html-templates - add meta data

Utils: make all the metric transformations pluggable

  • plugin logic

Transforms applied to webpack stats

  • warnings-webpack
  • assets-webpack
  • modules-webpack

Transforms applied to bundle stats

  • size-assets-bundle
  • count-assets-bundle
  • chunk-count-assets-bundle
  • cache-invalidation-assets
  • count-modules-bundle
  • not-predictive-cache-assets
  • packages-modules
  • duplicate-packages-modules
  • duplicated-code-modules

Dependency issue

I installed this package and just imported it in my code and I'm getting this issue:

Error: Cannot find module 'core-js/modules/es.array.unscopables.flat'
Package.json

{
  "dependencies": {
    "express": "^4.17.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "watchpack": "^1.6.0",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-hot-middleware": "^2.25.0"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/node": "^7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "^10.0.2",
    "babel-loader": "^8.0.6",
    "bundle-stats": "^1.2.1",
    "chalk": "^2.4.2",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.0.0",
    "eslint": "^5.3.0",
    "eslint-config-airbnb": "^17.1.1",
    "eslint-plugin-import": "^2.18.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.14.2",
    "isomorphic-style-loader": "^5.1.0",
    "postcss-loader": "^3.0.0",
    "webpack": "^4.35.0",
    "webpack-assets-manifest": "^3.1.1",
    "webpack-monitor": "^1.0.14",
    "webpack-node-externals": "^1.7.2",
    "webpack-stylish": "^0.1.8",
    "webpackbar": "^3.2.0"
  }
}

Let me know if you need more details.

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.