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

asset-compressor

v1.0.0

Published

A very simple utility to compress all your assets into Brotli & Gzip compressed files ready to be served via webserver.

Downloads

2

Readme

Asset Compressor

A very simple utility to compress all your assets into Brotli & Gzip ready to be served via webserver.

Usage

const compressAssets = require('asset-compressor');
const options = {
    dirs: ["public/img"],
    threshold: 5 * 1024,
    minRatio: 0.9,
    onProcessed: (file) => {
        console.log("c", file);
    },
    onBrotliProcessed: (file) => {
        console.log("a", file);
    },
    onGzipProcessed: (file) => {
        console.log("b", file)
    }
};

compressAssets(options).then(() => console.log("Completed!"));
  • The application will traverse through the directories given in options.dirs recursively and find all assets that can be compressed with better ratio than options.minRatio
  • For each file
    • It tries to first generate the Gzip version of the file with *.gz file extension. On each completed gzip, it tries to call options.onGzipProcessed if present. It also logs the result into the console in human readable format.
    • Then it tries to generate the Brotli version of the file with *.br file extension. After finishing, it tries to call option.onBrotliProcessed. It also logs the result into the console in human readable format.
    • It then calls the options.onProcessed with object including filePath, skipped (true|false), brotli (object), gzip (object)

Typical usage with apache2

# Specify gzip-encoded assets
<Files *.js.gz>
    AddType "text/javascript" .gz
    AddEncoding gzip .gz
</Files>
<Files *.css.gz>
    AddType "text/css" .gz
    AddEncoding gzip .gz
</Files>
<Files *.svg.gz>
    AddType "image/svg+xml" .gz
    AddEncoding gzip .gz
</Files>
<Files *.png.gz>
    AddType "image/png" .gz
    AddEncoding gzip .gz
</Files>
<Files *.jpg.gz>
    AddType "image/jpeg" .gz
    AddEncoding gzip .gz
</Files>
<Files *.html.gz>
    AddType "text/html" .gz
    AddEncoding gzip .gz
</Files>

# Specify Brotli-encoded assets
<Files *.js.br>
    AddType "text/javascript" .br
    AddEncoding br .br
</Files>
<Files *.png.br>
    AddType "image/png" .br
    AddEncoding br .br
</Files>
<Files *.jpg.br>
    AddType "image/jpeg" .br
    AddEncoding br .br
</Files>

<Files *.css.br>
    AddType "text/css" .br
    AddEncoding br .br
</Files>
<Files *.svg.br>
    AddType "image/svg+xml" .br
    AddEncoding br .br
</Files>
<Files *.html.br>
    AddType "text/html" .br
    AddEncoding br .br
</Files>

<IfModule mod_headers.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

RewriteEngine On
# Serve pre-compressed Brotli assets
RewriteCond %{HTTP:Accept-Encoding} br
RewriteCond %{REQUEST_FILENAME}.br -f
RewriteRule ^(.*)$ $1.br [L]
# Serve pre-compressed gzip assets
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [L]
</IfModule>