منذ بعض الوقت كتبت موقعًا مع خلفية على
Express /Node.JS. كانت هناك مشكلة في تصغير الإجابات. لقد وجدت العديد من الحزم الجاهزة ، ولكن كل شخص لديه مشكلة - html بعد عدم تصغير القوالب. ونتيجة لذلك ، قررت كتابة دراجتي الصغيرة والأصلية -
مكتبة تصغير الويب ، والتي تسمح لك بتضمين خطاف قبل إرسالها إلى العميل وتعديل الاستجابة.
تثبيت الحزمة
npm i @dmitriym09/web-minify --save
أعتقد أن أفضل وصف لمكتبة مطور هو رمز المثال =)
مثال
minify الويب - وظيفة الوسيطة:
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; } } ]));
في هذا المثال ، سيتم اعتراض جميع الاستجابات التي تحتوي على نوع المحتوى الذي يحتوي على السلسلة الفرعية "css". تتم معالجة نص الاستجابة باستخدام
csso و
postcss و
precss و
autoprefixer . يتم تمرير السلسلة في معلمة contentType (سيتم البحث عن حدوث String.prototype.indexOf () أو RegExp (RegExp.prototype.test ()). يجب أن تُرجع معلمة minify - دالة (البيانات: String ، req: Request ، res: Response) سلسلة مع نص جديد أو وعد ، والذي يتم حله بدوره بواسطة String. في حالة الاستثناء غير الجذاب ، سيتلقى العميل رد 500.
كما سبق القول ، فإن معظم المكتبات الشعبية الموجودة ذات الوظائف المماثلة تقلل من الملفات الثابتة. ومع ذلك ، لا يعمل تصغير الردود التي تم إنشاؤها في التعليمات البرمجية (على سبيل المثال ، html بواسطة محرك القالب). إحدى المشاكل هي أنه يمكن إرسال الإجابة في أجزاء ، وعادة ما تكون هناك حاجة لمعالجة البيانات الكاملة. وفقًا لذلك ، تحتاج إلى اعتراض جميع عمليات الإرسال إلى المستخدم وجمعها ومعالجتها وإرسالها في النهاية. يجب أن يؤخذ هذا في الاعتبار عند استخدام
الويب minify : ملف تيرابايت الذي تريد إرساله إلى العميل والذي يقع تحت contentType يتراكم في الذاكرة.
أمثلة
تصغير HTML باستخدام minifier-html من اختبارات الوحدة
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) });
يتوفر
تصغير الويب على
github و
npm بموجب ترخيص MIT.
شكرا لكم على اهتمامكم! نقد والاقتراحات والتعليقات هي موضع ترحيب!