npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

  1. Download source code
  2. npm install from repo
  3. 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:

  1. Remove whitespaces ---------------------- done
  2. Remove comments ------------------------- done
  3. Switch to shorthand syntax -------------- done
  4. Resolve constant expressions ------------ done
  5. Concatenate/Bundle scripts -------------- done
  6. Rename identifiers etc [TODO:]
  7. Remove unused variables & dead code [TODO:]
  8. if else to terenary --------------------- done
  9. assignment operator --------------------- done

Steps req:

  1. Parsing js code in AST
  2. AST tree traversal using recursion
  3. For each node perform modifications using Visitor Pattern
  4. 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

  1. Static type check, Lint, Comments, Best practices/conventions, Logging
  2. Write tests / unit tests
  3. More optimizations in Custom Minifier
  4. REFACTOR needed
  5. Relook error-handling & synchronization