Get size of build to display on page

[Akashic101]

I am trying to get the total size of the build folder to display it on the stats-page of my project. I tried to do this using addTransform but with that I only managed to get the (weirdly not accurate but close enough) size of a single file with this:

eleventyConfig.addTransform("addFileSize", async (content, outputPath) => {
    if (outputPath.endsWith(".html") && content.includes('FILESIZE')) {

      const fileSize = Buffer.from(content).length;
      return content.replace('FILESIZE', Math.round((fileSize / 1024) * 100) / 100);
    }
    return content;
  });

I am displaying it by replacing a string called FILESIZE on a website, thats how I got it to work. Now I want to show the entire size but since addTransform only works on each file and cannot see the others this approach doesn't work. Any ideas how I can get this done?

[pdehaan]

I haven't tried it, but there is https://www.11ty.dev/docs/events/#event-arguments

  eleventyConfig.on('eleventy.after', async ({ dir, results, runMode, outputMode }) => {
    // Read more below
  });

So maybe after a build completes, you could find the total file size of the dir.output directory and then update whatever template you want to display that in. Or, if you can tolerate the data being slightly inaccurate, you could get the file size of the dir.output directory and store that in a global data file which you can use in templates for the next build (with the understanding that the data will always be for the previous build).

[Akashic101]

Thats a great point to start with, I managed to get the exact size with following function

function getFolderSize(folderPath) {
	let totalSize = 0;

	function traverseDirectory(currentPath) {
		const files = fs.readdirSync(currentPath);

		files.forEach((file) => {
			const filePath = path.join(currentPath, file);
			const stats = fs.statSync(filePath);

			if (stats.isDirectory()) {
				traverseDirectory(filePath);
			} else {
				totalSize += stats.size;
			}
		});
	}

	traverseDirectory(folderPath);
	return totalSize;
}

which I can call in eleventy.after such as

eleventyConfig.on('eleventy.after', async ({ dir, results }) => {
	const folderPath = dir.output;
	const sizeInBytes = getFolderSize(folderPath);

	for (let i = 0; i < results.length; i++) {
		if (results[i].content.includes('TOTALBUILDSIZE')) {
			console.log("This should replace TOTALBUILDSIZE with " + sizeInBytes)
		}
	}
});

Problem is that using

results[i].content.replace('TOTALBUILDSIZE', sizeInBytes)

to replace the placeholder does not work. Any idea why that is not working?

[Akashic101]

I figured out it, eleventy.after only provides the result of what has been written to disk which is why replacing the word only changed it there. With following function it overwrites the file with the replaced placeholder:

const fs = require('fs');
const path = require('path');

function getFolderSize(folderPath) {
	let totalSize = 0;

	function traverseDirectory(currentPath) {
		const files = fs.readdirSync(currentPath);

		files.forEach((file) => {
			const filePath = path.join(currentPath, file);
			const stats = fs.statSync(filePath);

			if (stats.isDirectory()) {
				traverseDirectory(filePath);
			} else {
				totalSize += stats.size;
			}
		});
	}

	traverseDirectory(folderPath);
	return totalSize;
}

eleventyConfig.on('eleventy.after', async ({ dir, results }) => {
	const folderPath = dir.output;
	const sizeInBytes = getFolderSize(folderPath);
	const filePath = `${dir.output}/stats.html`;

	for (let i = 0; i < results.length; i++) {
		if (results[i].content.includes('TOTALBUILDSIZE')) {
			results[i].content = results[i].content.replace('TOTALBUILDSIZE', Math.round((sizeInBytes / 1024) * 100) / 100);
			fs.writeFileSync(filePath, results[i].content);
		}
	}
});