vite-plugin-progress
Display with progress bar when building
English | 简体中文
📦 Install
npm i vite-plugin-progress -D
# yarn
yarn add vite-plugin-progress -D
# pnpm
pnpm i vite-plugin-progress -D
🦄 Usage
Add progress
plugin to vite.config.js / vite.config.ts
and configure it:
// vite.config.js / vite.config.ts
import progress from 'vite-plugin-progress'
export default {
plugins: [
progress()
]
}
Tip: During the first build,
transforms
andchunks
are not displayed.
Options
Accepts almost all of the same options as node-progress.
-
format
the format of the progress bar -
width
the displayed width of the progress bar defaulting to total -
complete
completion character defaulting to "\u2588" -
incomplete
incomplete character defaulting to "\u2591" -
renderThrottle
minimum time between updates in milliseconds defaulting to 16 -
clear
option to clear the bar on completion defaulting to false -
callback
optional function to call when the progress bar completes -
stream
the output stream defaulting to stderr -
head
head character defaulting to complete character -
srcDir
the directory of the assets being built defaulting to "src"
The format
option accepts the following tokens:
-
:bar
the progress bar itself -
:current
current tick number -
:total
total ticks -
:elapsed
time elapsed in seconds -
:percent
completion percentage -
:eta
estimated completion time in seconds -
:rate
rate of ticks per second
Use picocolors to sprinkle on a few colors.
Configure options
// vite.config.js / vite.config.ts
import progress from 'vite-plugin-progress'
export default {
plugins: [
progress({
format: 'building [:bar] :percent',
total: 200,
width: 60,
complete: '=',
incomplete: '',
})
]
}
// vite.config.js / vite.config.ts
import progress from 'vite-plugin-progress'
import colors from 'picocolors'
export default {
plugins: [
progress({
format: `${colors.green(colors.bold('Bouilding'))} ${colors.cyan('[:bar]')} :percent`
})
]
}
Thanks
This project is inspired progress-bar-webpack-plugin