Examples app bundle optimizations (#6588)

* treeshake smallest enabled * ignore playcanvas PCUI from being treeshaken * treeshake ignore only pcui * added device type constants directly (no playcanvas dependency) * format rollup * word wrap fix * Updated PCUI * removed PCUI aliasing
playcanvas · May 23, 2024 · 9c07c3e · 9c07c3e
1 parent aeebcdc
commit 9c07c3e
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 111 deletions.
diff --git a/examples/package-lock.json b/examples/package-lock.json
diff --git a/examples/package.json b/examples/package.json
@@ -41,8 +41,7 @@
     "@monaco-editor/react": "^4.5.1",
     "@playcanvas/eslint-config": "^1.5.0",
     "@playcanvas/observer": "1.4.0",
-    "@playcanvas/pcui": "^4.1.2",
-    "@rollup/plugin-alias": "^4.0.4",
+    "@playcanvas/pcui": "^4.3.0",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-replace": "^4.0.0",
@@ -60,7 +59,7 @@
     "playcanvas": "file:..",
     "prop-types": "^15.7.2",
     "puppeteer": "^20.9.0",
-    "react": "^18.2.0",
+    "react": "^18.3.1",
     "react-dom": "^18.2.0",
     "react-es6": "^1.0.0",
     "react-router-dom": "^5.3.4",

diff --git a/examples/rollup.config.js b/examples/rollup.config.js
@@ -3,31 +3,25 @@ import path from 'path';
 import { execSync } from 'child_process';
 
 // 1st party Rollup plugins
-import alias from '@rollup/plugin-alias';
-import commonjs from "@rollup/plugin-commonjs";
+import commonjs from '@rollup/plugin-commonjs';
 import replace from '@rollup/plugin-replace';
-import resolve from "@rollup/plugin-node-resolve";
+import resolve from '@rollup/plugin-node-resolve';
 import terser from '@rollup/plugin-terser';
 
 // custom plugins
 import { copyStatic } from './utils/plugins/rollup-copy-static.mjs';
 import { generateStandalone } from './utils/plugins/rollup-generate-standalone.mjs';
 
 // engine rollup utils
+import { treeshakeIgnore } from '../utils/plugins/rollup-treeshake-ignore.mjs';
 import { buildTarget } from '../utils/rollup-build-target.mjs';
 
 // util functions
 import { isModuleWithExternalDependencies } from './utils/utils.mjs';
 
 const NODE_ENV = process.env.NODE_ENV ?? '';
 const ENGINE_PATH = !process.env.ENGINE_PATH && NODE_ENV === 'development' ?
-    '../src/index.js' :
-    process.env.ENGINE_PATH ?? '';
-
-const PCUI_PATH = process.env.PCUI_PATH || 'node_modules/@playcanvas/pcui';
-const PCUI_REACT_PATH = path.resolve(PCUI_PATH, 'react');
-const PCUI_STYLES_PATH = path.resolve(PCUI_PATH, 'styles');
-
+    '../src/index.js' : process.env.ENGINE_PATH ?? '';
 
 const STATIC_FILES = [
     // static main page src
@@ -52,7 +46,11 @@ 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', once: true },
+    {
+        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', once: true },
@@ -87,14 +85,7 @@ function checkAppEngine() {
     // types
     if (!fs.existsSync('../build/playcanvas.d.ts')) {
         const cmd = `npm run build target:types --prefix ../`;
-        console.log("\x1b[32m%s\x1b[0m", cmd);
-        execSync(cmd);
-    }
-
-    // engine
-    if (!fs.existsSync('../build/playcanvas/src/index.js')) {
-        const cmd = `npm run build target:esm:release:unbundled --prefix ../`;
-        console.log("\x1b[32m%s\x1b[0m", cmd);
+        console.log('\x1b[32m%s\x1b[0m', cmd);
         execSync(cmd);
     }
 }
@@ -109,33 +100,39 @@ function getEngineTargets() {
     }
     if (NODE_ENV === 'production') {
         // Outputs: dist/iframe/playcanvas.mjs
-        targets.push(...buildTarget({
-            moduleFormat: 'esm',
-            buildType: 'release',
-            bundleState: 'unbundled',
-            input: '../src/index.js',
-            dir: 'dist/iframe'
-        }));
+        targets.push(
+            ...buildTarget({
+                moduleFormat: 'esm',
+                buildType: 'release',
+                bundleState: 'unbundled',
+                input: '../src/index.js',
+                dir: 'dist/iframe'
+            })
+        );
     }
     if (NODE_ENV === 'production' || NODE_ENV === 'development') {
         // Outputs: dist/iframe/playcanvas.dbg.mjs
-        targets.push(...buildTarget({
-            moduleFormat: 'esm',
-            buildType: 'debug',
-            bundleState: 'unbundled',
-            input: '../src/index.js',
-            dir: 'dist/iframe'
-        }));
+        targets.push(
+            ...buildTarget({
+                moduleFormat: 'esm',
+                buildType: 'debug',
+                bundleState: 'unbundled',
+                input: '../src/index.js',
+                dir: 'dist/iframe'
+            })
+        );
     }
     if (NODE_ENV === 'production' || NODE_ENV === 'profiler') {
         // Outputs: dist/iframe/playcanvas.prf.mjs
-        targets.push(...buildTarget({
-            moduleFormat: 'esm',
-            buildType: 'profiler',
-            bundleState: 'unbundled',
-            input: '../src/index.js',
-            dir: 'dist/iframe'
-        }));
+        targets.push(
+            ...buildTarget({
+                moduleFormat: 'esm',
+                buildType: 'profiler',
+                bundleState: 'unbundled',
+                input: '../src/index.js',
+                dir: 'dist/iframe'
+            })
+        );
     }
     return targets;
 }
@@ -145,16 +142,13 @@ export default [
         // used as a placeholder
         input: 'src/static/index.html',
         output: {
-            file: `cache/output.tmp`
+            file: 'cache/output.tmp'
         },
         watch: {
             skipWrite: true
         },
         treeshake: false,
-        plugins: [
-            generateStandalone(NODE_ENV, ENGINE_PATH),
-            copyStatic(NODE_ENV, STATIC_FILES)
-        ]
+        plugins: [generateStandalone(NODE_ENV, ENGINE_PATH), copyStatic(NODE_ENV, STATIC_FILES)]
     },
     {
         // A debug build is ~2.3MB and a release build ~0.6MB
@@ -163,23 +157,18 @@ export default [
             dir: 'dist',
             format: 'umd'
         },
+        treeshake: 'smallest',
         plugins: [
-            alias({
-                entries: {
-                    // define supported module overrides
-                    '@playcanvas/pcui/react': PCUI_REACT_PATH,
-                    '@playcanvas/pcui/styles': PCUI_STYLES_PATH
-                }
-            }),
             commonjs(),
+            treeshakeIgnore([/@playcanvas\/pcui/g]), // ignore PCUI treeshake
             resolve(),
             replace({
                 values: {
-                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV)
+                    'process.env.NODE_ENV': JSON.stringify(NODE_ENV) // for REACT bundling
                 },
                 preventAssignment: true
             }),
-            (NODE_ENV === 'production' && terser())
+            NODE_ENV === 'production' && terser()
         ]
     },
     ...getEngineTargets()

diff --git a/examples/src/app/components/DeviceSelector.mjs b/examples/src/app/components/DeviceSelector.mjs
@@ -1,14 +1,12 @@
-// Don't include all of 'playcanvas' for these defines, it just
-// causes bigger bundles and prolongs the build time by ~3s.
-import {
-    DEVICETYPE_WEBGL2,
-    DEVICETYPE_WEBGPU,
-    DEVICETYPE_NULL
-} from 'playcanvas';
 import { Component } from 'react';
 import { SelectInput } from '@playcanvas/pcui/react';
 
 import { jsx } from '../jsx.mjs';
+import {
+    DEVICETYPE_WEBGPU,
+    DEVICETYPE_WEBGL2,
+    DEVICETYPE_NULL
+} from '../constants.mjs';
 import '../events.js';
 
 const deviceTypeNames = {

diff --git a/examples/src/app/constants.mjs b/examples/src/app/constants.mjs
@@ -1 +1,7 @@
 export const MIN_DESKTOP_WIDTH = 601;
+
+export const DEVICETYPE_WEBGL2 = 'webgl2';
+
+export const DEVICETYPE_WEBGPU = 'webgpu';
+
+export const DEVICETYPE_NULL = 'null';