Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
webpack-stats-diff
Advanced tools
webpack-stats-diff - npm Package Compare versions
Comparing version 0.7.0 to 1.0.0
| { | ||
| "name": "webpack-stats-diff", | ||
| "version": "0.7.0", | ||
| "version": "1.0.0", | ||
| "description": "CLI tool to report changes in bundle sizes across builds", | ||
@@ -5,0 +5,0 @@ "bin": "src/cli.js", |
@@ -6,27 +6,5 @@ #!/usr/bin/env node | ||
| const fs = require('fs'); | ||
| const { table, getBorderCharacters } = require('table'); | ||
| const chalk = require('chalk'); | ||
| const webpackStatsDiff = require('./'); | ||
| const { getStatsDiff, printStatsDiff } = require('./'); | ||
| const ASSET_TABLE_CONFIG = { | ||
| border: getBorderCharacters('void'), | ||
| columnDefault: { | ||
| alignment: 'right', | ||
| paddingLeft: 2, | ||
| paddingRight: 2 | ||
| }, | ||
| columns: { | ||
| 0: { alignment: 'left' } | ||
| }, | ||
| drawHorizontalLine: () => false | ||
| }; | ||
| const TABLE_HEADERS = [ | ||
| chalk.bold('Asset'), | ||
| chalk.bold('Old size'), | ||
| chalk.bold('New size'), | ||
| chalk.bold('Diff'), | ||
| chalk.bold('Diff %') | ||
| ]; | ||
| const printError = text => { | ||
@@ -43,65 +21,2 @@ console.error(chalk.red(text)); | ||
| const getSizeText = size => { | ||
| if (size === 0) { | ||
| return '0'; | ||
| } | ||
| const abbreviations = ['bytes', 'KiB', 'MiB', 'GiB']; | ||
| const index = Math.floor(Math.log(Math.abs(size)) / Math.log(1024)); | ||
| return `${+(size / Math.pow(1024, index)).toPrecision(3)} ${ | ||
| abbreviations[index] | ||
| }`; | ||
| }; | ||
| const capitalize = text => text[0].toUpperCase() + text.slice(1); | ||
| const printAssetsTables = results => { | ||
| ['added', 'removed', 'bigger', 'smaller'].forEach(field => { | ||
| const assets = results[field]; | ||
| if (assets.length > 0) { | ||
| const sectionColor = ['added', 'bigger'].includes(field) | ||
| ? chalk.green.underline.bold | ||
| : chalk.red.underline.bold; | ||
| console.log(sectionColor(capitalize(field))); | ||
| if (['added', 'removed'].includes(field)) { | ||
| const tableData = [ | ||
| [chalk.bold('Asset'), chalk.bold('Diff')], | ||
| ...assets.map(asset => [asset.name, getSizeText(asset.diff)]) | ||
| ]; | ||
| console.log(table(tableData, ASSET_TABLE_CONFIG)); | ||
| } else { | ||
| const tableData = [ | ||
| TABLE_HEADERS, | ||
| ...assets.map(asset => [ | ||
| asset.name, | ||
| getSizeText(asset.oldSize), | ||
| getSizeText(asset.newSize), | ||
| getSizeText(asset.diff), | ||
| `${asset.diffPercentage} %` | ||
| ]) | ||
| ]; | ||
| console.log(table(tableData, ASSET_TABLE_CONFIG)); | ||
| } | ||
| } | ||
| }); | ||
| }; | ||
| const printTotalTable = total => { | ||
| const totalData = []; | ||
| totalData.push(['', ...TABLE_HEADERS.slice(1)]); | ||
| const diffColor = total.diff > 0 ? chalk.green.bold : chalk.red.bold; | ||
| totalData.push([ | ||
| total.name, | ||
| getSizeText(total.oldSize), | ||
| getSizeText(total.newSize), | ||
| diffColor(getSizeText(total.diff)), | ||
| diffColor(`${total.diffPercentage} %`) | ||
| ]); | ||
| console.log(table(totalData, { columnDefault: { alignment: 'right' } })); | ||
| }; | ||
| const formatExtensions = extensions => | ||
@@ -138,5 +53,3 @@ extensions.split(',').map(ext => (ext[0] === '.' ? ext : `.${ext}`)); | ||
| const results = webpackStatsDiff(oldAssets, newAssets, config); | ||
| printAssetsTables(results); | ||
| printTotalTable(results.total); | ||
| printStatsDiff(getStatsDiff(oldAssets, newAssets, config)); | ||
| }) | ||
@@ -143,0 +56,0 @@ .on('--help', () => { |
@@ -1,85 +0,7 @@ | ||
| const path = require('path'); | ||
| const getStatsDiff = require('./getStatsDiff'); | ||
| const printStatsDiff = require('./printStatsDiff'); | ||
| const DIFF_THRESHOLD = 5; | ||
| const filterByExtension = (assets, config) => { | ||
| return config.extensions | ||
| ? assets.filter(({ name }) => | ||
| config.extensions.includes(path.extname(name)) | ||
| ) | ||
| : assets; | ||
| module.exports = { | ||
| getStatsDiff, | ||
| printStatsDiff | ||
| }; | ||
| const indexByName = assets => { | ||
| return assets.reduce((assetsByName, asset) => { | ||
| assetsByName[asset.name] = asset; | ||
| return assetsByName; | ||
| }, {}); | ||
| }; | ||
| const diffDesc = (diff1, diff2) => Math.abs(diff2.diff) - Math.abs(diff1.diff); | ||
| const createDiff = (oldSize, newSize) => ({ | ||
| newSize, | ||
| oldSize, | ||
| diff: newSize - oldSize, | ||
| diffPercentage: +((1 - newSize / oldSize) * -100).toFixed(5) || 0 | ||
| }); | ||
| const webpackStatsDiff = (oldAssets, newAssets, config = {}) => { | ||
| const oldAssetsByName = indexByName(filterByExtension(oldAssets, config)); | ||
| const newAssetsByName = indexByName(filterByExtension(newAssets, config)); | ||
| const added = []; | ||
| const removed = []; | ||
| const bigger = []; | ||
| const smaller = []; | ||
| const sameSize = []; | ||
| let newSizeTotal = 0; | ||
| let oldSizeTotal = 0; | ||
| Object.keys(oldAssetsByName).forEach(name => { | ||
| const oldAsset = oldAssetsByName[name]; | ||
| oldSizeTotal += oldAsset.size; | ||
| if (!newAssetsByName[name]) { | ||
| removed.push(Object.assign({ name }, createDiff(oldAsset.size, 0))); | ||
| } else { | ||
| const diff = Object.assign( | ||
| { name }, | ||
| createDiff(oldAsset.size, newAssetsByName[name].size) | ||
| ); | ||
| const diffThreshold = config.hasOwnProperty('threshold') | ||
| ? config.threshold | ||
| : DIFF_THRESHOLD; | ||
| if (diff.diffPercentage > diffThreshold) { | ||
| bigger.push(diff); | ||
| } else if (diff.diffPercentage < -1 * diffThreshold) { | ||
| smaller.push(diff); | ||
| } else { | ||
| sameSize.push(diff); | ||
| } | ||
| } | ||
| }); | ||
| Object.keys(newAssetsByName).forEach(name => { | ||
| const newAsset = newAssetsByName[name]; | ||
| newSizeTotal += newAsset.size; | ||
| if (!oldAssetsByName[newAsset.name]) { | ||
| added.push(Object.assign({ name }, createDiff(0, newAsset.size))); | ||
| } | ||
| }); | ||
| return { | ||
| added: added.sort(diffDesc), | ||
| removed: removed.sort(diffDesc), | ||
| bigger: bigger.sort(diffDesc), | ||
| smaller: smaller.sort(diffDesc), | ||
| sameSize, | ||
| total: Object.assign( | ||
| { name: 'Total' }, | ||
| createDiff(oldSizeTotal, newSizeTotal) | ||
| ) | ||
| }; | ||
| }; | ||
| module.exports = webpackStatsDiff; |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.1%
252297
- Number of package files
- increased by15.38%
15
- Lines of code
- increased by2.5%
328
- Number of low quality alerts
- decreased by-100%
0
Worsened metrics
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes