source-js-minifier
v0.0.4
Published
A CLI tool to download source code of a webpage from a URL(validated), then fix relative URLs, then minify the css stylesheets in-place, then replace in-place or concatenate its JS scripts with the minified script, & then open the resultant webpage in bro
Downloads
2
Readme
Source JS Minifier [WIP]
A CLI tool to download source code of a webpage from a URL(validated), then fix relative URLs, then minify the css stylesheets in-place, then replace in-place or concatenate its JS scripts with the minified script, & then open the resultant webpage in browser.
Implemented in NodeJS. [Demonstration Project]
Install
From npm registry:
npm install source-js-minifier
Run locally
- Download source code
npm install
from repo- Run Command
node src/app.js minify <url>
node src/app.js minify <url> --custom
=> To use custom js minifier
node src/app.js minify <url> --concatenate
=> To concatenate all js scripts (including downloaded) into one & attach minified version at the end of html body.
node src/app.js minify <url> --css
=> To perform in-place css minification.
node src/app.js minify <url> --custom --concatenate --css
=> Use all together
Note:
- Files will be saved to
./output/
Dependencies:
- Commander: CLI tool
- Downloading files: node-fetch
- JS Minifier: terser
- HTML Parser, manipulator, generator: parse5-utils
- For cross platform file opening in browser: open
- CSS minifier: clean-css
For Custom Minifier:
- JS Parser: acorn
- JS manipulator: recast
- JS Generator: astring
Custom Minifier
An attempt to develop a custom js minifier.
Functionalities to be developed:
- Remove whitespaces ---------------------- done
- Remove comments ------------------------- done
- Switch to shorthand syntax -------------- done
- Resolve constant expressions ------------ done
- Concatenate/Bundle scripts -------------- done
- Rename identifiers etc [TODO:]
- Remove unused variables & dead code [TODO:]
- if else to terenary --------------------- done
- assignment operator --------------------- done
Steps req:
- Parsing js code in AST
- AST tree traversal using recursion
- For each node perform modifications using Visitor Pattern
- Code re-generation
For exploring AST: https://astexplorer.net/
For more info on using AST: https://youtu.be/C06MohLG_3s
Extremenly helpful guide on AST manipulation: https://lihautan.com/manipulating-ast-with-javascript/
Note:
- Concepts Required: Abstract Syntax Trees of HTML & JS, DFS traversal, Visitor Pattern, Synchronous code in NodeJS
- ASTs has been extensively used because it best server the purpose.
TODOs
- Static type check, Lint, Comments, Best practices/conventions, Logging
- Write tests / unit tests
- More optimizations in Custom Minifier
- REFACTOR needed
- Relook error-handling & synchronization