Kakao Electronic Certificate Reduces Initial Load by 100KB with React Router-Based Dynamic Routing

The KakaoTalk Electronic Certificate service faced increasing code complexity and bundle size as pages and layers grew in its initial structure using React Router. To address this, the team adopted the concept of Next.js file-system-based routing, restructuring the application to dynamically load (Dynamic Import) only the components required for specific URL paths.

Routing Structure Improvement and Code Splitting

Previously, all page components were statically imported in App.jsx and connected to Routes. After the improvement, components for each path are loaded at runtime in a manner similar to React.lazy. A custom hook named useRouteComponent was created to dynamically import files from the pages or layer folders based on page and layer types, while matchPath ensures that only routes matching the current URL are rendered.

Performance Improvement Results

Applying route-based code splitting reduced the page file size required for initial loading by approximately 100KB. This optimization is scheduled to be applied to over 30 types of certificates and confirmations to be added in the future, with expectations that the performance benefits of lazy loading will increase as more code is added.