Build visualizer output fix (#7701)

* Fixed treemap, treesun and treenet visualizer output

* Enhance build documentation and optimize plugin usage for release builds

Author: kpal81xd

.gitignore

@@ -2,7 +2,7 @@
 .idea/
 .vscode/
 build
-tree*.html
+tree*.*.html
 coverage
 docs
 examples/dist

build.mjs

@@ -9,9 +9,9 @@
  *     - bundleState (unbundled, bundled)
  * Example: target:esm:release:bundled
  *
- * treemap - Enable treemap build visualization.
- * treenet - Enable treenet build visualization.
- * treesun - Enable treesun build visualization.
+ * treemap - Enable treemap build visualization (release only).
+ * treenet - Enable treenet build visualization (release only).
+ * treesun - Enable treesun build visualization (release only).
  */
 
 import { execSync } from 'child_process';

package.json

@@ -110,9 +110,9 @@
     "build:esm": "npm run build target:esm",
     "build:esm:release": "npm run build target:esm:release",
     "build:esm:debug": "npm run build target:esm:debug",
-    "build:treemap": "npm run build target:umd treemap",
-    "build:treenet": "npm run build target:umd treenet",
-    "build:treesun": "npm run build target:umd treesun",
+    "build:treemap": "npm run build target:release treemap",
+    "build:treenet": "npm run build target:release treenet",
+    "build:treesun": "npm run build target:release treesun",
     "build:sourcemaps": "npm run build -- -m",
     "watch": "npm run build -- -w",
     "watch:release": "npm run build target:release -- -w",

utils/rollup-build-target.mjs

@@ -19,6 +19,15 @@ import { version, revision } from './rollup-version-revision.mjs';
 import { getBanner } from './rollup-get-banner.mjs';
 import { babelOptions } from './rollup-babel-options.mjs';
 
+import { dirname, resolve as pathResolve } from 'path';
+import { fileURLToPath } from 'url';
+
+// Find path to the repo root
+// @ts-ignore import.meta not allowed by tsconfig module:es6, but it works
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+const rootDir = pathResolve(__dirname, '..');
+
 /** @typedef {import('rollup').RollupOptions} RollupOptions */
 /** @typedef {import('rollup').OutputOptions} OutputOptions */
 /** @typedef {import('rollup').ModuleFormat} ModuleFormat */
@@ -111,31 +120,32 @@ function getJSCCOptions(buildType, isUMD) {
 }
 
 /**
+ * @param {string} type - The type of the output (e.g., 'umd', 'es').
  * @returns {OutputOptions['plugins']} - The output plugins.
  */
-function getOutPlugins() {
+function getOutPlugins(type) {
     const plugins = [
         terser()
     ];
 
     if (process.env.treemap) {
         plugins.push(visualizer({
-            filename: 'treemap.html',
+            filename: `treemap.${type}.html`,
             brotliSize: true,
             gzipSize: true
         }));
     }
 
     if (process.env.treenet) {
         plugins.push(visualizer({
-            filename: 'treenet.html',
+            filename: `treenet.${type}.html`,
             template: 'network'
         }));
     }
 
     if (process.env.treesun) {
         plugins.push(visualizer({
-            filename: 'treesun.html',
+            filename: `treesun.${type}.html`,
             template: 'sunburst'
         }));
     }
@@ -146,6 +156,10 @@ function getOutPlugins() {
 /**
  * Build a target that Rollup is supposed to build (bundled and unbundled).
  *
+ * For faster subsequent builds, the unbundled and release builds are cached in the HISTORY map to
+ * be used for bundled and minified builds. They are stored in the HISTORY map with the key:
+ * `<debug|release|profiler>-<umd|esm>-<bundled>`.
+ *
  * @param {object} options - The build target options.
  * @param {'umd'|'esm'} options.moduleFormat - The module format.
  * @param {'debug'|'release'|'profiler'|'min'} options.buildType - The build type.
@@ -160,6 +174,9 @@ function buildTarget({ moduleFormat, buildType, bundleState, input = 'src/index.
     const isMin = buildType === 'min';
     const bundled = isUMD || isMin || bundleState === 'bundled';
 
+    const prefix = `${OUT_PREFIX[buildType]}`;
+    const file = `${prefix}${isUMD ? '.js' : '.mjs'}`;
+
     const targets = [];
 
     // bundle from unbundled
@@ -178,7 +195,7 @@ function buildTarget({ moduleFormat, buildType, bundleState, input = 'src/index.
                 sourcemap: isDebug && 'inline',
                 name: 'pc',
                 preserveModules: false,
-                file: `${dir}/${OUT_PREFIX[buildType]}.mjs`
+                file: `${dir}/${prefix}.mjs`
             }
         };
 
@@ -198,7 +215,7 @@ function buildTarget({ moduleFormat, buildType, bundleState, input = 'src/index.
         const target = {
             input: release.output.file,
             output: {
-                plugins: getOutPlugins(),
+                banner: isUMD ? getBanner(BANNER[buildType]) : undefined,
                 file: `${dir}/${OUT_PREFIX[buildType]}${isUMD ? '.js' : '.mjs'}`
             },
             context: isUMD ? 'this' : undefined
@@ -217,14 +234,15 @@ function buildTarget({ moduleFormat, buildType, bundleState, input = 'src/index.
         input,
         output: {
             banner: bundled ? getBanner(BANNER[buildType]) : undefined,
-            plugins: isMin ? getOutPlugins() : undefined,
+            plugins: buildType === 'release' ? getOutPlugins(isUMD ? 'umd' : 'es') : undefined,
             format: isUMD ? 'umd' : 'es',
             indent: '\t',
             sourcemap: bundled && isDebug && 'inline',
             name: 'pc',
             preserveModules: !bundled,
-            file: bundled ? `${dir}/${OUT_PREFIX[buildType]}${isUMD ? '.js' : '.mjs'}` : undefined,
-            dir: !bundled ? `${dir}/${OUT_PREFIX[buildType]}` : undefined,
+            preserveModulesRoot: !bundled ? rootDir : undefined,
+            file: bundled ? `${dir}/${file}` : undefined,
+            dir: !bundled ? `${dir}/${prefix}` : undefined,
             entryFileNames: chunkInfo => `${chunkInfo.name.replace(/node_modules/g, 'modules')}.js`
         },
         plugins: [