ENGINEERING PREMIER LEAGUE
SUCCESS STORY ON PERFORMANCE IMPROVEMENT FT. ALEXANDRIA TEAM!
"The real voyage of discovery consists not in seeking new landscapes, but in having new eyes"
In their voyage of making the Console, a resilient and sturdy platform for the customers, Team Alexandria undertook the task of fixing the vulnerabilities caused by the 3rd party packages, which led them to upgrade the versions of these 3rd party packages. They added Jest, a unit test framework for React to the list. Upgrading Jest from version 26 to version 29 would enable advanced unit testing capabilities. To support this upgrade, the web-pack version also needed to be updated from version 4 to version 5.
Alexandria’s exploration led them to the treasures namely Code Splitting and Tree Shaking which involves breaking down code into smaller bundles and eliminating unused parts, resulting in faster initial load times, more efficient bandwidth utilization, and an enhanced overall user experience.
How does code splitting work?
- Code splitting leverages techniques like dynamic imports (import()) or code-splitting components from React Router.
- These approaches instruct the bundler (e.g., Webpack) to create separate bundles for different parts of the application.
- The initial bundle loads the core functionality, while other bundles are loaded on demand when the user navigates to a route or interacts with a feature that requires them.
How does tree shaking work?
- Tree shaking relies on static analysis to identify unused code. When a module is imported, the bundler tracks which parts of that module are actually used within the application code.
- Any unused exports are then eliminated during the bundling process, resulting in a leaner bundle size.
Improvements after implementation:
Implementation resulted in reducing the initial bundle size from 7.9 Mb to 2.2 Mb, significantly improving the app’s initial load time. Overall, the bundle size decreased to 6.6 Mb, achieving a reduction of 1.3 Mb in total.
Previous Next