how-minifying-code-and-source-maps-work-in-practice/annotations.txt at main · ErickWendel/how-minifying-code-and-source-maps-work-in-practice · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
https://web.dev/source-maps/
https://web.dev/source-maps/#understanding-the-source-map
https://evanw.github.io/source-map-visualization/
https://sokra.github.io/source-map-visualization/ (test on this)
https://umaar.com/dev-tips/96-resolve-variable-names/ (only on firefox)
https://sourcemaps.info/spec.html

# Script

node -v > .nvmrc
nvm use

npm init -y
    type: module
    "engines": {
        "node": "18"
    },
-> initial structure
mkdir src
    src
        processor
        minifier
    index

mkdir public
    touch index.js
        all
processor.js
    run
        console.log(fileName)
index.js
    call processor.run
package.json
    "clean": "rm -rf **/index.min*",
    "minify": "npm run clean && node index.js public/index.js",
    "minify-and-run": "npm run minify && npm run start",
    "start": "node public/index.min.js"

npm i -g ntl
ntl -> minify
minifier.js
   traverseAST(originalCode) {
     console.log(originalCode)
   }
processor
    readfile
    minifiedFilePath
    minfifiedLocalPath
    #generateMinifiedCode
        const minifier = new Minifier();
        minifier.traverseAST(originalCode);
npm i acorn@8.8.2 escodegen@2.0.0
    acorn -> generate the AST
    escodegen -> validate js code + remove spaces and breaklines

minifier.js
    traverseAST
        ast
        console.log JSON.stringify(ast)
        show structure
    #traverse(node) {}
    traverseAST
        this.#traverse(ast);
         // Generate the minified code
        const minifiedCode = escodegen.generate(ast, { format: { compact: true, space: false } });
        return {
            minifiedCode,
        };
processor
    generateMinifiedCode
        minifiedCodeAndNameMap
        console.log({ minifiedCodeAndNameMap })
minifier
    #nameMap = new Map();
    // put all alphabet both upper and lower case in an array
    #alphabet

    #generateNameIfNotExists
    #handleDeclaration(declaration)
        // all
    traverseAST
        call #handleDeclaration({ name: Date.now()})

run -> should generate different names
    updateNameMap
    traverseAST
        call updateNameMap
run -> should save items
touch ast-helper
    all
    comment VariableDeclaration
minifier
    import ast-helper
    traverse
        all
run -> it should print minified code only on fnctions
ast-helper
        uncomment VariableDeclaration
run -> it should print all minified code
    traverseAST
        return nameMap
processor
    generateMinifiedCode
        all
run -> it should generate minified file
touch index.html
    all
run -> should run in the browser

-> pause announcement
show: https://web.dev/source-maps/#understanding-the-source-map

npm i source-map@0.7.4

touch sourcemapper.js
    only signature
    constructor({ minifiedLocalFilePath })
    generateSourceMap({ originalCode, nameMap, minifiedCode }) {}
processor
    run
        generateSourceMap
    generateSourceMap
         const sourceMapper = new SourceMapper({
            minifiedLocalFilePath,
        });
        const sourceMapContent = sourceMapper.generateSourceMap({
            originalCode,
            nameMap,
            minifiedCode,
        });
        console.log()
sourcemapper.js
    generateSourceMap
        ast
> run should show minifiedcode ast
    handleDeclaration
    #traverse
    generateSourceMap
        traverse
    console.log minifiedItems
> run should printout map
    generateSourceMapData
        all
    generateSourceMap
        return sourcemap
processor
    console.log(sourceMapContent)
> should print sourcemapcontent
processor
    writeFileSync
run
    console.log
> should generate files
go to https://sokra.github.io/source-map-visualization/
and visualize files

> browser and check if the source map is working
> notice that variables are not being mapped
-> firefox -> check Map
-> debug code
change the name to profession to make sure strings wont conflict with text
END :)