Examples build speedup

examples/rollup.config.js

@@ -37,13 +37,13 @@ const STATIC_FILES = [
     { src: './iframe', dest: 'dist/iframe' },
 
     // assets used in examples
-    { src: './assets', dest: 'dist/static/assets/' },
+    { src: './assets', dest: 'dist/static/assets/', once: true },
 
     // thumbnails used in examples
-    { src: './thumbnails', dest: 'dist/thumbnails/' },
+    { src: './thumbnails', dest: 'dist/thumbnails/', once: true },
 
     // external libraries used in examples
-    { src: './src/lib', dest: 'dist/static/lib/' },
+    { src: './src/lib', dest: 'dist/static/lib/', once: true },
 
     // engine scripts
     { src: '../scripts', dest: 'dist/static/scripts/' },
@@ -52,13 +52,13 @@ const STATIC_FILES = [
     { src: '../build/playcanvas.d.ts', dest: 'dist/playcanvas.d.ts' },
 
     // playcanvas observer
-    { src: './node_modules/@playcanvas/observer/dist/index.mjs', dest: 'dist/iframe/playcanvas-observer.mjs' },
+    { src: './node_modules/@playcanvas/observer/dist/index.mjs', dest: 'dist/iframe/playcanvas-observer.mjs', once: true },
 
     // modules (N.B. destination folder is 'modules' as 'node_modules' are automatically excluded by git pages)
-    { src: './node_modules/monaco-editor/min/vs', dest: 'dist/modules/monaco-editor/min/vs' },
+    { src: './node_modules/monaco-editor/min/vs', dest: 'dist/modules/monaco-editor/min/vs', once: true },
 
     // fflate (for when using ENGINE_PATH)
-    { src: '../node_modules/fflate/esm/', dest: 'dist/modules/fflate/esm' },
+    { src: '../node_modules/fflate/esm/', dest: 'dist/modules/fflate/esm', once: true },
 
     // engine path
     ...getEnginePathFiles()
@@ -142,10 +142,15 @@ function getEngineTargets() {
 
 export default [
     {
+        // used as a placeholder
         input: 'src/static/index.html',
         output: {
-            file: `dist/copy.tmp`
+            file: `cache/output.tmp`
         },
+        watch: {
+            skipWrite: true
+        },
+        treeshake: false,
         plugins: [
             generateStandalone(NODE_ENV, ENGINE_PATH),
             copyStatic(NODE_ENV, STATIC_FILES)

examples/utils/plugins/rollup-copy-static.mjs

@@ -1,21 +1,27 @@
-import fs from 'fs';
 import fse from 'fs-extra';
 
 // custom plugins
 import { watch } from '../rollup-watch.mjs';
 
+const YELLOW_OUT = '\x1b[33m';
+const BOLD_OUT = `\x1b[1m`;
+const REGULAR_OUT = `\x1b[22m`;
+
+const copied = new Set();
+
 /**
  * This plugin copies static files from source to destination.
  *
  * @param {string} nodeEnv - The node environment.
- * @param {{ src: string, dest: string }[]} targets - Array of source and destination objects.
+ * @param {{ src: string, dest: string, once: boolean }[]} targets - Array of source and destination objects.
+ * @param {boolean} log - Log the copy status.
  * @returns {import('rollup').Plugin} The plugin.
  */
-export function copyStatic(nodeEnv, targets) {
+export function copyStatic(nodeEnv, targets, log = false) {
     return {
         name: 'copy-static',
         load() {
-            return 'console.log("This temp file is created when copying static files, it should be removed during the build process.");';
+            return 'console.log(\'UNUSED ROLLUP OUTPUT FILE\');';
         },
         buildStart() {
             if (nodeEnv === 'development') {
@@ -24,13 +30,17 @@ export function copyStatic(nodeEnv, targets) {
                 });
             }
         },
-        generateBundle() {
-            targets.forEach((target) => {
+        buildEnd() {
+            for (let i = 0; i < targets.length; i++) {
+                const target = targets[i];
+                if (target.once && copied.has(target.src)) {
+                    if (log) {
+                        console.log(`${YELLOW_OUT}skipped copying ${BOLD_OUT}${target.src}${REGULAR_OUT}`);
+                    }
+                    continue;
+                }
                 fse.copySync(target.src, target.dest, { overwrite: true });
-            });
-        },
-        writeBundle() {
-            fs.unlinkSync('dist/copy.tmp');
+            }
         }
     };
 }

examples/utils/plugins/rollup-generate-standalone.mjs

@@ -3,6 +3,8 @@ import { execSync } from 'child_process';
 // custom plugins
 import { watch } from '../rollup-watch.mjs';
 
+const GREEN_OUT = '\x1b[32m';
+
 /**
  * This plugin builds the standalone html files.
  *
@@ -20,9 +22,9 @@ export function generateStandalone(nodeEnv, enginePath) {
                 watch(this, 'src/examples');
             }
         },
-        generateBundle() {
-            const cmd = `cross-env NODE_ENV=${nodeEnv} ENGINE_PATH=${enginePath} npm run build:standalone`;
-            console.log("\x1b[32m%s\x1b[0m", cmd);
+        buildEnd() {
+            const cmd = `cross-env NODE_ENV=${nodeEnv} ENGINE_PATH=${enginePath} node ./scripts/standalone-html.mjs`;
+            console.log(`${GREEN_OUT}${cmd}`);
             execSync(cmd);
         }
     };