Email-minifier NPM

EmailMinifier

EmailMinifier is a well-tested email minifier based on TypeScript for browser and Node.js

https://github.com/luckrnx09/email-minifier/assets/113882203/2f2ad00e-73d8-437e-b357-7505b9d9e78a

As a quick start, you can Try it online 🚀

Why not HTMLMinifier

HTMLMinifier is a great tool for compressing HTML. But email is different from HTML in many ways, compression of HTML is often not the best solution.

JavaScript code is not supported or required in emails.
The interactive behavior of the email is very limited, most HTML attributes are useless for the email but still load them when user open it.
Some email clients crop oversized emails (e.g. Gmail) and the style of the email is broken after cropping, which is extremely detrimental to marketing.
...

Installation

You can use the tool you like to install EmailMinifier:

npm

npm install email-minifier

yarn

yarn add email-minifier

pnpm

pnpm install email-minifier

Usage

For both browser and Node.js if you use ESM:

import { EmailMinifier } from 'email-minifier';
(async () => { 
    const emailBody = `<div class="hello"></div>`;
    const options = {};
    const result = await new EmailMinifier(emailBody).minify(options);
    console.log(result);
})();

For Node.js only if you use CommonJS:

const { EmailMinifier } = require('email-minifier');
(async () => { 
    const emailBody = `<div class="hello"></div>`;
    const options = {};
    const result = await new EmailMinifier(emailBody).minify(options);
    console.log(result);
})();

The minify() method will returns a Promise with the shape as follow:

{
    original: '', // the original email body string
    minified: '', // minified email body string will be here, if no tasks ran, it'll be null
    tasks: [] // all ran tasks when minify email body
}

All available properties for options are as follows

Option	Description	Default
`minifyIds`	Minifiy id attributes used in style tags	`true`
`minifyClasses`	Minifiy class attributes used in style tags	`true`
`minifyDatasets`	Minifiy data-* attributes used in style tags	`true`
`removeUnusedAttrs`	Remove custom attributes unused in style tags	`false`
`minifyStyles`	Minifiy CSS content for all the style tags	`true`

For removeUnusedAttrs, if you want to remove the specific unused attributes, you can provide an array with RegExp instances to match them.

For example:

const options = {
    removeUnusedAttrs: [
        new RegExp('custom-test-id') // Remove `custom-test-id` attributes if they not used in style tags
    ]
};

Performance

The following table shows the statistics in the Node.js environment | Email | Original Size | Minified Size | Elapsed Time | | ----------------------------- | ------------- | ------------- | ------------ | |Holiday Cheer|33.09kb|32.36kb|580.30ms| |Membership Discount|104.00kb|37.97kb|93.61ms| |Movies for Christmas|289.47kb|58.30kb|138.13ms|