Παρακολούθηση λειτουργίας σε παραγόμενο JavaScript bundle

Ξεκίνα από εφαρμογή που ελέγχεις

Φτιάξε δύο δικά σου ES modules: το πρώτο μορφοποιεί δεδομένα και το δεύτερο δημιουργεί event listener. Κράτησε τον πηγαίο κώδικα, το bundle και τυχόν source map. Το minification μπορεί να μετονομάζει symbols και να ενώνει modules. Επομένως η απουσία αναγνώσιμου ονόματος συνάρτησης δεν αποδεικνύει ότι εξαφανίστηκε η συμπεριφορά.

format.mjs

export const label = (n) => `count=${Number(n)}`;

ui.mjs

import {label} from './format.mjs';
document.querySelector('#count')?.addEventListener('click', () => {
  console.log(label(4));
});

Σχεδίασε τη ροή δεδομένων

Εντόπισε πού προστίθεται ο click handler, πού μετασχηματίζεται η τιμή και πού γίνεται έξοδος με console.log. Πρόβλεψε τι εμφανίζει το πάτημα και επιβεβαίωσέ το στη δική σου εφαρμογή. Σύγκρινε το bundle πριν και μετά προσθήκη δεύτερου module. Ένα source map βοηθά στην αντιστοίχιση αλλά μπορεί να αποκαλύπτει αρχικά paths, οπότε χρειάζεται επιθεώρηση πριν δημοσίευση.

Τέσσερις συνηθισμένες παγίδες

Η απουσία import statement μπορεί να προκύπτει από bundling. Το tree shaking μπορεί να αφαιρεί πραγματικά νεκρό κώδικα. Ένα dynamic import ίσως παράγει χωριστό chunk. Όνομα minified variable δεν αποδεικνύει πρόθεση χωρίς εξέταση call sites. Μη χρησιμοποιείς ξένες συνεδρίες ή αλλαγές σε παραγωγικό τρίτο site για επαλήθευση.

Τι αποθηκεύεις

Κράτησε γράφημα entry module → handler → function → output και αντίστοιχες θέσεις στο παραγόμενο JS. Δοκίμασε το κουμπί σε δικό σου test UI και κατέγραψε τι αλλάζει με ενεργό tree shaking. Μη βαφτίζεις ένα θεωρητικό dependency graph πραγματικό execution trace.