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

Gua — Mon, 27 Apr 2026 06:22:04 +0000

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.

The Road Ahead

It’s not perfect yet. I am still working on:

Restoring specific external imports more accurately.
Handling parameter order edge cases in highly optimized code.
Improving the readability of color constants and math literals.

I’d love to hear your thoughts!

Is a tool like this useful in your workflow? Whether it's for debugging, security analysis, or pure curiosity, let's discuss in the comments!

🚀 Try the tool: https://www.jsunpack.tech/

DEV Community: Gua