relative-ci/bundle-stats

Compressed assets

Opened this issue · 1 comments

SStranks commented

It would be useful if bundle-stats had the ability to cater to the compressed bundle files that some builds produce i.e. Gzip, Brotli, etc.

Currently there is no differentiation within the 'bundle size'. If one includes these compressed files in the overall bundle stats data, then they fall under the 'other' category due to their file extensions. The total bundle size reflects the size of bundle including all the files (.js, .js.br, .js.gz), so perhaps there could be a toggle to switch between non-compressed/compressed and maybe some additional information displayed in the main 'bundle size' card at the top of the UI showing the difference between compressed/uncompressed.

image

image

In conjunction with the above, the '@bundle-stats/plugin-webpack-filter' currently doesn't grab these 'related assets'. I was able to tweak this in order to grab the related assets by amending the source files plugin-webpack-filter/index.js to include them, by adding the following code at line 70 - incidentally I think there is a type error in the webpack 'StatsCompilation' type, which is why I checked for an array not just an empty array.

image

Thanks!

vio commented

@SStranks thank you for creating the issue!

At the moment, bundle-stats works only with the webpack stats output, and the sizes depend on the webpack output. We had requests for parsed/gzip sizes (#1598), and we are considering them, but we don't have a plan yet for reliably achieving them.

Regarding the presence of compressed assets in the bundle stats:

  1. Do you want to see in the report only non-compressed, .br, or .gz files or have an option to switch between the different sizes? If yes, are you looking for particular side-effects?
  2. For the current report, are you considering viewing all the non-compressed, .br, .gz in the same view but mapped to the correct source file type or want to ignore them?

BTW, since bundle-stats is also available as a CLI that processes the webpack stats JSON filter, you can alter the data source to match any of the formats you need. Also, you can use excludeAssets option to ignore particular assets (eg: ignore all .br files [/\.br$/]).