2021-08-09 05:24:43 -04:00
|
|
|
const fs = require("fs/promises");
|
2021-08-08 07:01:37 -04:00
|
|
|
const https = require("https");
|
2021-08-08 09:11:05 -04:00
|
|
|
const path = require("path");
|
2021-08-09 05:24:43 -04:00
|
|
|
const results = require("./results");
|
2020-01-09 06:40:04 -05:00
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
const GRAPHS_DIR = path.join(__dirname, "graphs");
|
|
|
|
const SPEEDS_GRAPH = path.join(GRAPHS_DIR, "speeds.png");
|
|
|
|
const SIZES_GRAPH = path.join(GRAPHS_DIR, "sizes.png");
|
|
|
|
const AVERAGE_SPEEDS_GRAPH = path.join(GRAPHS_DIR, "average-speeds.png");
|
|
|
|
const AVERAGE_SIZES_GRAPH = path.join(GRAPHS_DIR, "average-sizes.png");
|
|
|
|
|
|
|
|
const speedColours = {
|
|
|
|
"minify-html": "#2e61bd",
|
|
|
|
"minify-html-onepass": "#222",
|
2020-01-09 06:40:04 -05:00
|
|
|
};
|
2021-08-08 09:11:05 -04:00
|
|
|
const defaultSpeedColour = "rgb(188, 188, 188)";
|
2020-01-09 06:40:04 -05:00
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
const sizeColours = {
|
|
|
|
"minify-html": "#2e61bd",
|
|
|
|
};
|
|
|
|
const defaultSizeColour = "rgb(188, 188, 188)";
|
2021-08-07 09:58:38 -04:00
|
|
|
|
2021-08-09 05:24:43 -04:00
|
|
|
const averageChartOptions = (label) => ({
|
2020-01-09 06:40:04 -05:00
|
|
|
options: {
|
2021-08-07 09:58:38 -04:00
|
|
|
legend: {
|
2021-08-09 05:24:43 -04:00
|
|
|
display: false,
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
|
|
|
scales: {
|
2021-08-07 07:36:09 -04:00
|
|
|
xAxes: [
|
|
|
|
{
|
2021-08-09 05:24:43 -04:00
|
|
|
barPercentage: 0.5,
|
2021-08-07 07:36:09 -04:00
|
|
|
gridLines: {
|
2021-08-09 05:24:43 -04:00
|
|
|
display: false,
|
2021-08-07 07:36:09 -04:00
|
|
|
},
|
|
|
|
ticks: {
|
2021-08-09 05:24:43 -04:00
|
|
|
fontColor: "#555",
|
2021-08-07 07:36:09 -04:00
|
|
|
fontSize: 20,
|
|
|
|
},
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 07:36:09 -04:00
|
|
|
],
|
|
|
|
yAxes: [
|
|
|
|
{
|
2021-08-09 05:24:43 -04:00
|
|
|
type: "linear",
|
|
|
|
scaleLabel: {
|
|
|
|
display: true,
|
2021-08-09 05:56:37 -04:00
|
|
|
fontColor: "#222",
|
2021-08-09 05:24:43 -04:00
|
|
|
fontSize: 24,
|
|
|
|
fontStyle: "bold",
|
|
|
|
labelString: label,
|
|
|
|
padding: 12,
|
2021-08-07 07:36:09 -04:00
|
|
|
},
|
2021-08-09 05:24:43 -04:00
|
|
|
position: "left",
|
2021-08-07 07:36:09 -04:00
|
|
|
ticks: {
|
2021-08-09 05:24:43 -04:00
|
|
|
callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
|
|
|
|
fontColor: "#222",
|
2021-08-07 07:36:09 -04:00
|
|
|
fontSize: 20,
|
|
|
|
},
|
2021-08-09 05:24:43 -04:00
|
|
|
gridLines: {
|
|
|
|
color: "#eee",
|
|
|
|
},
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 07:36:09 -04:00
|
|
|
],
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-08-09 05:24:43 -04:00
|
|
|
const breakdownChartOptions = (title) => ({
|
2021-08-07 09:58:38 -04:00
|
|
|
options: {
|
2020-01-09 06:40:04 -05:00
|
|
|
legend: {
|
2021-08-09 05:24:43 -04:00
|
|
|
display: true,
|
|
|
|
labels: {
|
|
|
|
fontColor: "#000",
|
|
|
|
fontSize: 20,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
title: {
|
|
|
|
display: true,
|
|
|
|
text: title,
|
|
|
|
fontColor: "#333",
|
|
|
|
fontSize: 24,
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
scales: {
|
|
|
|
xAxes: [
|
|
|
|
{
|
|
|
|
gridLines: {
|
2021-08-09 05:24:43 -04:00
|
|
|
color: "#f2f2f2",
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
ticks: {
|
2021-08-09 05:24:43 -04:00
|
|
|
callback: "$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$",
|
|
|
|
fontColor: "#999",
|
|
|
|
fontSize: 20,
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
yAxes: [
|
|
|
|
{
|
2021-08-09 05:24:43 -04:00
|
|
|
barPercentage: 0.5,
|
2021-08-07 09:58:38 -04:00
|
|
|
gridLines: {
|
2021-08-09 05:24:43 -04:00
|
|
|
color: "#aaa",
|
|
|
|
},
|
|
|
|
ticks: {
|
|
|
|
fontColor: "#666",
|
|
|
|
fontSize: 20,
|
2021-08-07 09:58:38 -04:00
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
2020-01-09 06:40:04 -05:00
|
|
|
},
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
const renderChart = (cfg, width, height) =>
|
2021-08-08 07:01:37 -04:00
|
|
|
new Promise((resolve, reject) => {
|
|
|
|
const req = https.request("https://quickchart.io/chart", {
|
|
|
|
method: "POST",
|
|
|
|
headers: {
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
},
|
|
|
|
});
|
|
|
|
req.on("error", reject);
|
|
|
|
req.on("response", (res) => {
|
|
|
|
const err = res.headers["x-quickchart-error"];
|
|
|
|
if (res.statusCode < 200 || res.statusCode > 299 || err) {
|
|
|
|
return reject(new Error(err || `Status ${res.statusCode}`));
|
|
|
|
}
|
|
|
|
const chunks = [];
|
|
|
|
res.on("error", reject);
|
|
|
|
res.on("data", (c) => chunks.push(c));
|
|
|
|
res.on("end", () => resolve(Buffer.concat(chunks)));
|
|
|
|
});
|
|
|
|
req.end(
|
|
|
|
JSON.stringify({
|
|
|
|
backgroundColor: "white",
|
|
|
|
chart: JSON.stringify(cfg).replaceAll(
|
|
|
|
'"$$$_____REPLACE_WITH_TICK_CALLBACK_____$$$"',
|
|
|
|
"function(value) {return Math.round(value * 10000) / 100 + '%';}"
|
|
|
|
),
|
2021-08-08 09:11:05 -04:00
|
|
|
width,
|
|
|
|
height,
|
2021-08-08 07:01:37 -04:00
|
|
|
format: "png",
|
|
|
|
})
|
|
|
|
);
|
2021-08-07 07:36:09 -04:00
|
|
|
});
|
2020-01-09 06:40:04 -05:00
|
|
|
|
|
|
|
(async () => {
|
2021-08-08 09:11:05 -04:00
|
|
|
await fs.mkdir(GRAPHS_DIR, { recursive: true });
|
2021-08-07 09:58:38 -04:00
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
const res = results.calculate();
|
2021-08-09 05:56:37 -04:00
|
|
|
const speedMinifiers = [
|
|
|
|
"html-minifier",
|
|
|
|
"minimize",
|
|
|
|
"minify-html",
|
|
|
|
"minify-html-onepass",
|
|
|
|
];
|
2021-08-08 09:11:05 -04:00
|
|
|
const sizeMinifiers = ["minimize", "html-minifier", "minify-html"];
|
|
|
|
const inputs = Object.keys(res.inputSizes).sort();
|
|
|
|
|
|
|
|
await fs.writeFile(
|
|
|
|
AVERAGE_SPEEDS_GRAPH,
|
|
|
|
await renderChart(
|
|
|
|
{
|
|
|
|
type: "bar",
|
|
|
|
data: {
|
2021-08-09 05:24:43 -04:00
|
|
|
labels: speedMinifiers,
|
2021-08-08 09:11:05 -04:00
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
backgroundColor: speedMinifiers.map(
|
|
|
|
(n) => speedColours[n] ?? defaultSpeedColour
|
|
|
|
),
|
|
|
|
data: speedMinifiers.map(
|
|
|
|
(m) => res.minifierAvgOps[m] / res.maxMinifierAvgOps
|
|
|
|
),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
...averageChartOptions("Performance"),
|
2021-08-08 07:01:37 -04:00
|
|
|
},
|
2021-08-08 09:11:05 -04:00
|
|
|
1024,
|
|
|
|
768
|
|
|
|
)
|
2021-08-08 07:01:37 -04:00
|
|
|
);
|
2020-01-18 09:14:30 -05:00
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
await fs.writeFile(
|
|
|
|
AVERAGE_SIZES_GRAPH,
|
|
|
|
await renderChart(
|
|
|
|
{
|
|
|
|
type: "bar",
|
|
|
|
data: {
|
2021-08-09 05:24:43 -04:00
|
|
|
labels: sizeMinifiers,
|
2021-08-08 09:11:05 -04:00
|
|
|
datasets: [
|
|
|
|
{
|
|
|
|
backgroundColor: sizeMinifiers.map(
|
|
|
|
(n) => sizeColours[n] ?? defaultSizeColour
|
|
|
|
),
|
|
|
|
data: sizeMinifiers.map((m) => res.minifierAvgReduction[m]),
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
...averageChartOptions("Reduction"),
|
2021-08-08 07:01:37 -04:00
|
|
|
},
|
2021-08-08 09:11:05 -04:00
|
|
|
1024,
|
|
|
|
768
|
|
|
|
)
|
2021-08-08 07:01:37 -04:00
|
|
|
);
|
2020-01-18 09:14:30 -05:00
|
|
|
|
2021-08-08 09:11:05 -04:00
|
|
|
await fs.writeFile(
|
|
|
|
SPEEDS_GRAPH,
|
|
|
|
await renderChart(
|
|
|
|
{
|
|
|
|
type: "horizontalBar",
|
|
|
|
data: {
|
|
|
|
labels: inputs,
|
|
|
|
datasets: speedMinifiers.map((minifier) => ({
|
|
|
|
label: minifier,
|
|
|
|
data: inputs.map(
|
|
|
|
(input) =>
|
2021-08-09 05:56:37 -04:00
|
|
|
res.perInputOps[minifier][input] /
|
|
|
|
res.perInputOps["minify-html"][input]
|
2021-08-08 09:11:05 -04:00
|
|
|
),
|
|
|
|
})),
|
|
|
|
},
|
2021-08-09 05:56:37 -04:00
|
|
|
...breakdownChartOptions(
|
|
|
|
"Operations per second, relative to minify-html"
|
|
|
|
),
|
2021-08-08 09:11:05 -04:00
|
|
|
},
|
2021-08-09 05:31:36 -04:00
|
|
|
900,
|
|
|
|
1600
|
2021-08-08 09:11:05 -04:00
|
|
|
)
|
|
|
|
);
|
|
|
|
|
|
|
|
await fs.writeFile(
|
|
|
|
SIZES_GRAPH,
|
|
|
|
await renderChart(
|
|
|
|
{
|
|
|
|
type: "horizontalBar",
|
|
|
|
data: {
|
|
|
|
labels: inputs,
|
|
|
|
datasets: sizeMinifiers.map((minifier) => ({
|
|
|
|
label: minifier,
|
2021-08-09 05:56:37 -04:00
|
|
|
data: inputs.map(
|
|
|
|
(input) =>
|
|
|
|
res.perInputReduction[minifier][input] /
|
|
|
|
res.perInputReduction["minify-html"][input]
|
|
|
|
),
|
2021-08-08 09:11:05 -04:00
|
|
|
})),
|
|
|
|
},
|
2021-08-09 05:24:43 -04:00
|
|
|
...breakdownChartOptions("Size reduction, relative to minify-html"),
|
2021-08-08 07:01:37 -04:00
|
|
|
},
|
2021-08-09 05:31:36 -04:00
|
|
|
900,
|
|
|
|
1600
|
2021-08-08 09:11:05 -04:00
|
|
|
)
|
2021-08-08 07:01:37 -04:00
|
|
|
);
|
2020-01-09 06:40:04 -05:00
|
|
|
})();
|