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
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 |
The emails above are generated from unlayer.
License
See LICENSE