optimize sandbox script import
diff --git a/build/minify-loader.js b/build/minify-loader.js
new file mode 100644
index 0000000..4a87f7a
--- /dev/null
+++ b/build/minify-loader.js
@@ -0,0 +1,13 @@
+const { minify } = require('terser');
+
+module.exports = function minifyLoader(source, map, meta) {
+ if (this.mode !== 'production') {
+ return source;
+ }
+ const callback = this.async();
+ /** @type {import('terser').MinifyOptions} */
+ const options = this.getOptions();
+ minify(source, options)
+ .then((result) => callback(null, result.code, result.map, meta))
+ .catch(callback);
+};
diff --git a/build/webpack.config.js b/build/webpack.config.js
index 97d692e..0481145 100644
--- a/build/webpack.config.js
+++ b/build/webpack.config.js
@@ -24,6 +24,9 @@
},
{
test: /\.js$/,
+ resourceQuery: {
+ not: [/raw-pure/]
+ },
use: ['babel-loader'],
exclude: /node_modules/
},
@@ -59,6 +62,26 @@
}
}
]
+ },
+ {
+ resourceQuery: /raw-pure/,
+ type: 'asset/source'
+ },
+ {
+ resourceQuery: /raw-minify/,
+ type: 'asset/source',
+ use: [
+ {
+ loader: path.resolve(__dirname, './minify-loader.js'),
+ /** @type {import('terser').MinifyOptions} */
+ options: {
+ compress: {
+ pure_funcs: ['console.debug', 'console.log']
+ }
+ }
+ }
+ ],
+ enforce: 'post'
}
]
},
diff --git a/src/editor/sandbox/handleLoop.js b/src/editor/sandbox/handleLoop.js
index 0843016..cd61575 100644
--- a/src/editor/sandbox/handleLoop.js
+++ b/src/editor/sandbox/handleLoop.js
@@ -4,7 +4,7 @@
*
* @param {string} code the source code
*/
-export default function handleLoop(code) {
+function handleLoop(code) {
let AST;
try {
AST = acorn.parse(code, {
diff --git a/src/editor/sandbox/index.js b/src/editor/sandbox/index.js
index 3fb16e5..b71ece6 100644
--- a/src/editor/sandbox/index.js
+++ b/src/editor/sandbox/index.js
@@ -1,9 +1,24 @@
import srcdoc from './srcdoc.html';
-import handleLoop from './handleLoop';
-import setup from './setup';
-import loopController from 'raw-loader!./loopController';
-import showDebugDirtyRect from 'raw-loader!../../dep/showDebugDirtyRect';
-import estraverse from '!!raw-loader!./estraverse.browser';
+import estraverse from './estraverse.browser?raw-pure';
+import loopController from './loopController?raw-minify';
+import handleLoop from './handleLoop?raw-minify';
+import showDebugDirtyRect from '../../dep/showDebugDirtyRect?raw-minify';
+import setup from './setup?raw-minify';
+
+function prepareSetupScript(isShared) {
+ const isProd = process.env.NODE_ENV === 'production';
+ return [
+ estraverse,
+ loopController,
+ [
+ '(()=>{',
+ handleLoop,
+ showDebugDirtyRect,
+ `(${setup})(${isShared})`,
+ '})()'
+ ].join(isProd ? '' : '\n\n')
+ ].map((content) => ({ content }));
+}
export function createSandbox(
container,
@@ -15,20 +30,8 @@
onOptionUpdated,
onCSSParsed
) {
- scripts = (scripts && scripts.slice()) || [];
- scripts.push(
- { content: estraverse },
- { content: loopController },
- {
- // TODO optimize
- content: `
- (function(){
- var handleLoop = ${handleLoop};
- ${showDebugDirtyRect}
- ;(${setup})(${isShared})
- })()
- `
- }
+ scripts = ((scripts && scripts.slice()) || []).concat(
+ prepareSetupScript(isShared)
);
const sandbox = document.createElement('iframe');
diff --git a/src/editor/sandbox/setup.js b/src/editor/sandbox/setup.js
index 926a99f..099091d 100644
--- a/src/editor/sandbox/setup.js
+++ b/src/editor/sandbox/setup.js
@@ -1,4 +1,4 @@
-export default function setup(isShared) {
+function setup(isShared) {
const sendMessage = (payload) => parent.postMessage(payload, '*');
const chartStyleEl = document.head.querySelector('#chart-styles');
