Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reduce bundle size: package with rollup; tidy dependencies #43

Open
wants to merge 3 commits into
base: latest
Choose a base branch
from

Conversation

paulbrimicombe
Copy link

Resolves: No issue but happy to raise on!

Overall change: No functional changes: reduce bundle size by bundling into a single file and trimming production / peer dependency lists

Code changes:

  • react-dom and shell-js aren't required to be installed by clients installing this package and so should be dev dependencies
  • Fixed existing peer dependency issues by installing a few development dependency packages
  • The current Babel-only transpilation leads to the same polyfills being added to every file in the dist and esm directories. This leads to large bundle sizes for clients. This PR changes the build step to use Babel + Rollup to produce a single bundled file for each of CommonJS and ESM (inspired by the web-vitals build process: https://github.com/GoogleChrome/web-vitals/blob/main/rollup.config.js )

Before:

File Size (kB)
dist/index.js 9.0
dist/use-hardware-concurrency.js 2.2
dist/use-memory-status.js 2.6
use-network-status.js 4.4

After:

File Size (kB)
dist/cjs.js 5.1

While this isn't a totally fair test (we're now doing some minification), I've tested this with the WebCore Presentation Layer bundler (which does minify everything) and the total contribution of @bbc/web-vitals to the production bundle is reduced by 8KB using this version compared to the latest release.

None of this should be a breaking change — the browser compatibility list is the same as it was and the use of exports in package.json means that people couldn't import the individual files in dist/ or esm/.


  • (BBC contributors only) This PR follows the repository use guidelines
  • I have assigned myself to this PR and the corresponding issues — I'm not directly involved in this library so I haven't done this.
  • Automated jest tests added (for new features) or updated (for existing features) — no since there is no testing of the bundled code
  • This PR requires manual testing — I suspect so given that we don't test the bundled files

"build:esm": "BABEL_TYPE=esm npx babel src -d esm --ignore '**/*.test.js'",
"prepublish": "yarn build",
"build": "rm -rf dist && rollup -c",
"prepublish": "npm run build",
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've changed this to use npm so people can install the library from GitHub (e.g. using npm install bbc/web-vitals). Feel free not to like this and I'll change it back again.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants