Next bundle diff

bundleDiff.js

// Copy / paste `next build` output below for the two builds you want to compare. Output:
//
// Route                                      First load JS
// /                                          1.2 MB   -> 1.21 MB  (+10.24 kB)
// /_app                                      607 kB   -> 302 kB   (-305.00 kB)
// [...]
// /verticals/[specifier]                     1.14 MB  -> 1.15 MB  (+10.24 kB)

const oldStats = `
┌ λ /                                                                                       2.81 kB         1.2 MB
├   /_app                                                                                   0 B             607 kB
[...]
└ ● /verticals/[specifier]                                                                  1.31 kB        1.14 MB
`

const newStats = `
┌ λ /                                                                7.5 kB         1.21 MB
├   /_app                                                            0 B             302 kB
[...]
└ ● /verticals/[specifier]                                           592 B          1.15 MB
`

function parseInput(str) {
  const lines = str.trim().split('\n');
  const inputObj = {};
  
  lines.forEach(lineRaw => {
    const line = lineRaw.substring(4); // Strip formatting prior to the /
    if (!line.startsWith('/')) return; // Not a valid route entry
    const parts = line.split(/\s+/);
    const route = parts[0];
    const size = parseFloat(parts[parts.length - 2]);
    const unit = parts[parts.length - 1];
    inputObj[route] = { size, unit };
  });

  return inputObj;
}

function generateDiff(oldStr, newStr) {
  const routePadding = 42;
  const oldRoutes = parseInput(oldStr);
  const newRoutes = parseInput(newStr);

  const convertToKb = (size, unit) => unit === 'MB' ? size * 1024 : size;
  
  const routes = [...new Set([...Object.keys(oldRoutes), ...Object.keys(newRoutes)])].sort();
  let output = `${"Route".padEnd(routePadding)} First load JS\n`;
  
  routes.forEach(route => {
    if (oldRoutes[route] && newRoutes[route] && oldRoutes[route].size !== newRoutes[route].size) {
      const oldSize = convertToKb(oldRoutes[route].size, oldRoutes[route].unit);
      const newSize = convertToKb(newRoutes[route].size, newRoutes[route].unit);
      const change = newSize - oldSize;
      const oldSizeFormatted = oldRoutes[route].unit === 'MB' ? `${oldRoutes[route].size} MB` : `${oldSize} kB`;
      const newSizeFormatted = newRoutes[route].unit === 'MB' ? `${newRoutes[route].size} MB` : `${newSize} kB`;
      const changeFormatted = change > 0 ? `+${change.toFixed(2)} kB` : `${change.toFixed(2)} kB`;
      
      output += `${route.padEnd(routePadding)} ${oldSizeFormatted.padEnd(8)} -> ${newSizeFormatted.padEnd(8)} (${changeFormatted.padEnd(8)})\n`;
    }
  });

  return output;
}

console.log(generateDiff(oldStats, newStats));