Beberapa waktu lalu saya menulis situs dengan backend di
Express /Node.JS. Ada masalah dengan minimisasi jawaban. Saya menemukan banyak paket yang sudah jadi, tetapi semua orang memiliki masalah - html setelah templat tidak diperkecil. Sebagai hasilnya, saya memutuskan untuk menulis sepeda kecil dan asli saya sendiri -
perpustakaan web-minify , yang memungkinkan Anda untuk memasang kait sebelum mengirimkannya ke klien dan memodifikasi responsnya.
Instalasi paket
npm i @dmitriym09/web-minify --save
Saya pikir deskripsi terbaik dari perpustakaan untuk pengembang adalah kode contoh =)
Contoh
web-minify - fungsi 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; } } ]));
Dalam contoh ini, semua respons dengan Tipe Konten yang berisi "css" substring akan dicegat. Badan respons diproses menggunakan
csso ,
postcss ,
precss ,
autoprefixer . String dilewatkan dalam parameter contentType (entri akan dicari untuk String.prototype.indexOf ()) atau RegExp (RegExp.prototype.test ()). Parameter minify - Fungsi (data: String, req: Permintaan, res: Respons) fungsi, harus mengembalikan String dengan badan baru atau Janji, yang pada gilirannya diselesaikan oleh String. Dalam kasus pengecualian yang tidak menangkap, klien akan menerima respons 500.
Seperti yang sudah dikatakan, sebagian besar perpustakaan populer yang ada dengan fungsionalitas yang sama dengan baik meminimalkan file statis. Namun, minifikasi respons yang dihasilkan dalam kode (misalnya, html oleh mesin templat) tidak berfungsi. Salah satu masalah adalah bahwa jawabannya dapat dikirim dalam beberapa bagian, dan untuk memproses biasanya data yang lengkap diperlukan. Oleh karena itu, Anda perlu mencegat semua pengiriman ke pengguna, mengumpulkan dan memprosesnya dan mengirimkannya pada akhirnya. Ini harus diperhitungkan saat menggunakan
web-minify : file terabyte yang ingin Anda kirim ke klien dan yang berada di bawah contentType terakumulasi dalam memori.
Contohnya
HTML minification menggunakan html-minifier dari unit test
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) });
Modifikasi ke JSON dan kode pengembalian Janji dari unit test
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 tersedia di
github dan dalam
npm di bawah lisensi MIT.
Terima kasih atas perhatian anda! Kritik, saran dan komentar dipersilahkan!