ESC 系统优化插件
介绍
esc-plugin 插件是一个基于 vite 环境在处理打包时的一些操作的插件. 插件包含：
- 打包进度条
- 打包之后生成项目压缩包
用法
- 安装
# npm
npm i esc-plugin -D
# yarn
yarn add esc-plugin -D
# pnpm
pnpm i esc-plugin -D-
使用：在
vite.config.js / vite.config.ts中配置
import { zip, progress, cdn } from 'esc-plugin';
export default {
plugins: [
progress(),
zip({
type: 'zip',
archiverName: 'newboard.zip',
sourceName: 'newboard',
}),
cdn({
prodUrl: 'http://xxx.com/js/{path}',
modules: [
{
name: 'echarts',
var: 'echarts',
path: 'echarts.js'
},
]
})
],
};progress 插件
- 参数：
-
format：自定义进度条的格式； -
width：进度条在终端中的宽度； -
complete：完成后的默认字符\u2588； -
incomplete：未完成的默认字符\u2591； -
renderThrottle：间隔更新时间默认 16（毫秒）； -
clear：完成后是否清除终端，默认 false； -
callback：完成后执行的回调函数； -
stream终端中的输出格式流，默认stderr； -
head：进度条的头字符； -
srcDir：构建文件的目录，默认是src；
- 参数 options 中的
format中各个标记含义：
-
:bar：代表进度条； -
:current：当前执行到哪的刻度； -
:total：总刻度； -
:elapsed：所用时间（秒）； -
:percent：完成的百分比； -
:allTime：预计完成时间（秒）； -
:rate：每一秒的速率；
- 使用（带参数）：
// vite.config.js / vite.config.ts
import { progress } from 'esc-plugin';
export default {
plugins: [
progress({
format: 'building [:bar] :percent',
total: 200,
width: 60,
complete: '=',
incomplete: '',
}),
],
};zip 插件
- 参数：
-
type：压缩包格式； -
archiverName：压缩包文件名； -
sourceName：需要压缩的文件夹；
- 使用（带参数）：
// vite.config.js / vite.config.ts
import { progress } from 'esc-plugin';
export default {
plugins: [
zip({
type: 'zip',
archiverName: 'xxx.zip',
sourceName: 'xxx',
}),
],
};cdn 插件
- 参数：
-
prodUrl：覆盖全局 prodUrl 属性，允许为特定的模块指定 CDN 的位置, 如：http://xxx.com/js/{path}； -
modules：需要cdn的模块；