Skip to content

Commit

Permalink
perf: build browser bundles at build-time
Browse files Browse the repository at this point in the history
  • Loading branch information
KuznetsovRoman committed May 8, 2024
1 parent 1ac9d1b commit 37abf5f
Show file tree
Hide file tree
Showing 23 changed files with 692 additions and 306 deletions.
607 changes: 480 additions & 127 deletions package-lock.json

Large diffs are not rendered by default.

20 changes: 11 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
"typings"
],
"scripts": {
"build": "tsc --build && npm run copy-static && npm run build-bundle -- --minify",
"build-bundle": "esbuild ./src/bundle/index.ts --outdir=./build/src/bundle --bundle --format=cjs --platform=node --target=ES2021",
"copy-static": "copyfiles 'src/browser/client-scripts/*' build",
"build": "tsc --build && npm run build-bundles",
"build-node-bundle": "esbuild ./src/bundle/index.ts --outdir=./build/src/bundle --bundle --format=cjs --platform=node --target=ES2021",
"build-browser-bundle": "node ./src/browser/client-scripts/build.js",
"build-bundles": "concurrently -c 'auto' 'npm:build-browser-bundle' 'npm:build-node-bundle --minify'",
"check-types": "tsc --project tsconfig.spec.json",
"clean": "rimraf build/ *.tsbuildinfo",
"lint": "eslint --cache . && prettier --check .",
Expand All @@ -24,9 +25,9 @@
"preversion": "npm run lint && npm test",
"commitmsg": "commitlint -e",
"release": "standard-version",
"watch": "npm run copy-static && concurrently -c 'auto' 'npm:watch:src' 'npm:watch:bundle'",
"watch": "npm run build-browser-bundle && concurrently -c 'auto' 'npm:watch:src' 'npm:watch:bundle'",
"watch:src": "tsc --build --watch",
"watch:bundle": "npm run build-bundle -- --watch"
"watch:bundle": "npm run build-node-bundle -- --watch"
},
"repository": {
"type": "git",
Expand Down Expand Up @@ -56,9 +57,7 @@
"@wdio/types": "8.21.0",
"@wdio/utils": "8.35.0",
"@wdio/utils-cjs": "npm:@wdio/utils@7.26.0",
"aliasify": "1.9.0",
"bluebird": "3.5.1",
"browserify": "13.3.0",
"chalk": "2.4.2",
"clear-require": "1.0.1",
"debug": "2.6.9",
Expand Down Expand Up @@ -86,7 +85,6 @@
"strftime": "0.10.2",
"strip-ansi": "6.0.1",
"temp": "0.8.3",
"uglifyify": "3.0.4",
"urijs": "1.19.11",
"url-join": "4.0.1",
"vite": "5.1.6",
Expand All @@ -107,6 +105,7 @@
"@types/babel__code-frame": "7.0.6",
"@types/babel__core": "7.20.5",
"@types/bluebird": "3.5.38",
"@types/browserify": "12.0.40",
"@types/chai": "4.3.4",
"@types/chai-as-promised": "7.1.5",
"@types/debug": "4.1.12",
Expand All @@ -121,7 +120,9 @@
"@types/url-join": "4.0.3",
"@typescript-eslint/eslint-plugin": "6.12.0",
"@typescript-eslint/parser": "6.12.0",
"aliasify": "1.9.0",
"app-module-path": "2.2.0",
"browserify": "13.3.0",
"chai": "4.2.0",
"chai-as-promised": "7.1.1",
"concurrently": "8.2.2",
Expand All @@ -145,7 +146,8 @@
"standard-version": "9.5.0",
"ts-node": "10.9.1",
"type-fest": "3.11.1",
"typescript": "5.3.2"
"typescript": "5.3.2",
"uglifyify": "3.0.4"
},
"peerDependencies": {
"ts-node": ">=10.5.0"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
/* global window, document, navigator */

(function (window) {
"use strict";

Expand Down Expand Up @@ -58,7 +60,7 @@
var features = {
needsCompatLib: needsCompatLib(),
pixelRatio: window.devicePixelRatio,
innerWidth: getInnerWidth()
innerWidth: getInnerWidth(),
};

return features;
Expand Down
6 changes: 3 additions & 3 deletions src/browser/calibrator.js → src/browser/calibrator/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ const path = require("path");
const Promise = require("bluebird");
const _ = require("lodash");
const looksSame = require("looks-same");
const { CoreError } = require("./core-error");
const { CoreError } = require("../core-error");

const clientScriptCalibrate = fs.readFileSync(path.join(__dirname, "client-scripts", "calibrate.js"), "utf8");
const DIRECTION = { FORWARD: "forward", REVERSE: "reverse" };

module.exports = class Calibrator {
constructor() {
this._cache = {};
this._script = fs.readFileSync(path.join(__dirname, "calibrate-client-script.js"), "utf8");
}

/**
Expand All @@ -25,7 +25,7 @@ module.exports = class Calibrator {
}

return Promise.resolve(browser.open("about:blank"))
.then(() => browser.evalScript(clientScriptCalibrate))
.then(() => browser.evalScript(this._script))
.then(features => [features, browser.captureViewportImage()])
.spread(async (features, image) => {
const { innerWidth, pixelRatio } = features;
Expand Down
1 change: 0 additions & 1 deletion src/browser/client-bridge/client-bridge.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
"use strict";

const Promise = require("bluebird");
const { ClientBridgeError } = require("./error");

module.exports = class ClientBridge {
Expand Down
55 changes: 17 additions & 38 deletions src/browser/client-bridge/index.js
Original file line number Diff line number Diff line change
@@ -1,46 +1,25 @@
"use strict";

const path = require("path");
const Promise = require("bluebird");
const browserify = require("browserify");
const fs = require("fs");
const ClientBridge = require("./client-bridge");

const bundlesCache = {};

exports.ClientBridge = ClientBridge;

exports.build = (browser, opts = {}) => {
const script = browserify({
entries: "./index",
basedir: path.join(__dirname, "..", "client-scripts"),
});

script.transform(
{
sourcemap: false,
global: true,
compress: { screw_ie8: false }, // eslint-disable-line camelcase
mangle: { screw_ie8: false }, // eslint-disable-line camelcase
output: { screw_ie8: false }, // eslint-disable-line camelcase
},
"uglifyify",
);

const lib = opts.calibration && opts.calibration.needsCompatLib ? "./lib.compat.js" : "./lib.native.js";
const ignoreAreas = opts.supportDeprecated ? "./ignore-areas.deprecated.js" : "./ignore-areas.js";

script.transform(
{
aliases: {
"./lib": { relative: lib },
"./ignore-areas": { relative: ignoreAreas },
},
verbose: false,
},
"aliasify",
);

return Promise.fromCallback(cb => script.bundle(cb)).then(buf => {
const scripts = buf.toString();

return ClientBridge.create(browser, scripts);
});
exports.build = async (browser, opts = {}) => {
const needsCompatLib = opts.calibration && opts.calibration.needsCompatLib;

const scriptFileName = needsCompatLib ? "bundle.compat.js" : "bundle.js";

if (bundlesCache[scriptFileName]) {
return ClientBridge.create(browser, bundlesCache[scriptFileName]);
}

const scriptFilePath = path.join(__dirname, "..", "client-scripts", scriptFileName);
const bundle = await fs.promises.readFile(scriptFilePath, { encoding: "utf8" });
bundlesCache[scriptFileName] = bundle;

return ClientBridge.create(browser, bundle);
};
69 changes: 69 additions & 0 deletions src/browser/client-scripts/build.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
const path = require("path");
const browserify = require("browserify");
const uglifyify = require("uglifyify");
const aliasify = require("aliasify");
const fs = require("fs-extra");

/**
* @param {object} opts
* @param {boolean} opts.needsCompatLib
* @returns {Promise<Buffer>}
*/
const bundleScript = async opts => {
const lib = opts.needsCompatLib ? "./lib.compat.js" : "./lib.native.js";
const script = browserify({
entries: "./scripts/index.js",
basedir: __dirname
});

script.transform(
{
sourcemap: false,
global: true,
compress: { screw_ie8: false }, // eslint-disable-line camelcase
mangle: { screw_ie8: false }, // eslint-disable-line camelcase
output: { screw_ie8: false } // eslint-disable-line camelcase
},
uglifyify
);

script.transform(
{
aliases: {
"./lib": { relative: lib }
},
verbose: false
},
aliasify
);

return new Promise((resolve, reject) => {
script.bundle((err, buffer) => {
if (err) {
reject(err);
}

resolve(buffer);
});
});
};

async function main() {
const targetDir = path.join("build", path.relative(process.cwd(), __dirname));

await fs.ensureDir(targetDir);

await Promise.all(
[
{ needsCompatLib: true, fileName: "bundle.compat.js" },
{ needsCompatLib: false, fileName: "bundle.js" }
].map(async ({ needsCompatLib, fileName }) => {
const buffer = await bundleScript({ needsCompatLib });
const filePath = path.join(targetDir, fileName);

await fs.writeFile(filePath, buffer);
})
);
}

module.exports = main();
7 changes: 0 additions & 7 deletions src/browser/client-scripts/ignore-areas.deprecated.js

This file was deleted.

File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
119 changes: 0 additions & 119 deletions test/src/browser/client-bridge/index.js

This file was deleted.

Loading

0 comments on commit 37abf5f

Please sign in to comment.