A Story of Redesigning a Design Component Library to Match Real Usage Patterns

Kitchen redesigned its structure to match real usage patterns. Previously, the re-export structure of kitchen-core and the mixed UMD/CJS build meant tree-shaking didn't work, so even using only some components pulled the entire code into the bundle.

What made the problem worse wasn't performance itself but the mismatch between structure and usage. Referencing components based on build output complicated Storybook inference, local execution, and test mocking, and even when creating new components, bundle impact kept having to be considered first.

The improvement was guided by three criteria.

• Align the actual usage pattern with the structure
• Make it statically analyzable by bundlers
• Prioritize mid-to-long-term maintainability over short-term performance

Accordingly, the distribution format was switched to ESM-based (dist/esm), and exports was explicitly specified so that only what's imported gets included in the bundle. Also, the multi-package-per-component setup was removed and reorganized into a single packages/kitchen package structure, making source-code-based dependency relationships clear.

Shared assets were separated out into kitchen-foundation, which also clarified the standard for managing design tokens. By having Desktop and Mobile reference the same foundation, the aim was to reduce duplicate work and the risk of omissions when tokens change.

The results were clear as well. Build time dropped from 60.93 seconds to 6.94 seconds, an 88.6% reduction, and the Cold dev verification loop went from 86.34 seconds to 20.87 seconds. Based on the measurement service, the amount of Kitchen code included also decreased from 1.61MB to 162.5KB, so adding components is no longer perceived as a performance risk first.