我正在参加「掘金·启航计划」。现在通过vite包获取不到打包耗费时间，之前alpha版本还是能获取到你打包耗费时间的。为什么要写这个自定义vite插件。因为有些项目需要优化，优化会涉及到打包后的体积和打包时间，体积很好能看到，但是时间现在vite版本没了，所以想写个vite插件来获取作为缩减打包时间证据。

实现

需要你自定义个getBulidTime.js文件来实现已经发布到npm上边可以通过npm命令来下载。 实现代码如下

function getBulidTime() {
    return {
        name: 'get-bulid-time',
        enforce: 'pre||post', // 插件执行的顺序，pre表示在alias之后，在vite的核心插件之前，post在核心插件之后
        // pre 首批被执行的插件，会在@rollup/plugin-alias插件执行之后执行。
        // normal(默认值)  第二批配执行的插件，会在vite的build阶段之前被执行，可以根据配置判断是否需要处理当前文件的代码。
        // post 会在vite的build阶段之后被执行，进行代码构建方面的工作(minimize、代码分析...)。
        apply:'build', //值可以是 build 或 serve 亦可以是一个函数，指明它们仅在 build 或 serve 模式时调用；如果不增加这个属性就会在run dev的时候也会输出buildStart中的信息
        buildStart() {
            console.log('只会执行一次的生命周期函数,开始bulid')
            console.time('time')
        },
        buildEnd() {
            // console.log('在构建阶段结束后被调用，此处构建结束只是代表所有模块转义完成；')
            // console.timeEnd('time')
        },
        closeBundle() {  // 在服务器关闭时被调用
            console.timeEnd('time')
            console.log('bulid结束')
        }
    }
}
module.exports= getBulidTime

引入

需要执行npm命令

npm install vite-plugin-getbuildtime --dev

这是我的vite集合包下的plugin-getbulidtime.js，目录结构vite/plugins/plugin-getbulidtime.js

import getBulidTime from 'vite-plugin-getbuildtime'
export default function getBulidTimeFn() {
    return getBulidTime()
}

这是在vite/index.js

import getBulidTimeFn from './plugins/plugin-getbulidtime'
export default function createVitePlugins(mode) {
    const vitePlugins = []
    vitePlugins.push(getBulidTimeFn())
    return vitePlugins
}

这个是在vite.congfig.js中引入vite插件集合

import createVitePlugins from './vite/index'
//plugins属性中直接引入这个函数
plugins: createVitePlugins(),

效果如下

开始build截图

结束bulid截图

实现vite自定义插件之获取打包时间

实现

引入

效果如下