Công cụ giảm kích thước HTML
Minimize là một công cụ giảm kích thước HTML dựa trên node-htmlparser. Sự phụ thuộc này sẽ đảm bảo đầu ra là vững và chính xác. Minimize tập trung vào HTML5 và sẽ không hỗ trợ các bản nháp HTML cũ hơn. Điều này không đáng đối tượng và web nên tiến lên phía trước. Hiện tại, công cụ giảm kích thước HTML chỉ có thể sử dụng ở phía máy chủ. Giảm kích thước phía máy khách sẽ được thêm vào trong một phiên bản sau này.
Minimize không phân tích cú pháp PHP trong mã nguồn HTML hoặc tệp mẫu nguyên gốc. Mẫu nguyên gốc không phải là HTML hợp lệ và điều này nằm ngoài phạm vi của Minimize. _ Đầu ra_ của bộ mẫu nên được phân tích cú pháp và giảm kích thước.
Tính năng
- giảm kích thước HTML nhanh chóng và ổn định (không hỗ trợ PHP hoặc các mẫu)
- có khả năng cấu hình cao
- giao diện dòng lệnh có thể sử dụng với stdin và các tệp tin
- có thể phân biệt được các ghi chú IE có điều kiện và/hoặc SSI
- dựa trên nền tảng của htmlparser2
- giao diện có thể cắm mắc cho phép kết nối vào từng phần tử
Sử dụng
Để lấy nội dung đã giảm kích thước, hãy đảm bảo cung cấp một hàm gọi lại. Tùy chọn, một đối tượng tùy chọn có thể được cung cấp. Tất cả các tùy chọn được liệt kê dưới đây và mặc định là false.
var Minimize = require('minimize')
, content = new Minimize().parse(content);
console.log(content);
Sử dụng bất đồng bộ
Đơn giản chỉ cần truyền một hàm gọi lại làm đối số thứ hai. Điều này quan trọng khi các plugin thực hiện các hoạt động bất đồng bộ.
var Minimize = require('minimize')
, minimize = new Minimize();
minimize.parse(content, function (error, data) {
console.log(data);
});
Plugin Gulp
- gulp-minimize: Plugin Gulp dựa trên Minimize.
Tùy chọn
Danh sách các tùy chọn có sẵn. Lưu ý rằng tất cả các tùy chọn đều được đặt là false theo mặc định và cần được bật rõ ràng bằng cách cung cấp true. Ví dụ empty: true.
- empty (rỗng)
- cdata
- comments (ghi chú)
- ssi
- conditionals (các điều kiện)
- rỗng
- trích dẫn
- không chặt chẽ
- dom (mô hình tài liệu)
- xmlMode (chế độ XML)
- lowerCaseAttributeNames (tên thuộc tính viết thường)
- lowerCaseTags (thẻ viết thường)
Bộ phân tích tùy chỉnh
Cung cấp một phiên bản tùy chỉnh để thực hiện phân tích HTML là có thể. Điều này có thể hữu ích nếu HTML chứa SVG hoặc nếu bạn cần cài đặt cụ thể cho trình phân tích.
var Minimize = require('minimize')
, html = require('htmlparser2')
, minimize = new Minimize(
new html.Parser(
new html.FeedHandler(minimize.emits('read')),
{ /* options */ }
)
);
minimize.parse(content, function (error, data) {
console.log(data);
});
Tùy chọn
Rỗng
Thường thì các thuộc tính rỗng có thể bị loại bỏ, theo mặc định tất cả đều bị loại bỏ, trừ các thuộc tính HTML5 data-* và thuộc tính microdata. Để giữ lại các phần tử rỗng bất kể giá trị, hãy làm như sau:
var Minimize = require('minimize')
, minimize = new Minimize({ empty: true });
minimize.parse(
'<h1 id=""></h1>',
function (error, data) {
// data output: <h1 id=""></h1>
}
);
CDATA
CDATA chỉ cần thiết để HTML được phân tích cú pháp như XML hợp lệ. Đối với các trang web thông thường, điều này hiếm khi xảy ra, do đó CDATA xung quanh mã JavaScript có thể được bỏ qua. Theo mặc định, CDATA sẽ bị loại bỏ, nếu bạn muốn giữ lại nó, hãy truyền true:
var Minimize = require('minimize')
, minimize = new Minimize({ cdata: true });
minimize.parse(
'<script type="text/javascript">\n//<![CDATA[\n...code...\n//]]>\n</script>',
function (error, data) {
// data output: <script type=text/javascript>//<![CDATA[\n...code...\n//]]></script>
}
);
Ghi chú
Ghi chú trong HTML thường hữu ích trong quá trình phát triển. Ẩn các ghi chú trong sản xuất là cách lành mạnh, an toàn và giảm truyền dữ liệu. Nếu bạn muốn giữ lại chúng, ví dụ như để hiển thị một điều bất ngờ thú vị, hãy đặt tùy chọn thành true. Giữ lại các ghi chú cũng sẽ giữ lại bất kỳ Lệnh Bao Gồm Phía Máy Chủ hoặc các tuyên bố IE có điều kiện nào.
var Minimize = require('minimize')
, minimize = new Minimize({ comments: true });
minimize.parse(
'<!-- some HTML comment -->\n <div class="slide nodejs">',
function (error, data) {
// data output: <!-- some HTML comment --><div class="slide nodejs">
}
);
Bao Gồm Phía Máy Chủ (SSI)
Các bao gồm phía máy chủ là một tập hợp đặc biệt các lệnh được hỗ trợ bởi một số máy chủ web. Cú pháp rất giống với ghi chú HTML thông thường. Minimize có thể được cấu hình để giữ lại các ghi chú SSI.
var Minimize = require('minimize')
, minimize = new Minimize({ ssi: true });
minimize.parse(
'<!--#include virtual="../quote.txt" -->\n <div class="slide nodejs">',
function (error, data) {
// data output: <!--#include virtual="../quote.txt" --><div class="slide nodejs">
}
);
Các Điều Kiện
Các ghi chú có điều kiện chỉ hoạt động trong IE và do đó rất thích hợp để đưa ra các hướng dẫn đặc biệt dành riêng cho IE. Minimize có thể được cấu hình để giữ lại những ghi chú này. Nhưng vì ghi chú chỉ hoạt động đến IE9 (bao gồm cả IE9), theo mặc định là loại bỏ các điều kiện.
var Minimize = require('minimize')
, minimize = new Minimize({ conditionals: true });
minimize.parse(
"<!--[if ie6]>Cover microsofts' ass<![endif]-->\n<br>",
function (error, data) {
// data output: <!--[if ie6]>Cover microsofts' ass<![endif]-->\n<br>
}
);
Dự phòng
Các thuộc tính dự phòng thuộc loại boolean, giá trị có thể bị bỏ qua trong HTML5. Để giữ nguyên các thuộc tính để hỗ trợ các trình duyệt cũ hơn, hãy cung cấp:
var Minimize = require('minimize')
, minimize = new Minimize({ spare: true });
minimize.parse(
'<input type="text" disabled="disabled"></h1>',
function (error, data) {
// data output: <input type=text disabled=disabled></h1>
}
);
Trích dẫn
Trích dẫn luôn được thêm vào xung quanh các thuộc tính có khoảng trắng hoặc dấu bằng trong giá trị của họ. Nhưng nếu bạn cần trích dẫn xung quanh tất cả các thuộc tính, chỉ cần truyền quotes:true, như dưới đây.
var Minimize = require('minimize')
, minimize = new Minimize({ quotes: true });
minimize.parse(
'<p class="paragraph" id="title">\n Some content\n </p>',
function (error, data) {
// data output: <p class="paragraph" id="title">Some content</p>
}
);
Mất dạng
Minimize chỉ giữ lại dấu cách trắng trong các phần tử cấu trúc và loại bỏ tất cả các dấu cách trắng dư thừa khác. Tùy chọn này hữu ích nếu bạn cần dấu cách trắng để giữ luồng giữa các phần tử văn bản và đầu vào. Nhược điểm: các dấu cách trắng hoặc dòng mới sau các phần tử mức khối cũng sẽ có một dấu cách trắng cuối cùng.
var Minimize = require('minimize')
, minimize = new Minimize({ loose: true });
minimize.parse(
'<h1>title</h1> <p class="paragraph" id="title">\n content\n </p> ',
function (error, data) {
// data output: <h1>title</h1> <p class="paragraph" id="title"> content </p> '
}
);
dom (mô hình tài liệu)
Minimize sử dụng !(htmlparser2)[https://github.com/fb55/htmlparser2] để phân tích cú pháp mô hình tài liệu. Tùy chọn dom cho phép tùy chỉnh htmlparser2.
var Minimize = require('minimize')
, minimize = new Minimize({ dom: { lowerCaseAttributeNames: false }});
minimize.parse(
'<a *ngIf="bool">link</a>',
function (error, data) {
// data output: <a *ngIf=bool>link</a> '
}
);
Các Plugin
Đăng ký một bộ các plugin sẽ chạy trên mỗi phần tử được lặp qua. Các plugin được chạy theo thứ tự, lỗi sẽ dừng quá trình lặp và gọi hàm gọi hoàn thành.
var Minimize = require('minimize')
, minimize = new Minimize({ plugins: [{
id: 'remove',
element: function element(node, next) { // callback is optional
if (node.type === 'text') delete node.data;
next();
}
}]});
minimize.parse(
'<h1>title</h1>',
function (error, data) {
// data output: <h1></h1>
}
);
Lưu ý: các plugin không kiểm soát quá trình của Minimize. Cấu trúc DOM được phân tích cú pháp bởi htmlparser2 được giảm thiểu không đồng bộ. Mỗi phần tử được chuyển đến phương thức element của plugin. Do đó, các plugin hoàn toàn kiểm soát các thuộc tính của mỗi node vì đối tượng luôn có tham chiếu trong JavaScript.
Các Plugin Có Sẵn
- uglifyjs: giảm kích thước nội dung script
- handlebars: cho phép thẻ mẫu handlebar
Kiểm tra
Kiểm tra có thể dễ dàng chạy bằng cách sử dụng một trong các lệnh sau đây. Travis.ci được sử dụng cho tích hợp liên tục.
make test
make test-watch
npm test
Sự đánh giá
Người đóng góp
Minimize bị ảnh hưởng bởi HTML minifier của kangax. Mô-đun này phân tích cú pháp DOM dưới dạng chuỗi thay vì là một đối tượng. Tuy nhiên, việc giữ luồng là khó khăn hơn nếu DOM được phân tích cú pháp một cách tuần tự. Minimize chưa sẵn sàng cho phía máy khách. Minifier của Kangax cũng cung cấp một số tùy chọn bổ sung như kiểm tra lỗi. Minimize sẽ tập trung hoàn toàn vào công việc tối ưu hóa. Minimize đã được sử dụng trong môi trường sản xuất bởi Nodejitsu.
node-htmlparser của fb55 được sử dụng để tạo một biểu diễn đối tượng của DOM.
Chi tiết Tải về:
Tác giả: Swaagie
Mã nguồn: https://github.com/Swaagie/minimize
Giấy phép: MIT license
