Gregoor · April 28, 2021 10:05
diff --git a/bench-json-loading.js b/bench-json-loading.js
 const fs = require("fs");
 const express = require("express");
 const cheerio = require("cheerio");
 const jsesc = require("jsesc");

 const BASE_HTML = `
 <!DOCTYPE html>
 <html>
  <body>
    <div>
      <button id="show-output">Show things!</button>
      <div id="output"></div>
    </div>
    <script id="app-script" defer>
      document.getElementById('show-output').addEventListener('click', () => {
        document.getElementById('output').textContent = Object.keys(window.hydration);
      });
    </script>
  </body>
 </html>
 `;

 const JSON_STRING = fs.readFileSync("1mb-test_json.json", "utf-8");

 const variants = [
  [
    "json",
    ($) =>
      $("#app-script").before(
        `<script id="hydration" type="application/json">${JSON_STRING}</script>`,
        '<script defer>window.hydration = JSON.parse(document.getElementById("hydration").textContent)</script>'
      ),
  ],
  [
    "jsesc",
    ($) =>
      $("#app-script").before(
        `<script>window.hydration = JSON.parse(${jsesc(JSON_STRING, {
          json: true,
          isScriptContext: true,
        })})</script>`
      ),
  ],
 ].map(([name, mod]) => {
  const $ = cheerio.load(BASE_HTML);
  mod($);
  return [name, $.html()];
 });

 const app = express();

 for (const [name, html] of variants) {
  app.get("/" + name, (req, res) => {
    res.send(html);
  });
 }

 const PORT = process.env.PORT || 1234;
 app.listen(PORT, () => {
  console.log("listening on", PORT);
 });
	const fs = require("fs");
	const express = require("express");
	const cheerio = require("cheerio");
	const jsesc = require("jsesc");

	const BASE_HTML = `
	<!DOCTYPE html>
	<html>
	<body>
	<div>
	<button id="show-output">Show things!</button>
	<div id="output"></div>
	</div>
	<script id="app-script" defer>
	document.getElementById('show-output').addEventListener('click', () => {
	document.getElementById('output').textContent = Object.keys(window.hydration);
	});
	</script>
	</body>
	</html>
	`;

	const JSON_STRING = fs.readFileSync("1mb-test_json.json", "utf-8");

	const variants = [
	[
	"json",
	($) =>
	$("#app-script").before(
	`<script id="hydration" type="application/json">${JSON_STRING}</script>`,
	'<script defer>window.hydration = JSON.parse(document.getElementById("hydration").textContent)</script>'
	),
	],
	[
	"jsesc",
	($) =>
	$("#app-script").before(
	`<script>window.hydration = JSON.parse(${jsesc(JSON_STRING, {
	json: true,
	isScriptContext: true,
	})})</script>`
	),
	],
	].map(([name, mod]) => {
	const $ = cheerio.load(BASE_HTML);
	mod($);
	return [name, $.html()];
	});

	const app = express();

	for (const [name, html] of variants) {
	app.get("/" + name, (req, res) => {
	res.send(html);
	});
	}

	const PORT = process.env.PORT \|\| 1234;
	app.listen(PORT, () => {
	console.log("listening on", PORT);
	});