『初体验』vite插件开发（打包后计算产出文件夹大小）

介绍

实现功能如下：

• 计算产出文件夹大小（dist）
• 可支持配置 ‘byte’, ‘KB’, ‘MB’, ‘GB’

效果

开发

• 创建插件文件 vite-plugin-log-output-size.ts
• 写入以下代码

// vite-plugin-log-output-size.ts
import { PluginOption } from "vite";
 
type TUnit = 'byte' | 'KB' | 'MB' | 'GB'
 
export interface ILogOutputSizeOption {
    unit?: TUnit
}
 
/**
 * 计算打包后文件夹大小
 * @param {ILogOutputSizeOption} option 
 * @returns 
 */
 
export const logOutputSize = function ({ unit = 'MB' }: ILogOutputSizeOption = { unit: 'MB' }): PluginOption {
    let outDir: string
    return {
        name: 'log-output-size',
        apply: 'build',
        configResolved(resolvedConfig) {
            outDir = resolvedConfig.build.outDir
        },
 
        closeBundle: async function () {
            const fs = require('fs');
            const path = require('path');
 
            function convertSize(size: number, unit: TUnit) {
                const units = ['byte', 'KB', 'MB', 'GB'];
 
                let index = units.indexOf(unit);
                if (index < 0) {
                    index = 0;
                }
 
                while (size >= 1024 && index > 0) {
                    size /= 1024;
                    index--;
                }
 
                return `${size.toFixed(2)} ${unit}`;
            }
 
            function getFolderSize(folderPath: string) {
                let size = 0;
 
                fs.readdirSync(folderPath).forEach((fileName: string) => {
                    const filePath = path.join(folderPath, fileName);
                    const stats = fs.statSync(filePath);
 
                    if (stats.isFile()) {
                        size += stats.size;
                    } else if (stats.isDirectory()) {
                        size += getFolderSize(filePath);
                    }
                });
 
                return size;
            }
 
            const size = convertSize(getFolderSize(path.resolve(__dirname, outDir)), unit)
 
            console.log('\n')
            console.log('\x1b[91m', `【plugin:log-output-size】Folder Size: ${size}`);
            console.log('\n')
        }
    }
}复制

• 在 vite.config.ts 中配置

import { logOutputSize } from './vite-plugin-log-output-size'
export default defineConfig({
	...,
	plugins: [
        logOutputSize({
            unit: 'KB'
        })
    ],
	...
})复制

代码讲解

• 插件配置

export const logOutputSize = function ({ unit = 'MB' }: ILogOutputSizeOption = { unit: 'MB' }): PluginOption {
    return {
        name: 'log-output-size',
        apply: 'build',
        // 获取当前用户 output dir 配置
        configResolved(resolvedConfig) {
            ...
        },
		// 编译结束钩子
        closeBundle: async function () {
            ...
    }
}复制

• 获取用户 output dir 的配置

	let outDir: string
	return {
        name: 'log-output-size',
        apply: 'build',
        // 获取当前用户 output dir 配置
        configResolved(resolvedConfig) {
            // 存储最终解析的配置
            outDir = resolvedConfig.build.outDir
        },
		// 编译结束钩子
        closeBundle: async function () {
            ...
    }复制

• 在编译结束的钩子中计算文件夹大小并打印

 		closeBundle: async function () {
            const fs = require('fs');
            const path = require('path');
 
			// 转换格式
            function convertSize(size: number, unit: TUnit) {
                const units = ['byte', 'KB', 'MB', 'GB'];
 
                let index = units.indexOf(unit);
                if (index < 0) {
                    index = 0;
                }
 
                while (size >= 1024 && index > 0) {
                    size /= 1024;
                    index--;
                }
 
                return `${size.toFixed(2)} ${unit}`;
            }
 
	        // 递归获取文件夹大小
            function getFolderSize(folderPath: string) {
                let size = 0;
 
                fs.readdirSync(folderPath).forEach((fileName: string) => {
                    const filePath = path.join(folderPath, fileName);
                    const stats = fs.statSync(filePath);
 
                    if (stats.isFile()) {
                        size += stats.size;
                    } else if (stats.isDirectory()) {
                        size += getFolderSize(filePath);
                    }
                });
 
                return size;
            }
 
            const size = convertSize(getFolderSize(path.resolve(__dirname, outDir)), unit)
 
            console.log('\n')
            console.log('\x1b[91m', `【plugin:log-output-size】Folder Size: ${size}`);
            console.log('\n')
        }复制

参考资料

《Vite 插件开发文档》