B2B Logistics Squad Improves Back-Office Frontend Performance
Key point
Oliveyoung's B2B Logistics Squad used Webpack and browser caching to cut the SPA's initial loading speed down to 0.2 seconds.
Details
Oliveyoung's B2B Logistics Squad carried out optimization work to solve the SPA (Single Page Application) performance degradation issue that occurred during the process of migrating from a monolithic legacy system to a new AWS-based platform.
The key optimization steps are as follows:
- Code splitting and bundle separation using Webpack
- CSS optimization and Font compression
- Applying gzip compression and static file caching via Nginx
In particular, for a large font file (NotoSans, 3.8MB), they achieved compression down to about 72B by separating the bundling using file-loader. Through this, web page loading time was significantly reduced from the previous 1.6-2.5 seconds down to 0.2 seconds.
Additionally, they introduced axios-cache-interceptor to apply a caching strategy that stores API response data in the browser's Local storage. This minimizes network communication by reducing repetitive API calls, and improves user experience by increasing data reusability in conjunction with Vuex.
This summary was generated automatically by AI. Check the original for the author's claims and context. Copyright belongs to the original author.
Our guide explains how the AI works. Report summary errors, attribution issues, or removal requests via Contact.