Web3js — Upgrading Webpack 4 to Webpack 5
Authored by Alex Luu
In web3js, we use Webpack to bundle our library to create a minified build for developers, often this build is used for developing apps and websites.
A smaller build results in reduced load times and bandwidth usage, which is essential for providing a good user experience when visiting websites. In addition, Webpack incorporates polyfills into the files. Some objects are not supported in older browsers, such as sessionStorage, which is unavailable in IE7 but can be used in IE8 and upwards.
Polyfills enable the same objects, such as sessionStorage, to be available in newer browser builds. Our users who use web3.js and frontend frameworks such as Create React App or Angular rely on polyfills to ensure consistent functionality and user experience across different browsers.
If you'd like to go deeper, here's a great article for learning more about polyfills.
Migrating to Webpack 5
As of version 1.8.2 and upward, web3.js has successfully migrated to Webpack 5 from Webpack 4, and as the maintainers, we're excited to share the results!
Bundle size
Build times
Build size and build time
An improvement of reduced size by 0.33MB and a 3.5-second decrease build time. In the process of the migration, we were able to configure Webpack and achieve more with efficient module resolution and the effectiveness using single instances of modules that show up in multiple packages.
Polyfills
The removal of global polyfills: it's important to note that with the transition from webpack 4 to 5, global polyfills are no longer included. The project now only requires the polyfills necessary for running the library.
Looking ahead: a new web3.js: version 4.x
There is still room for improvement in build size, and we are committed to maintaining web3.js and continuing this progress.
The team is also working on a complete overhaul of the library with version 4.x, which is entirely written in TypeScript. This new version will offer significant upgrades from 1.x, including a reduced build size, enhanced functionality, and type safety.
We aim to re-architecture the library for maintainability and usability. At the time of this article, 4.x is in RC with available documentation here. We would greatly appreciate testing, usage, and your feedback for improvements. For any issues or feature requests 👉 GitHub.
Web3.js is currently maintained by ChainSafe.
About ChainSafe
ChainSafe is a leading blockchain research and development firm specializing in infrastructure solutions for web3. Alongside its contributions to major ecosystems such as Ethereum, Polkadot, Filecoin, Mina, and more, ChainSafe creates solutions for developers and teams across the web3 space utilizing expertise in gaming, bridging, NFTs, and decentralized storage. As part of its mission to build innovative products for users and improved tooling for developers, ChainSafe embodies an open source and community-oriented ethos to advance the future of the internet.
Twitter | Linkedin | GitHub | Discord | YouTube | Newsletter
