Некоторое время назад писал сайт с бэкендом на Express/Node.JS. Возникла проблема с минификацией ответов. Нашел много готовых пакетов, но у всех была проблема — не минифицировался html после шаблонов. В итоге принял решение написать свой маленький и родной велосипед — библиотеку web-minify, позволяющую встроить хук перед отправкой клиенту и модифицировать ответ.
Думаю, самое лучшее описание библиотеки для разработчика — пример кода=)
web-minify — middleware-функция:
В данном примере будут перехватываются все ответы с Content-Type, содержащие подстроку «css». Тело ответа обрабатывается с помощью csso, postcss, precss, autoprefixer. В параметре contentType передается String (будет искаться вхождение String.prototype.indexOf()) или RegExp (RegExp.prototype.test()). Параметр minify — функция Function(data:String, req:Request, res:Response), должна возвращать String с новым телом или Promise, который в свою очередь разрешается String. При неотловленом исключении клиент получит ответ 500.
Как уже сказал, большинство существующих популярных библиотек с похожим функционалом хорошо минифицирует статические файлы. Однако минификация сгенерированных в коде (например html шаблонизатором) ответов не работает. Одна из проблем — ответ может отправляться частями, а для обработки обычно нужны полные данные. Соответственно нужно перехватывать все отправки пользователю, собирать и уже в конце обрабатывать и отсылать. Это нужно учитывать при использовании web-minify: тот терабайтный файл, который вы хотите отправить клиенту и который попадает под contentType, накапливаться в памяти.
Web-minify доступна на github и в npm под лицензией MIT.
Спасибо за внимание! Критика, предложения и комментарии приветствуются!
Установка пакета
npm i @dmitriym09/web-minify --saveДумаю, самое лучшее описание библиотеки для разработчика — пример кода=)
Пример
web-minify — middleware-функция:
const htmlminify = require('html-minifier').minify;
const csso = require('csso').minify;
const postcss = require('postcss');
const precss = require('precss');
const autoprefixer = require('autoprefixer');
const minify = require('web-minify');
app.use(minify([
{
contentType: /css/,
minify: async (data, req, res) => {
let resData = (await postcss([precss, autoprefixer]).process(data, { from: undefined })).css;
resData = csso(resData).css;
return resData;
}
}
]));В данном примере будут перехватываются все ответы с Content-Type, содержащие подстроку «css». Тело ответа обрабатывается с помощью csso, postcss, precss, autoprefixer. В параметре contentType передается String (будет искаться вхождение String.prototype.indexOf()) или RegExp (RegExp.prototype.test()). Параметр minify — функция Function(data:String, req:Request, res:Response), должна возвращать String с новым телом или Promise, который в свою очередь разрешается String. При неотловленом исключении клиент получит ответ 500.
Как уже сказал, большинство существующих популярных библиотек с похожим функционалом хорошо минифицирует статические файлы. Однако минификация сгенерированных в коде (например html шаблонизатором) ответов не работает. Одна из проблем — ответ может отправляться частями, а для обработки обычно нужны полные данные. Соответственно нужно перехватывать все отправки пользователю, собирать и уже в конце обрабатывать и отсылать. Это нужно учитывать при использовании web-minify: тот терабайтный файл, который вы хотите отправить клиенту и который попадает под contentType, накапливаться в памяти.
Примеры
Минификация HTML с помощью html-minifier из юнит-тестов
const htmlminify = require('html-minifier').minify;
it('HTML', (done) => {
const app = createServer([minify([
{
contentType: 'html',
minify: (data) => {
let res = htmlminify(data, {
removeAttributeQuotes: true,
collapseWhitespace: true,
conservativeCollapse: false,
decodeEntities: true,
keepClosingSlash: false,
preserveLineBreaks: false,
preventAttributesEscapin,
processConditionalComments: true,
removeAttributeQuotes: true,
removeComments: true,
trimCustomFragments: true,
useShortDoctype: true
});
return res;
}
}
])], function(req, res) {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Test</h1>
<p>Test</p>
</body>`);
});
request(app)
.get('/')
.set('Accept', 'text/html; charset=utf-8')
.expect('Content-Type', 'text/html; charset=utf-8')
.expect('<!doctype html><html lang=en><head><meta charset=utf-8></head><body><h1>Test</h1><p>Test</p></body></html>')
.expect(200)
.end(done)
});Модификации JSON и кода ответа с возвратом Promise из юнит-тестов
it('JSON', (done) => {
const app = createServer([minify([
{
contentType: /json/,
minify: (data, req, res) => {
return new Promise(function(resolve, reject) {
try {
res.statusCode = 456;
let o = JSON.parse(data);
o.dt = new Date('2018-09-28T11:05:13.492Z')
resolve(JSON.stringify(o))
}
catch(exc) {
reject(exc)
}
})
}
}
])], function(req, res) {
res.setHeader('Content-Type', 'application/json; charset=utf-8');
res.end(JSON.stringify({a: 12}));
});
request(app)
.get('/')
.set('Accept', 'applicatio3n/json; charset=utf-8')
.expect('Content-Type', 'application/json; charset=utf-8')
.expect('{"a":12,"dt":"2018-09-28T11:05:13.492Z"}')
.expect(456)
.end(done)
});Web-minify доступна на github и в npm под лицензией MIT.
Спасибо за внимание! Критика, предложения и комментарии приветствуются!