Show modern build stats for packages that expose a "exports.browser" build

Please describe the feature/suggestion With webpack 5, we expect to start seeing package authors offer a modern “exports.browser” conditional export. This might be the solution to finally bringing modern javascript to libraries and cutting library bloat by 5-40%.

BundlePhobia is the go-to tool in helping developers avoid library bloat. It would be great if BundlePhobia could also showcase some information on the modern entry points that these packages offer. This could serve to:

1. Enable application developers to see which libraries offer a modern "exports.browser" build.
2. Show off the reduced size of modern builds and encourage library authors and application developers to provide or use the "exports.browser" entry point.
3. Prevent package authors from publishing ES5 builds to "exports.browser".

Describe the solution you’d like BundlePhobia’s results page could have a “modern”/“non-modern” toggle for packages that offer a "exports.browser" conditional export (see below). (Mock created by @jeremyphilemon) If a user clicks on the "modern" tab, BundlePhobia will switch from using the top-level "browser"/"module"/"main" entry points and instead use the "exports.browser" conditional entry point. All sections on the page (i.e. bundle size, download time, history, etc.) will display information for the smaller modern entry point.

In addition, for packages that offer a modern “exports.browser” build, the results page can show a banner along the lines of This package also ships with modern code in **ES2018**. Save 23% by adding support for exports to your bundler.

In the case that a package author incorrectly provides a transpiled ES5 build in "exports.browser", the banner can instead a show a warning such as This package offers a modern "exports.browser" entry point, but does not use any ES2015+ features. BundlePhobia can implement this syntax detection using detect-es-version (a package I’m in the middle of implementing).

Implementation Details

• bundlephobia.com/result?p=react?exports=browser will route to the results page for the modern "exports.browser" build.
• An exports parameter will be added for all relevant API’s (getInfo, getExports, getExportsSizes, getHistory)
• The exports parameter will be added as a key in BundlePhobia’s Firebase cache.

Other Notes

• Implementing this functionality currently requires using webpack’s and enhanced-resolve’s 5.0.0 beta versions.

Describe any alternatives you’ve considered N/A

[GaryLChew]

The detect-es-version looks at the AST to find out the ES version. This should be fast? Maybe… Just maybe…It could also potentially re-use the AST generated by webpack?

I’ve run some benchmarks on the speed here. Re-using webpack’s AST is definitely possible (@developit has experimented with this a bit), but I would guess that detect-es-version is fast enough for now.

If the detection takes a couple of seconds, I don’t mind adding this to the main api/size?package=<> API instead.

One thing though is that the This package offers a modern "exports.browser" entry point, but does not use any ES2015+ features message requires looking at “exports.browser”, so we would have to either:

1. Call api/size?package=<> which, despite returning stats for "main"/"module"/etc., will also return the ecma version for "exports.browser"
2. Call api/size?package=<>?exports=browser

I was actually suggesting doing this the other way around. i.e. show the non-modern build by default and pull up modern numbers if the modern tab is clicked.

Thanks for clarifying, that sounds good too!

[GaryLChew]

Ah okay, so you’d just want something like “This package ships with modern code” based on the presence of exports.browser? When do you imagine the 2nd phase being started?

Also, today’s my last day at Google, so I think @developit will look into picking this up later.