From c6f45940b194343358047219ed184da33499d876 Mon Sep 17 00:00:00 2001 From: ZaneHannanAU Date: Fri, 10 May 2019 14:04:20 +1000 Subject: [PATCH 01/19] [Bundle sizing] Property mangling ### Feature Proposal This is probably something for one of the plugins that are currently used --- itself. `mangle-props` (from uglifyjs) could reasonably reduce the bundle size by a few KiB -- though that's not certain... description from uglify-js: ``` --mangle-props [options] Mangle properties/specify mangler options: `builtins` Mangle property names that overlaps with standard JavaScript globals. `debug` Add debug prefix and suffix. `domprops` Mangle property names that overlaps with DOM properties. `keep_quoted` Only mangle unquoted properties. `regex` Only mangle matched property names. `reserved` List of names that should not be mangled. ``` Similarly duplicated on options.mangle.properties: https://github.com/mishoo/UglifyJS2/blob/master/README.md#minify-options One of the issues I'm having is... that there is no definite apparent entry point in rollup or well... any particular plugin that gets used, making it quite ... difficult to find. I eventually found out that terser is the thing which minifies JS and it's simple enough to set it up --- https://github.com/terser-js/terser#mangle-properties-options --- though I heavily presume that it won't cause _too many_ other issues. --- rollup.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index e1c6b94d..3d2f53b9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -31,6 +31,8 @@ import postCSSUrl from "postcss-url"; // Delete 'dist' require("rimraf").sync("dist"); +const nameCache = {} + export default { input: { bootstrap: "src/bootstrap.tsx", @@ -128,6 +130,6 @@ export default { propList: ["facadeModuleId", "fileName", "imports", "code", "isAsset"] }), resourceListPlugin(), - terser() + terser({ nameCache, mangle: { properties: true } }) ] }; From 9a6aec4bf54d390fd55645d5988f83a78eb55f15 Mon Sep 17 00:00:00 2001 From: ZaneHannanAU Date: Fri, 10 May 2019 14:40:18 +1000 Subject: [PATCH 02/19] Set number of workers to 0 Requires https://github.com/TrySound/rollup-plugin-terser/pull/33 to work properly at current. --- rollup.config.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index 3d2f53b9..153c4a9e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -130,6 +130,10 @@ export default { propList: ["facadeModuleId", "fileName", "imports", "code", "isAsset"] }), resourceListPlugin(), - terser({ nameCache, mangle: { properties: true } }) + terser({ + nameCache, + mangle: { properties: true }, + numWorkers: 0 + }) ] }; From 953bd69360926e9406e99c877b0e8532b0171e67 Mon Sep 17 00:00:00 2001 From: ZaneHannanAU Date: Fri, 10 May 2019 15:04:12 +1000 Subject: [PATCH 03/19] minify: run single threaded. --- rollup.config.js | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 153c4a9e..cde74522 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -13,7 +13,6 @@ import typescript from "rollup-plugin-typescript2"; import nodeResolve from "rollup-plugin-node-resolve"; -import { terser } from "rollup-plugin-terser"; import loadz0r from "rollup-plugin-loadz0r"; import dependencyGraph from "./lib/dependency-graph-plugin.js"; import chunkNamePlugin from "./lib/chunk-name-plugin.js"; @@ -31,7 +30,10 @@ import postCSSUrl from "postcss-url"; // Delete 'dist' require("rimraf").sync("dist"); -const nameCache = {} +// Inline for now +import { codeFrameColumns } from "@babel/code-frame"; +import * as Terser from "terser"; +const minifyOpts = {nameCache: {}, mangle: { properties: true } }; export default { input: { @@ -130,10 +132,19 @@ export default { propList: ["facadeModuleId", "fileName", "imports", "code", "isAsset"] }), resourceListPlugin(), - terser({ - nameCache, - mangle: { properties: true }, - numWorkers: 0 - }) + { + name: "terser", + async renderChunk(code, chunk, outputOpts) { + // async to simplify + const result = Terser.minify(code, minifyOpts) + if (result.error) { + const { line, col: column, message } = result.error + console.error( + codeFrameColumns(code, { start: { line, column } }, { message }) + ) + throw result.error + } else return result + } + } ] }; From 34ebe25bb663e7686bd4a700f18f1393ee5101c9 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Fri, 10 May 2019 15:32:37 +1000 Subject: [PATCH 04/19] sourceMap --- rollup.config.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index cde74522..f83d3b0a 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -33,7 +33,11 @@ require("rimraf").sync("dist"); // Inline for now import { codeFrameColumns } from "@babel/code-frame"; import * as Terser from "terser"; -const minifyOpts = {nameCache: {}, mangle: { properties: true } }; +const minifyOpts = { + nameCache: {}, + mangle: { properties: true }, + sourceMap: true +}; export default { input: { @@ -136,14 +140,14 @@ export default { name: "terser", async renderChunk(code, chunk, outputOpts) { // async to simplify - const result = Terser.minify(code, minifyOpts) + const result = Terser.minify(code, minifyOpts); if (result.error) { - const { line, col: column, message } = result.error + const { line, col: column, message } = result.error; console.error( codeFrameColumns(code, { start: { line, column } }, { message }) - ) - throw result.error - } else return result + ); + throw result.error; + } else return result; } } ] From 30f823dec321861d3b17c126474d54f7bd650841 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 09:31:05 +1000 Subject: [PATCH 05/19] renove mangling of require --- rollup.config.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index f83d3b0a..8ff26050 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -35,7 +35,21 @@ import { codeFrameColumns } from "@babel/code-frame"; import * as Terser from "terser"; const minifyOpts = { nameCache: {}, - mangle: { properties: true }, + compress: { + passes: 3, + global_defs: { + // see about importing require later on + } + }, + mangle: { + properties: { + builtins: false, + debug: false, + keep_quoted: true, + // regex: null, + reserved: ["require"] + } + }, sourceMap: true }; From 0796974754db77aae255b942b460804fe9184b6c Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 09:36:52 +1000 Subject: [PATCH 06/19] add reserved --- rollup.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rollup.config.js b/rollup.config.js index 8ff26050..dcf43c8e 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -47,7 +47,7 @@ const minifyOpts = { debug: false, keep_quoted: true, // regex: null, - reserved: ["require"] + reserved: ["require", "define"] } }, sourceMap: true From 2d709986c5de4ccf01bdf32e3bf2b253ed7bf420 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 09:53:25 +1000 Subject: [PATCH 07/19] add reserved toplevel + bool integers --- rollup.config.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index dcf43c8e..5bb0c8f9 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -39,9 +39,11 @@ const minifyOpts = { passes: 3, global_defs: { // see about importing require later on - } + }, + booleans_as_integers: true }, mangle: { + reserved: ["require", "define"], properties: { builtins: false, debug: false, @@ -152,7 +154,7 @@ export default { resourceListPlugin(), { name: "terser", - async renderChunk(code, chunk, outputOpts) { + renderChunk(code, chunk, outputOpts) { // async to simplify const result = Terser.minify(code, minifyOpts); if (result.error) { From 2f06f11402e51daa5ee3f7a8975e0831ce20ad05 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 15:31:38 +1000 Subject: [PATCH 08/19] Getting better: the opening screen now renders; though errors with "this" being "null" are ... awkward. --- rollup.config.js | 47 ++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 44 insertions(+), 3 deletions(-) diff --git a/rollup.config.js b/rollup.config.js index 5bb0c8f9..f5cc398c 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -43,14 +43,46 @@ const minifyOpts = { booleans_as_integers: true }, mangle: { - reserved: ["require", "define"], + reserved: ["require", "define", "self"], properties: { builtins: false, debug: false, keep_quoted: true, - // regex: null, - reserved: ["require", "define"] + regex: null, + /* */ + reserved: [ + // require.js + "require", + "define", + // promises + "then", + "catch", + // regenerator + "next", + "return", + "throw", + // sw + "skipWaiting", + "respondWith", + "request", + "waitUntil", + // cache + "open", + "addAll", + "ignoreSearch", + // gl? + "iResolution", + "shaderBox", + // dom + "class", + "inputmode", + "role", + // nav + "deviceMemory" + ] + /* Unmaintainable? */ } + /* Yeah. This is probably unmaintainable. */ }, sourceMap: true }; @@ -154,9 +186,18 @@ export default { resourceListPlugin(), { name: "terser", + laterOut: -1, renderChunk(code, chunk, outputOpts) { // async to simplify const result = Terser.minify(code, minifyOpts); + if (this.laterOut !== 0) { + clearTimeout(this.laterOut); + this.laterOut = 0; + } else if (this.laterOut !== -1) { + this.laterOut = setTimeout(() => + console.dir(minifyOpts.nameCache, 100) + ); + } if (result.error) { const { line, col: column, message } = result.error; console.error( From 1603c92446378defac0878d1a3f58e1340bc1878 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 17:42:09 +1000 Subject: [PATCH 09/19] put minify in own file, debug minify, use only bound properties. --- .editorconfig | 6 ++ lib/minify.js | 144 +++++++++++++++++++++++++++++++++++++++++++++++ rollup.config.js | 82 +-------------------------- 3 files changed, 152 insertions(+), 80 deletions(-) create mode 100644 .editorconfig create mode 100644 lib/minify.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..f59309b7 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,6 @@ +root = true + +[*.{js,ts,tsx,ejs,es}] +indent_style = spaces +indent_size = 2 +end_of_line = lf diff --git a/lib/minify.js b/lib/minify.js new file mode 100644 index 00000000..01edc2b0 --- /dev/null +++ b/lib/minify.js @@ -0,0 +1,144 @@ +// Inline for now +import { codeFrameColumns } from "@babel/code-frame"; +import * as Terser from "terser"; +let laterOut = 0; +const minifyOpts = { + nameCache: {}, + compress: { + passes: 1, + global_defs: { + // see about preimporting require later on + }, + booleans_as_integers: true + }, + mangle: { + reserved: ["require", "define", "self"], + properties: { + builtins: false, + debug: true, + keep_quoted: true, + regex: null, + /* * + reserved: [ + // require.js + "require", + "define", + // promises + "then", + "catch", + // regenerator + "next", + "return", + "throw", + // sw + "skipWaiting", + "respondWith", + "request", + "waitUntil", + // cache + "open", + "addAll", + "ignoreSearch", + // gl? + "iResolution", + "_loop", + "_renderLoop", + "_renderCanvas", + // dom + "class", + "inputmode", + "role", + // storage + "mines", + // preact? + "_onKeyDown", + "_onKeyUp", + "_onDangerModeSwitchToggle", + "_onUpClick", + "_onDownClick", + "_onSelectChange", + "_onSettingInput", + "_startGame", + "_onMotionPrefChange", + "_onDangerModeChange", + "_onGameChangeSubscribe", + "_onGameChangeUnsubscribe", + "_onSettingsCloseClick", + "_onSettingsClick", + "_onStartGame", + "_onBackClick", + "_onWindowResize", + "_onTableScroll", + "_doManualDomHandling", + // nav + "deviceMemory" + ], + /* Unmaintainable? */ + reserved: [ + "_doManualDomHandling", + "_loop", + "_onBackClick", + "_onDangerModeChange", + "_onDangerModeSwitchToggle", + "_onDangerModeTouchStart", + "_onDownClick", + "_onGameChangeSubscribe", + "_onGameChangeUnsubscribe", + "_onKeyUp", + "_onMotionPrefChange", + "_onResize", + "_onSelectChange", + "_onSettingInput", + "_onSettingsClick", + "_onSettingsCloseClick", + "_onStartGame", + "_onTableScroll", + "_onUpClick", + "_onWindowResize", + "_renderCanvas", + "_renderLoop", + "_startGame", + "moveFocusByKey", + "moveFocusWithMouse", + "onCellClick", + "onDblClick", + "onGameChange", + "onKeyDownOnTable", + "onKeyUp", + "onKeyUpOnTable", + "onMouseDown", + "onMouseUp", + "onReset", + "onRestart", + "removeFocusVisual", + "setFocus", + "setFocusVisual", + "simulateClick" + ] + } + /* Yeah. This is probably unmaintainable. */ + }, + sourceMap: true +}; + +export const terser = { + name: "terser", + renderChunk(code, chunk, outputOpts) { + // async to simplify + const result = Terser.minify(code, minifyOpts); + if (laterOut !== -1) { + if (laterOut !== 0) { + clearTimeout(laterOut); + laterOut = 0; + } + laterOut = setTimeout(() => console.dir(minifyOpts.nameCache, 100)); + } + if (result.error) { + const { line, col: column, message } = result.error; + console.error( + codeFrameColumns(code, { start: { line, column } }, { message }) + ); + throw result.error; + } else return result; + } +}; diff --git a/rollup.config.js b/rollup.config.js index f5cc398c..ac41ff7f 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -25,68 +25,12 @@ import { readFileSync } from "fs"; import constsPlugin from "./lib/consts-plugin.js"; import ejsAssetPlugin from "./lib/ejs-asset-plugin.js"; import assetTransformPlugin from "./lib/asset-transform-plugin.js"; +import { terser } from "./lib/minify.js"; import postCSSUrl from "postcss-url"; // Delete 'dist' require("rimraf").sync("dist"); -// Inline for now -import { codeFrameColumns } from "@babel/code-frame"; -import * as Terser from "terser"; -const minifyOpts = { - nameCache: {}, - compress: { - passes: 3, - global_defs: { - // see about importing require later on - }, - booleans_as_integers: true - }, - mangle: { - reserved: ["require", "define", "self"], - properties: { - builtins: false, - debug: false, - keep_quoted: true, - regex: null, - /* */ - reserved: [ - // require.js - "require", - "define", - // promises - "then", - "catch", - // regenerator - "next", - "return", - "throw", - // sw - "skipWaiting", - "respondWith", - "request", - "waitUntil", - // cache - "open", - "addAll", - "ignoreSearch", - // gl? - "iResolution", - "shaderBox", - // dom - "class", - "inputmode", - "role", - // nav - "deviceMemory" - ] - /* Unmaintainable? */ - } - /* Yeah. This is probably unmaintainable. */ - }, - sourceMap: true -}; - export default { input: { bootstrap: "src/bootstrap.tsx", @@ -184,28 +128,6 @@ export default { propList: ["facadeModuleId", "fileName", "imports", "code", "isAsset"] }), resourceListPlugin(), - { - name: "terser", - laterOut: -1, - renderChunk(code, chunk, outputOpts) { - // async to simplify - const result = Terser.minify(code, minifyOpts); - if (this.laterOut !== 0) { - clearTimeout(this.laterOut); - this.laterOut = 0; - } else if (this.laterOut !== -1) { - this.laterOut = setTimeout(() => - console.dir(minifyOpts.nameCache, 100) - ); - } - if (result.error) { - const { line, col: column, message } = result.error; - console.error( - codeFrameColumns(code, { start: { line, column } }, { message }) - ); - throw result.error; - } else return result; - } - } + terser ] }; From 00b0fea588c30118cb056acf61a13e940c51a8f6 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Sat, 11 May 2019 18:47:44 +1000 Subject: [PATCH 10/19] still kinda broken --- lib/minify.js | 40 ++++++++-------------------------------- 1 file changed, 8 insertions(+), 32 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index 01edc2b0..980d21b1 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -13,12 +13,13 @@ const minifyOpts = { }, mangle: { reserved: ["require", "define", "self"], + /* */ properties: { builtins: false, debug: true, keep_quoted: true, - regex: null, - /* * + regex: /^(?!_?on|_(?!_))/, + /* Unmaintainable? */ reserved: [ // require.js "require", @@ -39,42 +40,17 @@ const minifyOpts = { "open", "addAll", "ignoreSearch", - // gl? - "iResolution", - "_loop", - "_renderLoop", - "_renderCanvas", // dom "class", "inputmode", "role", // storage "mines", - // preact? - "_onKeyDown", - "_onKeyUp", - "_onDangerModeSwitchToggle", - "_onUpClick", - "_onDownClick", - "_onSelectChange", - "_onSettingInput", - "_startGame", - "_onMotionPrefChange", - "_onDangerModeChange", - "_onGameChangeSubscribe", - "_onGameChangeUnsubscribe", - "_onSettingsCloseClick", - "_onSettingsClick", - "_onStartGame", - "_onBackClick", - "_onWindowResize", - "_onTableScroll", - "_doManualDomHandling", // nav - "deviceMemory" - ], - /* Unmaintainable? */ - reserved: [ + "deviceMemory", + // idk how this happens + "onSubmit", + // preact? "_doManualDomHandling", "_loop", "_onBackClick", @@ -114,7 +90,7 @@ const minifyOpts = { "setFocus", "setFocusVisual", "simulateClick" - ] + ] /* */ } /* Yeah. This is probably unmaintainable. */ }, From ac397ffb5f446124bb1eba59b187048ecf1862b9 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 13:59:29 +1000 Subject: [PATCH 11/19] Use only safe (/^__/) properties. This evaluates to { vars: { props: [Object: null prototype] {} }, props: { props: [Object: null prototype] { '$__assign': 't', '$__extends': 'o', '$__rest': 'i', '$__decorate': 'u', '$__param': 'l', '$__metadata': 's', '$__awaiter': '_', '$__generator': 'h', '$__exportStar': 'm', '$__values': 'p', '$__read': 'j', '$__spread': 'S', '$__await': 'O', '$__asyncGenerator': 'k', '$__asyncDelegator': 'R', '$__asyncValues': 'g', '$__makeTemplateObject': 'P', '$__importStar': 'T', '$__esModule': 'D', '$__importDefault': 'G', '$__html': 'v', '$__key': 'H', '$__ref': 'L', '$__state': 'A', '$__onChange': 'B', '$__onFinishChange': 'F', '$__prev': 'C', '$__checkbox': 'I', '$__select': 'M', '$__input': 'J', '$__min': 'N', '$__max': 'V', '$__step': 'X', '$__impliedStep': 'Y', '$__precision': 'U', '$__truncationSuspended': 'W', '$__background': 'K', '$__foreground': 'Z', '$__button': '$', '$__color': 'q', '$__temp': 'tt', '$__selector': 'nt', '$__saturation_field': 'it', '$__field_knob': 'ot', '$__field_knob_border': 'et', '$__hue_knob': 'rt', '$__hue_field': 'st', '$__input_textShadow': 'ut', '$__ul': 'at', '$__folders': 'ct', '$__controllers': 'dt', '$__rememberedObjects': 'ht', '$__rememberedObjectIndecesToControllers': 'ft', '$__listening': 'lt', '$__preset_select': 'pt', '$__closeButton': 'vt', '$__resizeHandler': 'gt', '$__li': 'wt', '$__gui': 'bt', '$__resize_handle': 'xt', '$__save_row': 'yt' } } } --- lib/minify.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index 980d21b1..4cdbd8c1 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -1,7 +1,7 @@ // Inline for now import { codeFrameColumns } from "@babel/code-frame"; import * as Terser from "terser"; -let laterOut = 0; +let laterOut = -1; const minifyOpts = { nameCache: {}, compress: { @@ -16,10 +16,10 @@ const minifyOpts = { /* */ properties: { builtins: false, - debug: true, + debug: false, keep_quoted: true, - regex: /^(?!_?on|_(?!_))/, - /* Unmaintainable? */ + regex: /^__/ + /* Unmaintainable? * reserved: [ // require.js "require", From 47b729c25d278a9537973a20595f888f6021513a Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 14:12:11 +1000 Subject: [PATCH 12/19] Use only safe and constant properties. New output (lib/minify to thing): { vars: { props: [Object: null prototype] {} }, props: { props: [Object: null prototype] { '$__assign': 't', '$__extends': 'o', '$__rest': 'i', '$__decorate': 'u', '$__param': 'l', '$__metadata': 's', '$__awaiter': '_', '$__generator': 'h', '$__exportStar': 'm', '$__values': 'p', '$__read': 'j', '$__spread': 'S', '$__await': 'O', '$__asyncGenerator': 'k', '$__asyncDelegator': 'R', '$__asyncValues': 'g', '$__makeTemplateObject': 'P', '$__importStar': 'T', '$__esModule': 'D', '$__importDefault': 'G', '$__html': 'v', '$__key': 'H', '$__ref': 'L', '$__state': 'A', '$BREAK': 'B', '$THREE_CHAR_HEX': 'F', '$SIX_CHAR_HEX': 'C', '$CSS_RGB': 'I', '$CSS_RGBA': 'M', '$HEX': 'J', '$RGB_ARRAY': 'N', '$RGBA_ARRAY': 'V', '$RGBA_OBJ': 'X', '$RGB_OBJ': 'Y', '$HSVA_OBJ': 'U', '$HSV_OBJ': 'W', '$COMPONENTS': 'K', '$__onChange': 'Z', '$__onFinishChange': '$', '$__prev': 'q', '$__checkbox': 'tt', '$__select': 'nt', '$__input': 'it', '$__min': 'ot', '$__max': 'et', '$__step': 'rt', '$__impliedStep': 'st', '$__precision': 'ut', '$__truncationSuspended': 'at', '$__background': 'ct', '$__foreground': 'dt', '$__button': 'ht', '$__color': 'ft', '$__temp': 'lt', '$__selector': 'pt', '$__saturation_field': 'vt', '$__field_knob': 'gt', '$__field_knob_border': 'wt', '$__hue_knob': 'bt', '$__hue_field': 'xt', '$__input_textShadow': 'yt', '$__ul': 'At', '$__folders': 'kt', '$__controllers': 'Ot', '$__rememberedObjects': 'Et', '$__rememberedObjectIndecesToControllers': 'St', '$__listening': 'Rt', '$DEFAULT_WIDTH': 'Bt', '$__preset_select': 'Ft', '$CLASS_CLOSED': 'Ct', '$__closeButton': 'Gt', '$TEXT_OPEN': 'jt', '$TEXT_CLOSED': 'Ht', '$CLASS_MAIN': '_t', '$CLASS_CLOSE_BUTTON': 'zt', '$CLASS_CLOSE_TOP': 'Dt', '$CLASS_CLOSE_BOTTOM': 'It', '$CLASS_AUTO_PLACE_CONTAINER': 'Mt', '$CLASS_AUTO_PLACE': 'Tt', '$__resizeHandler': 'Jt', '$__li': 'Nt', '$CLASS_CONTROLLER_ROW': 'Vt', '$__gui': 'Xt', '$CLASS_DRAG': 'Pt', '$__resize_handle': 'Qt', '$__save_row': 'Yt', '$CLASS_TOO_TALL': 'Ut' } } } Can further do it by whitelisting known properties (eg state, prevState) but will be annoying to set/get and so on. If terser was to implement a whitelist based system rather than using a reserved/regex system that would be preferred. --- lib/minify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/minify.js b/lib/minify.js index 4cdbd8c1..8ad01f24 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -18,7 +18,7 @@ const minifyOpts = { builtins: false, debug: false, keep_quoted: true, - regex: /^__/ + regex: /^__|^[A-Z_]+$/ /* Unmaintainable? * reserved: [ // require.js From 3450c45af7af57388e33422fbb56cca353827b75 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 14:19:33 +1000 Subject: [PATCH 13/19] add state stuff --- lib/minify.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index 8ad01f24..6084e8ac 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -18,7 +18,7 @@ const minifyOpts = { builtins: false, debug: false, keep_quoted: true, - regex: /^__|^[A-Z_]+$/ + regex: /^__|^(?:[A-Z_]+|prevState|state)$/ /* Unmaintainable? * reserved: [ // require.js @@ -91,8 +91,8 @@ const minifyOpts = { "setFocusVisual", "simulateClick" ] /* */ + /* Yeah. Reserved list is unmaintainable. */ } - /* Yeah. This is probably unmaintainable. */ }, sourceMap: true }; From 3b2857a59d8848f24ef81eb908ee7da6f5106470 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 15:01:39 +1000 Subject: [PATCH 14/19] add name cache, use more passes. --- lib/minify.js | 9 ++-- lib/name-cache.js | 107 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+), 4 deletions(-) create mode 100644 lib/name-cache.js diff --git a/lib/minify.js b/lib/minify.js index 6084e8ac..4684bcfb 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -1,11 +1,12 @@ // Inline for now import { codeFrameColumns } from "@babel/code-frame"; import * as Terser from "terser"; -let laterOut = -1; +import nameCache from "./name-cache.js"; +let laterOut = 0; const minifyOpts = { - nameCache: {}, + nameCache, compress: { - passes: 1, + passes: 3, global_defs: { // see about preimporting require later on }, @@ -18,7 +19,7 @@ const minifyOpts = { builtins: false, debug: false, keep_quoted: true, - regex: /^__|^(?:[A-Z_]+|prevState|state)$/ + regex: /^__|^(?:[A-Z_]+|prevState|state|_(?:width|height|mines|playMode|toReveal|flags|stateChange|minedCells|flagged|hasMine|revealed|touching(?:Flags|Mines)|getSurrounding|grid|subscribe|unsubscribe|reset|restart))$/ /* Unmaintainable? * reserved: [ // require.js diff --git a/lib/name-cache.js b/lib/name-cache.js new file mode 100644 index 00000000..a06affc7 --- /dev/null +++ b/lib/name-cache.js @@ -0,0 +1,107 @@ +const nameCache = { + vars: { props: {} }, + props: { + props: { + $__assign: 't', + $__extends: 'o', + $__rest: 'i', + $__decorate: 'u', + $__param: 'l', + $__metadata: 's', + $__awaiter: '_', + $__generator: 'h', + $__exportStar: 'm', + $__values: 'p', + $__read: 'j', + $__spread: 'S', + $__await: 'O', + $__asyncGenerator: 'k', + $__asyncDelegator: 'R', + $__asyncValues: 'g', + $__makeTemplateObject: 'P', + $__importStar: 'T', + $__esModule: 'D', + $__importDefault: 'G', + $_width: 'v', + $_height: 'M', + $_mines: 'A', + $_playMode: 'C', + $_toReveal: 'q', + $_flags: 'I', + $_stateChange: 'N', + $_minedCells: 'Y', + $_getSurrounding: 'F', + $__html: 'H', + $__key: 'L', + $__ref: '$', + $prevState: 'U', + $_grid: 'B', + $__state: 'J', + $BREAK: 'V', + $THREE_CHAR_HEX: 'X', + $SIX_CHAR_HEX: 'W', + $CSS_RGB: 'K', + $CSS_RGBA: 'Z', + $HEX: 'tt', + $RGB_ARRAY: 'nt', + $RGBA_ARRAY: 'it', + $RGBA_OBJ: 'ot', + $RGB_OBJ: 'et', + $HSVA_OBJ: 'rt', + $HSV_OBJ: 'st', + $COMPONENTS: 'ut', + $__onChange: 'at', + $__onFinishChange: 'ct', + $__prev: 'dt', + $__checkbox: 'ht', + $__select: 'ft', + $__input: 'lt', + $__min: 'pt', + $__max: 'vt', + $__step: 'gt', + $__impliedStep: 'wt', + $__precision: 'bt', + $__truncationSuspended: 'xt', + $__background: 'yt', + $__foreground: 'At', + $__button: 'kt', + $__color: 'Ot', + $__temp: 'Et', + $__selector: 'St', + $__saturation_field: 'Rt', + $__field_knob: 'Bt', + $__field_knob_border: 'Ft', + $__hue_knob: 'Ct', + $__hue_field: 'Gt', + $__input_textShadow: 'jt', + $__ul: 'Ht', + $__folders: '_t', + $__controllers: 'zt', + $__rememberedObjects: 'Dt', + $__rememberedObjectIndecesToControllers: 'It', + $__listening: 'Mt', + $DEFAULT_WIDTH: 'Tt', + $__preset_select: 'Jt', + $CLASS_CLOSED: 'Nt', + $__closeButton: 'Vt', + $TEXT_OPEN: 'Xt', + $TEXT_CLOSED: 'Pt', + $CLASS_MAIN: 'Qt', + $CLASS_CLOSE_BUTTON: 'Yt', + $CLASS_CLOSE_TOP: 'Ut', + $CLASS_CLOSE_BOTTOM: 'Wt', + $CLASS_AUTO_PLACE_CONTAINER: 'Kt', + $CLASS_AUTO_PLACE: 'Lt', + $__resizeHandler: 'Zt', + $__li: '$t', + $CLASS_CONTROLLER_ROW: 'qt', + $__gui: 'tn', + $CLASS_DRAG: 'nn', + $__resize_handle: 'in', + $__save_row: 'on', + $CLASS_TOO_TALL: 'en', + } + } +}; + +export default nameCache; From d4d1ff29d8c011ada5ca571d4d66bc3d8b9dda79 Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 15:08:02 +1000 Subject: [PATCH 15/19] Log minify name cache better --- lib/minify.js | 2 +- lib/name-cache.js | 196 +++++++++++++++++++++++----------------------- 2 files changed, 99 insertions(+), 99 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index 4684bcfb..15fff80c 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -108,7 +108,7 @@ export const terser = { clearTimeout(laterOut); laterOut = 0; } - laterOut = setTimeout(() => console.dir(minifyOpts.nameCache, 100)); + laterOut = setTimeout(() => console.log('Minify name cache: %O', nameCache, 100)); } if (result.error) { const { line, col: column, message } = result.error; diff --git a/lib/name-cache.js b/lib/name-cache.js index a06affc7..6822c555 100644 --- a/lib/name-cache.js +++ b/lib/name-cache.js @@ -2,104 +2,104 @@ const nameCache = { vars: { props: {} }, props: { props: { - $__assign: 't', - $__extends: 'o', - $__rest: 'i', - $__decorate: 'u', - $__param: 'l', - $__metadata: 's', - $__awaiter: '_', - $__generator: 'h', - $__exportStar: 'm', - $__values: 'p', - $__read: 'j', - $__spread: 'S', - $__await: 'O', - $__asyncGenerator: 'k', - $__asyncDelegator: 'R', - $__asyncValues: 'g', - $__makeTemplateObject: 'P', - $__importStar: 'T', - $__esModule: 'D', - $__importDefault: 'G', - $_width: 'v', - $_height: 'M', - $_mines: 'A', - $_playMode: 'C', - $_toReveal: 'q', - $_flags: 'I', - $_stateChange: 'N', - $_minedCells: 'Y', - $_getSurrounding: 'F', - $__html: 'H', - $__key: 'L', - $__ref: '$', - $prevState: 'U', - $_grid: 'B', - $__state: 'J', - $BREAK: 'V', - $THREE_CHAR_HEX: 'X', - $SIX_CHAR_HEX: 'W', - $CSS_RGB: 'K', - $CSS_RGBA: 'Z', - $HEX: 'tt', - $RGB_ARRAY: 'nt', - $RGBA_ARRAY: 'it', - $RGBA_OBJ: 'ot', - $RGB_OBJ: 'et', - $HSVA_OBJ: 'rt', - $HSV_OBJ: 'st', - $COMPONENTS: 'ut', - $__onChange: 'at', - $__onFinishChange: 'ct', - $__prev: 'dt', - $__checkbox: 'ht', - $__select: 'ft', - $__input: 'lt', - $__min: 'pt', - $__max: 'vt', - $__step: 'gt', - $__impliedStep: 'wt', - $__precision: 'bt', - $__truncationSuspended: 'xt', - $__background: 'yt', - $__foreground: 'At', - $__button: 'kt', - $__color: 'Ot', - $__temp: 'Et', - $__selector: 'St', - $__saturation_field: 'Rt', - $__field_knob: 'Bt', - $__field_knob_border: 'Ft', - $__hue_knob: 'Ct', - $__hue_field: 'Gt', - $__input_textShadow: 'jt', - $__ul: 'Ht', - $__folders: '_t', - $__controllers: 'zt', - $__rememberedObjects: 'Dt', - $__rememberedObjectIndecesToControllers: 'It', - $__listening: 'Mt', - $DEFAULT_WIDTH: 'Tt', - $__preset_select: 'Jt', - $CLASS_CLOSED: 'Nt', - $__closeButton: 'Vt', - $TEXT_OPEN: 'Xt', - $TEXT_CLOSED: 'Pt', - $CLASS_MAIN: 'Qt', - $CLASS_CLOSE_BUTTON: 'Yt', - $CLASS_CLOSE_TOP: 'Ut', - $CLASS_CLOSE_BOTTOM: 'Wt', - $CLASS_AUTO_PLACE_CONTAINER: 'Kt', - $CLASS_AUTO_PLACE: 'Lt', - $__resizeHandler: 'Zt', - $__li: '$t', - $CLASS_CONTROLLER_ROW: 'qt', - $__gui: 'tn', - $CLASS_DRAG: 'nn', - $__resize_handle: 'in', - $__save_row: 'on', - $CLASS_TOO_TALL: 'en', + $__assign: "t", + $__extends: "o", + $__rest: "i", + $__decorate: "u", + $__param: "l", + $__metadata: "s", + $__awaiter: "_", + $__generator: "h", + $__exportStar: "m", + $__values: "p", + $__read: "j", + $__spread: "S", + $__await: "O", + $__asyncGenerator: "k", + $__asyncDelegator: "R", + $__asyncValues: "g", + $__makeTemplateObject: "P", + $__importStar: "T", + $__esModule: "D", + $__importDefault: "G", + $_width: "v", + $_height: "M", + $_mines: "A", + $_playMode: "C", + $_toReveal: "q", + $_flags: "I", + $_stateChange: "N", + $_minedCells: "Y", + $_getSurrounding: "F", + $__html: "H", + $__key: "L", + $__ref: "$", + $prevState: "U", + $_grid: "B", + $__state: "J", + $BREAK: "V", + $THREE_CHAR_HEX: "X", + $SIX_CHAR_HEX: "W", + $CSS_RGB: "K", + $CSS_RGBA: "Z", + $HEX: "tt", + $RGB_ARRAY: "nt", + $RGBA_ARRAY: "it", + $RGBA_OBJ: "ot", + $RGB_OBJ: "et", + $HSVA_OBJ: "rt", + $HSV_OBJ: "st", + $COMPONENTS: "ut", + $__onChange: "at", + $__onFinishChange: "ct", + $__prev: "dt", + $__checkbox: "ht", + $__select: "ft", + $__input: "lt", + $__min: "pt", + $__max: "vt", + $__step: "gt", + $__impliedStep: "wt", + $__precision: "bt", + $__truncationSuspended: "xt", + $__background: "yt", + $__foreground: "At", + $__button: "kt", + $__color: "Ot", + $__temp: "Et", + $__selector: "St", + $__saturation_field: "Rt", + $__field_knob: "Bt", + $__field_knob_border: "Ft", + $__hue_knob: "Ct", + $__hue_field: "Gt", + $__input_textShadow: "jt", + $__ul: "Ht", + $__folders: "_t", + $__controllers: "zt", + $__rememberedObjects: "Dt", + $__rememberedObjectIndecesToControllers: "It", + $__listening: "Mt", + $DEFAULT_WIDTH: "Tt", + $__preset_select: "Jt", + $CLASS_CLOSED: "Nt", + $__closeButton: "Vt", + $TEXT_OPEN: "Xt", + $TEXT_CLOSED: "Pt", + $CLASS_MAIN: "Qt", + $CLASS_CLOSE_BUTTON: "Yt", + $CLASS_CLOSE_TOP: "Ut", + $CLASS_CLOSE_BOTTOM: "Wt", + $CLASS_AUTO_PLACE_CONTAINER: "Kt", + $CLASS_AUTO_PLACE: "Lt", + $__resizeHandler: "Zt", + $__li: "$t", + $CLASS_CONTROLLER_ROW: "qt", + $__gui: "tn", + $CLASS_DRAG: "nn", + $__resize_handle: "in", + $__save_row: "on", + $CLASS_TOO_TALL: "en" } } }; From de7e59d57dab1e952ea5a1d16e5d80ed4f615d0a Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 15:12:42 +1000 Subject: [PATCH 16/19] Display minify name cache better --- lib/minify.js | 6 +++++- lib/name-cache.js | 4 +--- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index 15fff80c..b8688039 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -108,7 +108,11 @@ export const terser = { clearTimeout(laterOut); laterOut = 0; } - laterOut = setTimeout(() => console.log('Minify name cache: %O', nameCache, 100)); + laterOut = setTimeout( + cache => console.log("Minify name cache: %O", cache), + 100, + nameCache + ); } if (result.error) { const { line, col: column, message } = result.error; diff --git a/lib/name-cache.js b/lib/name-cache.js index 6822c555..a0935ad9 100644 --- a/lib/name-cache.js +++ b/lib/name-cache.js @@ -1,4 +1,4 @@ -const nameCache = { +export default { vars: { props: {} }, props: { props: { @@ -103,5 +103,3 @@ const nameCache = { } } }; - -export default nameCache; From 124f17fed9c27e47db6f8b32616fc4910f4668da Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 15:43:15 +1000 Subject: [PATCH 17/19] add additional button data as a minified thing --- lib/minify.js | 2 +- lib/name-cache.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/lib/minify.js b/lib/minify.js index b8688039..5d4dbd40 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -19,7 +19,7 @@ const minifyOpts = { builtins: false, debug: false, keep_quoted: true, - regex: /^__|^(?:[A-Z_]+|prevState|state|_(?:width|height|mines|playMode|toReveal|flags|stateChange|minedCells|flagged|hasMine|revealed|touching(?:Flags|Mines)|getSurrounding|grid|subscribe|unsubscribe|reset|restart))$/ + regex: /^__|^(?:[A-Z_]+|prevState|state|_(?:width|height|mines|playMode|toReveal|flags|stateChange|minedCells|flagged|hasMine|revealed|touching(?:Flags|Mines)|additionalButtonData)|getSurrounding|grid|subscribe|unsubscribe|reset|restart)$/ /* Unmaintainable? * reserved: [ // require.js diff --git a/lib/name-cache.js b/lib/name-cache.js index a0935ad9..2dbb131e 100644 --- a/lib/name-cache.js +++ b/lib/name-cache.js @@ -99,7 +99,10 @@ export default { $CLASS_DRAG: "nn", $__resize_handle: "in", $__save_row: "on", - $CLASS_TOO_TALL: "en" + $CLASS_TOO_TALL: "en", + $grid: "ti", + $restart: "ii", + $_additionalButtonData: "ei" } } }; From b59d114b7a7ce7c9857928be0cb6ed8c727ab92f Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 16:07:40 +1000 Subject: [PATCH 18/19] add some properties from the board I guess --- lib/minify.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/minify.js b/lib/minify.js index 5d4dbd40..8b4b78ee 100644 --- a/lib/minify.js +++ b/lib/minify.js @@ -19,7 +19,7 @@ const minifyOpts = { builtins: false, debug: false, keep_quoted: true, - regex: /^__|^(?:[A-Z_]+|prevState|state|_(?:width|height|mines|playMode|toReveal|flags|stateChange|minedCells|flagged|hasMine|revealed|touching(?:Flags|Mines)|additionalButtonData)|getSurrounding|grid|subscribe|unsubscribe|reset|restart)$/ + regex: /^__|^(?:[A-Z_]+|prevState|state|_(?:width|height|mines|playMode|toReveal|flags|stateChange|minedCells|flagged|hasMine|revealed|touching(?:Flags|Mines)|additionalButtonData|canvas|table|currentFocusableBtn|tableContainer|buttons|rendererInit|queryFirstCellRect)|getSurrounding|grid|subscribe|unsubscribe|reset|restart)$/ /* Unmaintainable? * reserved: [ // require.js From 7113645421bf56fa3c6fd090e105da4aad8a8aae Mon Sep 17 00:00:00 2001 From: Zane Hannan Date: Mon, 13 May 2019 16:27:08 +1000 Subject: [PATCH 19/19] Fix dependencies --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index a2947181..bf6d1c3d 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/polyfill": "^7.4.3", "@babel/preset-env": "^7.4.3", + "@babel/code-frame": "^7.0.0", "characterset": "^1.3.0", "comlink": "^4.0.0-alpha.10", "dat.gui": "^0.7.6", @@ -57,9 +58,9 @@ "rollup-plugin-loadz0r": "^0.7.1", "rollup-plugin-node-resolve": "^4.2.3", "rollup-plugin-postcss": "^2.0.3", - "rollup-plugin-terser": "^4.0.4", "rollup-plugin-typescript2": "^0.21.0", "rollup-pluginutils": "^2.6.0", + "terser": "^3.17.0", "travis-size-report": "^1.0.1", "tslint": "^5.16.0", "typed-css-modules": "^0.4.2",