{"id":13451933,"url":"https://github.com/ZachGawlik/webpack-stats-diff-plugin","last_synced_at":"2025-03-23T19:33:18.520Z","repository":{"id":77735575,"uuid":"134186894","full_name":"ZachGawlik/webpack-stats-diff-plugin","owner":"ZachGawlik","description":"Webpack plugin for reporting changes in bundle sizes across builds","archived":false,"fork":false,"pushed_at":"2018-08-25T02:26:31.000Z","size":1068,"stargazers_count":61,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-11T09:26:21.208Z","etag":null,"topics":["webpack","webpack-plugin","webpack-stats"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ZachGawlik.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-20T21:08:31.000Z","updated_at":"2024-02-25T08:14:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"21247152-8d7b-4914-a292-2f332d0cad8a","html_url":"https://github.com/ZachGawlik/webpack-stats-diff-plugin","commit_stats":{"total_commits":19,"total_committers":1,"mean_commits":19.0,"dds":0.0,"last_synced_commit":"3dae01fb851722fa4e86ca9a8902c9ed21630717"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachGawlik%2Fwebpack-stats-diff-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachGawlik%2Fwebpack-stats-diff-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachGawlik%2Fwebpack-stats-diff-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ZachGawlik%2Fwebpack-stats-diff-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ZachGawlik","download_url":"https://codeload.github.com/ZachGawlik/webpack-stats-diff-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245158806,"owners_count":20570260,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["webpack","webpack-plugin","webpack-stats"],"created_at":"2024-07-31T07:01:07.371Z","updated_at":"2025-03-23T19:33:18.091Z","avatar_url":"https://github.com/ZachGawlik.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# webpack-stats-diff-plugin\n\nClear reporting of bundle sizes relative to the previous build or relative to an earlier build captured by a webpack stats file.\n\n## Why is this useful?\n\nWebpack prints absolute sizes of outputted files, but it's hard to see the overall impact of a code or configuration change. For example if you wanted to know the effect of changing webpack's `optimization.splitChunks.chunks` setting from its default `\"async\"` value to the recommended `\"all\"`,\n\nAdding this plugin will highlight only the key changes:\n\n![webpack-stats-diff-plugin comparison output](readme-assets/plugin-output.png)\n\nVersus having to compare and contrast two standard webpack outputs:\n\n![standard webpack report with chunks: async](readme-assets/standard-report-all.png)\n![standard webpack report with chunks: all](readme-assets/standard-report-async.png)\n\n## Installation \u0026 Usage\n\n```\nnpm install webpack-stats-diff-plugin --save-dev\n```\n\n### Comparing to previous build output\n\nAdding `new WebpackStatsDiffPlugin()` to the webpack plugins list will compare a new webpack build to the file sizes of the previous contents of the webpack output folder. Note, if `clean-webpack-plugin` is used it must be configured with `{beforeEmit: true}` for this plugin to be able to grab the previous build contents.\n\n### Comparing to a webpack stats json file\n\nThis approach is helpful for comparing against an unchanging baseline build. To create a json stats file, add a script like `\"build_stats\": \"webpack --profile --json \u003e stats-master.json\"` or use [webpack-stats-plugin](https://github.com/FormidableLabs/webpack-stats-plugin) with `opts.fields` containing `\"assets\"`. Then, add `new WebpackStatsDiffPlugin({oldStatsFile: 'path-to-stats-file.json'})` to the webpack plugins list to compare a new build against that baseline.\n\n### Flexible opt-in webpack configuration\n\nYou likely don't want this relative size output all the time. The following configuration setup lets you pass environment variables to opt in to different plugin behaviors.\n\n```javascript\nconst CleanWebpackPlugin = require('clean-webpack-plugin');\nconst WebpackStatsDiffPlugin = require('webpack-stats-diff-plugin');\n\nmodule.exports = {\n  output: {\n    path: BUILD_FOLDER\n  },\n  plugins: [\n    new CleanWebpackPlugin(BUILD_FOLDER, {beforeEmit: true}),\n    // ... other plugins\n    (process.env.COMPARE_PREVIOUS === 'true' || process.env.STATS_FILE) \u0026\u0026\n      new WebpackStatsDiffPlugin({\n        oldStatsFile: process.env.STATS_FILE\n      })\n  ].filter(Boolean);\n};\n```\n\nWith this setup, running\n\n- `STATS_FILE=stats-master.json npm run build` compares the current build to the one used to create the stats file\n- `COMPARE_PREVIOUS=true npm run build` compares the current build to the previous build folder contents\n\n### Configuration\n\nThe WebpackStatsDiffPlugin constructor can take in the following optional fields:\n\n- `oldStatsFile`: A string file path to a webpack stats file. If provided, the current build will be compared to the build that created the stats file rather than having it compared to the previous output folder contents.\n\n- `extensions`: An array of strings, optionally with a leading period. If provided, only files matching a given extension will be displayed and used for calculating totals. For example, `extensions: ['.js']` will only show size changes for built javascript files.\n\n- `threshold`: Minimum percent difference to qualify a size change as significant. This prevents flooding the output with files that have only trivially changed their compiled output. Defaults to `5`. Can set to 0 to see all changed file sizes.\n\n### Supported environments\n\nThis plugin should work for webpack versions \u003e= 2, and Node.js versions \u003e= 6.14.3\n\n## Other Solutions\n\n[GoogleChromeLabs/size-plugin](https://github.com/GoogleChromeLabs/size-plugin). Honestly if this had been created a month earlier, I might not have made this plugin 😅. If you want to compare against the previous build and prefer size-plugin's output format, I would recommend it over this plugin as the devs are looking into how to provide more in-depth size tracking and performance budgeting features.\n\nAt this point, I recommend my own plugin only if you need to compare against a stats file, which can be useful for seeing size changes relative to master or an earlier known state.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZachGawlik%2Fwebpack-stats-diff-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FZachGawlik%2Fwebpack-stats-diff-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FZachGawlik%2Fwebpack-stats-diff-plugin/lists"}