首页 前端知识 『初体验』vite插件开发(打包后计算产出文件夹大小)

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

2024-08-23 20:08:25 前端知识 前端哥 599 573 我要收藏

介绍

实现功能如下:

  • 计算产出文件夹大小(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 插件开发文档》

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16676.html
标签
Vite
评论
发布的文章

HTML5 基本框架

2024-09-01 23:09:50

HTML5取消边框的方法

2024-09-01 23:09:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!