Merge pull request #4733 from mermaid-js/sidv/splitChunks

Split chunks into individual dirs

.esbuild/build.ts

@@ -1,21 +1,49 @@
 import { build } from 'esbuild';
 import { mkdir, writeFile } from 'node:fs/promises';
-import { getBuildConfig } from './util.js';
+import { MermaidBuildOptions, defaultOptions, getBuildConfig } from './util.js';
 import { packageOptions } from '../.build/common.js';
 
 const shouldVisualize = process.argv.includes('--visualize');
 
 const buildPackage = async (entryName: keyof typeof packageOptions) => {
-  await build(getBuildConfig({ entryName, minify: false }));
+  const commonOptions = { ...defaultOptions, entryName } as const;
-  const { metafile } = await build(
+  const buildConfigs = [
-    getBuildConfig({ entryName, minify: true, metafile: shouldVisualize })
+    // package.mjs
+    { ...commonOptions },
+    // package.min.mjs
+    {
+      ...commonOptions,
+      minify: true,
+      metafile: shouldVisualize,
+    },
+    // package.core.mjs
+    { ...commonOptions, core: true },
+  ];
+
+  if (entryName === 'mermaid') {
+    const iifeOptions: MermaidBuildOptions = { ...commonOptions, format: 'iife' };
+    buildConfigs.push(
+      // mermaid.js
+      { ...iifeOptions },
+      // mermaid.min.js
+      { ...iifeOptions, minify: true, metafile: shouldVisualize }
     );
-  if (metafile) {
-    // Upload metafile into https://esbuild.github.io/analyze/
-    await writeFile(`stats/meta-${entryName}.json`, JSON.stringify(metafile));
   }
-  await build(getBuildConfig({ entryName, minify: false, core: true }));
+
-  await build(getBuildConfig({ entryName, minify: true, format: 'iife' }));
+  const results = await Promise.all(buildConfigs.map((option) => build(getBuildConfig(option))));
+
+  if (shouldVisualize) {
+    for (const { metafile } of results) {
+      if (!metafile) {
+        continue;
+      }
+      const fileName = Object.keys(metafile.outputs)
+        .filter((file) => !file.includes('chunks') && file.endsWith('js'))[0]
+        .replace('dist/', '');
+      // Upload metafile into https://esbuild.github.io/analyze/
+      await writeFile(`stats/${fileName}.meta.json`, JSON.stringify(metafile));
+    }
+  }
 };
 
 const handler = (e) => {
@@ -26,9 +54,7 @@ const handler = (e) => {
 const main = async () => {
   await mkdir('stats').catch(() => {});
   const packageNames = Object.keys(packageOptions) as (keyof typeof packageOptions)[];
-  for (const pkg of packageNames) {
+  await Promise.allSettled(packageNames.map((pkg) => buildPackage(pkg).catch(handler)));
-    await buildPackage(pkg).catch(handler);
-  }
 };
 
 void main();

.esbuild/server.ts

@@ -1,21 +1,32 @@
 import express from 'express';
 import type { NextFunction, Request, Response } from 'express';
 import cors from 'cors';
-import { getBuildConfig } from './util.js';
+import { getBuildConfig, defaultOptions } from './util.js';
 import { context } from 'esbuild';
 import chokidar from 'chokidar';
 
 const mermaidCtx = await context(
-  getBuildConfig({ minify: false, core: false, entryName: 'mermaid' })
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid' })
 );
 const mermaidIIFECtx = await context(
-  getBuildConfig({ minify: false, core: false, entryName: 'mermaid', format: 'iife' })
+  getBuildConfig({
+    ...defaultOptions,
+    minify: false,
+    core: false,
+    entryName: 'mermaid',
+    format: 'iife',
+  })
 );
 const externalCtx = await context(
-  getBuildConfig({ minify: false, core: false, entryName: 'mermaid-example-diagram' })
+  getBuildConfig({
+    ...defaultOptions,
+    minify: false,
+    core: false,
+    entryName: 'mermaid-example-diagram',
+  })
 );
 const zenumlCtx = await context(
-  getBuildConfig({ minify: false, core: false, entryName: 'mermaid-zenuml' })
+  getBuildConfig({ ...defaultOptions, minify: false, core: false, entryName: 'mermaid-zenuml' })
 );
 const contexts = [mermaidCtx, mermaidIIFECtx, externalCtx, zenumlCtx];
 

.esbuild/util.ts

@@ -8,14 +8,21 @@ import { jisonPlugin } from './jisonPlugin.js';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
-interface MermaidBuildOptions {
+export interface MermaidBuildOptions {
   minify: boolean;
-  core?: boolean;
+  core: boolean;
-  metafile?: boolean;
+  metafile: boolean;
-  format?: 'esm' | 'iife';
+  format: 'esm' | 'iife';
   entryName: keyof typeof packageOptions;
 }
 
+export const defaultOptions: Omit<MermaidBuildOptions, 'entryName'> = {
+  minify: false,
+  metafile: false,
+  core: false,
+  format: 'esm',
+} as const;
+
 const buildOptions = (override: BuildOptions): BuildOptions => {
   return {
     bundle: true,
@@ -32,25 +39,32 @@ const buildOptions = (override: BuildOptions): BuildOptions => {
   };
 };
 
-export const getBuildConfig = ({
+const getFileName = (fileName: string, { core, format, minify }: MermaidBuildOptions) => {
-  minify,
+  if (core) {
-  core,
+    fileName += '.core';
-  entryName,
+  } else if (format === 'esm') {
-  metafile,
+    fileName += '.esm';
-  format,
+  }
-}: MermaidBuildOptions): BuildOptions => {
+  if (minify) {
+    fileName += '.min';
+  }
+  return fileName;
+};
+
+export const getBuildConfig = (options: MermaidBuildOptions): BuildOptions => {
+  const { core, entryName, metafile, format } = options;
   const external: string[] = ['require', 'fs', 'path'];
   const { name, file, packageName } = packageOptions[entryName];
+  const outFileName = getFileName(name, options);
   let output: BuildOptions = buildOptions({
     absWorkingDir: resolve(__dirname, `../packages/${packageName}`),
     entryPoints: {
-      [`${name}${core ? '.core' : format === 'iife' ? '' : '.esm'}${
+      [outFileName]: `src/${file}`,
-        minify ? '.min' : ''
-      }`]: `src/${file}`,
     },
     metafile,
     minify,
     logLevel: 'info',
+    chunkNames: `chunks/${outFileName}/[name]-[hash]`,
   });
 
   if (core) {

cSpell.json

@@ -94,6 +94,7 @@
     "nikolay",
     "nirname",
     "orlandoni",
+    "outdir",
     "pathe",
     "pbrolin",
     "phpbb",

packages/mermaid-zenuml/package.json

@@ -19,6 +19,7 @@
     "mermaid"
   ],
   "scripts": {
+    "clean": "rimraf dist",
     "prepublishOnly": "pnpm -w run build"
   },
   "repository": {