@mui/internal-bundle-size-checker 1.0.4 → 1.0.5

package/src/viteBuilder.js

@@ -0,0 +1,229 @@
+import path from 'path';
+import fs from 'fs/promises';
+import { gzipSync } from 'zlib';
+import { build, transformWithEsbuild } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const rootDir = process.cwd();
+
+/**
+ * @typedef {Object} ManifestChunk
+ * @property {string} file - Hashed filename of the chunk
+ * @property {string} [name] - Optional name of the chunk
+ * @property {string} [src] - Original source path
+ * @property {string[]} [css] - Associated CSS files
+ * @property {boolean} [isEntry] - Indicates if this is an entry point
+ * @property {boolean} [isDynamicEntry] - Indicates if this is a dynamic entry point
+ * @property {string[]} [imports] - Imported chunk keys
+ * @property {string[]} [dynamicImports] - Dynamically imported chunk keys
+ */
+
+/**
+ * @typedef {Record<string, ManifestChunk>} Manifest
+ */
+
+/**
+ * Creates vite configuration for bundle size checking
+ * @param {ObjectEntry} entry - Entry point (string or object)
+ * @param {CommandLineArgs} args
+ * @returns {Promise<{configuration: import('vite').InlineConfig, externalsArray: string[]}>}
+ */
+async function createViteConfig(entry, args) {
+  const entryName = entry.id;
+  let entryContent;
+
+  if (entry.code && (entry.import || entry.importedNames)) {
+    entryContent = entry.code;
+  } else if (entry.code) {
+    entryContent = entry.code;
+  } else if (entry.import) {
+    if (entry.importedNames && entry.importedNames.length > 0) {
+      // Generate named imports for each name in the importedNames array
+      const imports = entry.importedNames
+        .map((name) => `import { ${name} } from '${entry.import}';`)
+        .join('\n');
+      const logs = entry.importedNames.map((name) => `console.log(${name});`).join('\n');
+      entryContent = `${imports}\n${logs}`;
+    } else {
+      // Default to import * as if importedNames is not defined
+      entryContent = `import * as _ from '${entry.import}';\nconsole.log(_);`;
+    }
+  } else {
+    throw new Error(`Entry "${entry.id}" must have either code or import property defined`);
+  }
+
+  // Use externals from the entry object
+  const externalsArray = entry.externals || ['react', 'react-dom'];
+
+  // Ensure build directory exists
+  const outDir = path.join(rootDir, 'build', entryName);
+  await fs.mkdir(outDir, { recursive: true });
+  /**
+   * @type {import('vite').InlineConfig}
+   */
+  const configuration = {
+    configFile: false,
+    root: rootDir,
+
+    build: {
+      write: true,
+      minify: true,
+      outDir,
+      emptyOutDir: true,
+      rollupOptions: {
+        input: '/index.tsx',
+        external: externalsArray,
+        plugins: [
+          ...(args.analyze
+            ? [
+                // File sizes are not accurate, use it only for relative comparison
+                visualizer({
+                  filename: `${outDir}.html`,
+                  title: `Bundle Size Analysis: ${entryName}`,
+                  projectRoot: rootDir,
+                  open: false,
+                  gzipSize: true,
+                  brotliSize: false,
+                  template: 'treemap',
+                }),
+              ]
+            : []),
+        ],
+      },
+      manifest: true,
+      reportCompressedSize: true,
+      target: 'esnext',
+    },
+
+    esbuild: {
+      legalComments: 'none',
+    },
+
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
+    },
+    logLevel: args.verbose ? 'info' : 'silent',
+    // Add plugins to handle virtual entry points
+    plugins: [
+      {
+        name: 'virtual-entry',
+        resolveId(id) {
+          if (id === '/index.tsx') {
+            return `\0virtual:index.tsx`;
+          }
+          if (id === '/entry.tsx') {
+            return `\0virtual:entry.tsx`;
+          }
+          return null;
+        },
+        load(id) {
+          if (id === `\0virtual:index.tsx`) {
+            return transformWithEsbuild(`import('/entry.tsx').then(console.log)`, id);
+          }
+          if (id === `\0virtual:entry.tsx`) {
+            return transformWithEsbuild(entryContent, id);
+          }
+          return null;
+        },
+      },
+    ],
+  };
+
+  return { configuration, externalsArray };
+}
+
+/**
+ * Walks the dependency tree starting from a chunk and collects all dependencies
+ * @param {string} chunkKey - The key of the chunk to start from
+ * @param {Manifest} manifest - The Vite manifest
+ * @param {Set<string>} visited - Set of already visited chunks to avoid cycles
+ * @returns {Set<string>} - Set of all chunk keys in the dependency tree
+ */
+function walkDependencyTree(chunkKey, manifest, visited = new Set()) {
+  if (visited.has(chunkKey)) {
+    return visited;
+  }
+
+  visited.add(chunkKey);
+  const chunk = manifest[chunkKey];
+
+  if (!chunk) {
+    throw new Error(`Chunk not found in manifest: ${chunkKey}`);
+  }
+
+  // Walk through static imports
+  if (chunk.imports) {
+    for (const importKey of chunk.imports) {
+      walkDependencyTree(importKey, manifest, visited);
+    }
+  }
+
+  // Walk through dynamic imports
+  if (chunk.dynamicImports) {
+    for (const dynamicImportKey of chunk.dynamicImports) {
+      walkDependencyTree(dynamicImportKey, manifest, visited);
+    }
+  }
+
+  return visited;
+}
+
+/**
+ * Process vite output to extract bundle sizes
+ * @param {string} outDir - The output directory
+ * @param {string} entryName - The entry name
+ * @returns {Promise<Map<string, { parsed: number, gzip: number }>>} - Map of bundle names to size information
+ */
+async function processBundleSizes(outDir, entryName) {
+  // Read the manifest file to find the generated chunks
+  const manifestPath = path.join(outDir, '.vite/manifest.json');
+  const manifestContent = await fs.readFile(manifestPath, 'utf8');
+  /** @type {Manifest} */
+  const manifest = JSON.parse(manifestContent);
+
+  // Find the main entry point JS file in the manifest
+  const mainEntry = manifest['virtual:entry.tsx'];
+
+  if (!mainEntry) {
+    throw new Error(`No main entry found in manifest for ${entryName}`);
+  }
+
+  // Walk the dependency tree to get all chunks that are part of this entry
+  const allChunks = walkDependencyTree('virtual:entry.tsx', manifest);
+
+  // Process each chunk in the dependency tree in parallel
+  const chunkPromises = Array.from(allChunks, async (chunkKey) => {
+    const chunk = manifest[chunkKey];
+    const filePath = path.join(outDir, chunk.file);
+    const fileContent = await fs.readFile(filePath, 'utf8');
+
+    // Calculate sizes
+    const parsed = Buffer.byteLength(fileContent);
+    const gzip = Buffer.byteLength(gzipSync(fileContent));
+
+    // Use chunk key as the name, or fallback to entry name for main chunk
+    const chunkName = chunkKey === 'virtual:entry.tsx' ? entryName : chunkKey;
+    return /** @type {const} */ ([chunkName, { parsed, gzip }]);
+  });
+
+  const chunkEntries = await Promise.all(chunkPromises);
+  return new Map(chunkEntries);
+}
+
+/**
+ * Get sizes for a vite bundle
+ * @param {ObjectEntry} entry - The entry configuration
+ * @param {CommandLineArgs} args - Command line arguments
+ * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
+ */
+export async function getViteSizes(entry, args) {
+  // Create vite configuration
+  const { configuration } = await createViteConfig(entry, args);
+  const outDir = path.join(rootDir, 'build', entry.id);
+
+  // Run vite build
+  await build(configuration);
+
+  // Process the output to get bundle sizes
+  return processBundleSizes(outDir, entry.id);
+}

package/src/webpackBuilder.js

@@ -0,0 +1,267 @@
+import { promisify } from 'util';
+import path from 'path';
+import webpackCallbackBased from 'webpack';
+import CompressionPlugin from 'compression-webpack-plugin';
+import TerserPlugin from 'terser-webpack-plugin';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
+import { createRequire } from 'node:module';
+
+/**
+ * @type {(options: webpackCallbackBased.Configuration) => Promise<webpackCallbackBased.Stats>}
+ */
+// @ts-expect-error Can't select the right overload
+const webpack = promisify(webpackCallbackBased);
+const rootDir = process.cwd();
+const require = createRequire(import.meta.url);
+
+/**
+ * Creates webpack configuration for bundle size checking
+ * @param {ObjectEntry} entry - Entry point (string or object)
+ * @param {CommandLineArgs} args
+ * @returns {Promise<{configuration: import('webpack').Configuration, externalsArray: string[]}>}
+ */
+async function createWebpackConfig(entry, args) {
+  const analyzerMode = args.analyze ? 'static' : 'disabled';
+  const concatenateModules = !args.accurateBundles;
+
+  const entryName = entry.id;
+  let entryContent;
+
+  if (entry.code && (entry.import || entry.importedNames)) {
+    entryContent = entry.code;
+  } else if (entry.code) {
+    entryContent = entry.code;
+  } else if (entry.import) {
+    if (entry.importedNames && entry.importedNames.length > 0) {
+      // Generate named imports for each name in the importedNames array
+      const imports = entry.importedNames
+        .map((name) => `import { ${name} } from '${entry.import}';`)
+        .join('\n');
+      const logs = entry.importedNames.map((name) => `console.log(${name});`).join('\n');
+      entryContent = `${imports}\n${logs}`;
+    } else {
+      // Default to import * as if importedNames is not defined
+      entryContent = `import * as _ from '${entry.import}';\nconsole.log(_);`;
+    }
+  } else {
+    throw new Error(`Entry "${entry.id}" must have either code or import property defined`);
+  }
+
+  /**
+   * Generate externals function from an array of package names
+   * @param {string[]} packages - Array of package names to exclude (defaults to react and react-dom)
+   * @returns {function} - Function to determine if a request should be treated as external
+   */
+  function createExternalsFunction(packages = ['react', 'react-dom']) {
+    /**
+     * Check if a request should be treated as external
+     * Uses the new recommended format to avoid deprecation warnings
+     * @param {{ context: string, request: string }} params - Object containing context and request
+     * @param {Function} callback - Callback to handle the result
+     */
+    return ({ request }, callback) => {
+      // Iterate through all packages and check if request is equal to or starts with package + '/'
+      for (const pkg of packages) {
+        if (request === pkg || request.startsWith(`${pkg}/`)) {
+          return callback(null, `commonjs ${request}`);
+        }
+      }
+
+      return callback();
+    };
+  }
+
+  // Use externals from the entry object
+  const externalsArray = entry.externals || ['react', 'react-dom'];
+
+  /**
+   * @type {import('webpack').Configuration}
+   */
+  const configuration = {
+    externals: [
+      // @ts-expect-error -- webpack types are not compatible with the current version
+      createExternalsFunction(externalsArray),
+    ],
+    mode: 'production',
+    optimization: {
+      concatenateModules,
+      minimizer: [
+        new TerserPlugin({
+          test: /\.m?js(\?.*)?$/i,
+          // Avoid creating LICENSE.txt files for each module
+          // See https://github.com/webpack-contrib/terser-webpack-plugin#remove-comments
+          terserOptions: {
+            format: {
+              comments: false,
+            },
+          },
+          extractComments: false,
+        }),
+      ],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.[jt]sx?$/,
+          include: rootDir,
+          exclude: /node_modules/,
+          use: {
+            loader: require.resolve('babel-loader'),
+            options: {
+              presets: [
+                require.resolve('@babel/preset-react'),
+                require.resolve('@babel/preset-typescript'),
+              ],
+            },
+          },
+        },
+        {
+          test: /\.css$/,
+          use: [require.resolve('css-loader')],
+        },
+        {
+          test: /\.(png|svg|jpg|gif)$/,
+          use: [require.resolve('file-loader')],
+        },
+      ],
+    },
+    output: {
+      filename: '[name].js',
+      library: {
+        // TODO: Use `type: 'module'` once it is supported (currently incompatible with `externals`)
+        name: 'M',
+        type: 'var',
+        // type: 'module',
+      },
+      path: path.join(rootDir, 'build'),
+    },
+    plugins: [
+      new CompressionPlugin({
+        filename: '[path][base][fragment].gz',
+      }),
+      new BundleAnalyzerPlugin({
+        analyzerMode,
+        // We create a report for each bundle so around 120 reports.
+        // Opening them all is spam.
+        // If opened with `webpack --config . --analyze` it'll still open one new tab though.
+        openAnalyzer: false,
+        // '[name].html' not supported: https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/12
+        reportFilename: `${entryName}.html`,
+        logLevel: 'warn',
+      }),
+    ],
+    // A context to the current dir, which has a node_modules folder with workspace dependencies
+    context: rootDir,
+    entry: {
+      // This format is a data: url combined with inline matchResource to obtain a virtual entry.
+      // See https://github.com/webpack/webpack/issues/6437#issuecomment-874466638
+      // See https://webpack.js.org/api/module-methods/#import
+      // See https://webpack.js.org/api/loaders/#inline-matchresource
+      [entryName]: `./index.js!=!data:text/javascript;charset=utf-8;base64,${Buffer.from(entryContent.trim()).toString('base64')}`,
+    },
+    // TODO: 'browserslist:modern'
+    // See https://github.com/webpack/webpack/issues/14203
+    target: 'web',
+  };
+
+  // Return both the configuration and the externals array
+  return { configuration, externalsArray };
+}
+
+/**
+ * Process webpack stats to extract bundle sizes
+ * @param {import('webpack').Stats} webpackStats - The webpack stats object
+ * @returns {Map<string, { parsed: number, gzip: number }>} - Map of bundle names to size information
+ */
+function processBundleSizes(webpackStats) {
+  /** @type {Map<string, { parsed: number, gzip: number }>} */
+  const sizeMap = new Map();
+
+  if (!webpackStats) {
+    throw new Error('No webpack stats were returned');
+  }
+
+  if (webpackStats.hasErrors()) {
+    const statsJson = webpackStats.toJson({
+      all: false,
+      entrypoints: true,
+      errors: true,
+    });
+
+    const entrypointKeys = statsJson.entrypoints ? Object.keys(statsJson.entrypoints) : [];
+
+    throw new Error(
+      `ERROR: The following errors occurred during bundling of ${entrypointKeys.join(', ')} with webpack: \n${(
+        statsJson.errors || []
+      )
+        .map((error) => {
+          return `${JSON.stringify(error, null, 2)}`;
+        })
+        .join('\n')}`,
+    );
+  }
+
+  const stats = webpackStats.toJson({
+    all: false,
+    assets: true,
+    entrypoints: true,
+    relatedAssets: true,
+  });
+
+  if (!stats.assets) {
+    return sizeMap;
+  }
+
+  const assets = new Map(stats.assets.map((asset) => [asset.name, asset]));
+
+  if (stats.entrypoints) {
+    Object.values(stats.entrypoints).forEach((entrypoint) => {
+      let parsedSize = 0;
+      let gzipSize = 0;
+
+      if (entrypoint.assets) {
+        entrypoint.assets.forEach(({ name, size }) => {
+          const asset = assets.get(name);
+          if (asset && asset.related) {
+            const gzippedAsset = asset.related.find((relatedAsset) => {
+              return relatedAsset.type === 'gzipped';
+            });
+
+            if (size !== undefined) {
+              parsedSize += size;
+            }
+
+            if (gzippedAsset && gzippedAsset.size !== undefined) {
+              gzipSize += gzippedAsset.size;
+            }
+          }
+        });
+      }
+
+      if (!entrypoint.name) {
+        throw new Error('Entrypoint name is undefined');
+      }
+
+      sizeMap.set(entrypoint.name, { parsed: parsedSize, gzip: gzipSize });
+    });
+  }
+
+  return sizeMap;
+}
+
+/**
+ * Get sizes for a webpack bundle
+ * @param {ObjectEntry} entry - The entry configuration
+ * @param {CommandLineArgs} args - Command line arguments
+ * @returns {Promise<Map<string, { parsed: number, gzip: number }>>}
+ */
+export async function getWebpackSizes(entry, args) {
+  // Create webpack configuration
+  const { configuration } = await createWebpackConfig(entry, args);
+
+  // Run webpack
+  const webpackStats = await webpack(configuration);
+
+  // Process the webpack stats to get bundle sizes
+  return processBundleSizes(webpackStats);
+}