Reclaiming the Source: Reconstructing Project Architecture from a Single JS Bundle

#architecture #javascript #showdev #tooling

The Challenge: Beyond Prettifying

We’ve all been there: looking at a massive, minified, and bundled app.js file, wondering how the original architecture actually looked. While source maps are a luxury we rarely have in production, most tools only "prettify" the mess—they don't restore the semantics and architecture.

That’s why I’ve been building jsunpack.tech.

The Experiment: A Real-World Case Study

I recently put the tool to the test against a complex target: a 3D Tower Defense game built with Three.js, Vue 2, and Webpack. The goal was to prove that jsunpack can handle sophisticated logic and modular dependencies, turning a single opaque file back into a maintainable repository.

The Result: A "Near-Source" Recovery
The results were surprisingly robust:

File Mapping Coverage: ~90.7%
Naming Recovery: ~93% (variables/functions)
Overall Reconstruction Quality: ~88%

It didn't just dump code; it reconstructed the Modular Structure:

Components: Vue SFC logic was extracted and organized.
Core Systems: The pub/sub event system was restored almost perfectly (on/off/emit/once).
Game Logic: Complex formulas for chain lightning, splash damage, and economic systems remained readable.
Data Configs: 20 levels of wave configurations were recovered with correct data arrays.

Live Comparison

You can see the actual output of this experiment here:

👉 Live Demo: bastion-3d-threejs.vercel.app

👉 Source Code (Reconstructed): jsunpack-example on GitHub

How it works: The Tech Behind jsunpack

Unlike basic de-minifiers, jsunpack focuses on Structural Reverse Engineering:

Module Boundary Detection: Identifying where one module ends and another begins within the bundle.
Semantic Analysis: Analyzing code patterns to guess the original names of internal functions and variables.
Architecture Rebuilding: Re-mapping the flat bundle back into a hierarchical folder structure (e.g., /entities, /managers, /configs).

Why build this?

Learning & Reverse Engineering: Studying how complex libraries like Three.js are integrated into large-scale apps.
Security Auditing: Understanding exactly what a third-party script is doing under the hood.