先写个生成zip的功能。新建一个zip.js文件,放在和vite.config.js同一级,需先安装插件jszip:npm i jszip -D :
// zip.js 打包自动生成zip包,需npm i jszip -D
const plugin = function(fileName = 'equipMonitorDist', output){
const path = require('path');
if(!output)output = path.resolve(__dirname,'./equipMonitorDist');//./distTest是根据实际路径而来
fileName += '.zip';
const makeZip = function () {
const path = require('path')
const fs = require('fs')
const JSZip = require('jszip');
const zip = new JSZip()
const distPath = path.resolve(output)
const readDir = function (zip, dirPath) {
// 读取dist下的根文件目录
const files = fs.readdirSync(dirPath);
files.forEach(fileName => {
const fillPath = path.join(dirPath, "./", fileName)
const file = fs.statSync(fillPath);
// 如果是文件夹的话需要递归遍历下面的子文件
if (file.isDirectory()) {
const dirZip = zip.folder(fileName);
readDir(dirZip, fillPath);
} else {
// 读取每个文件为buffer存到zip中
zip.file(fileName, fs.readFileSync(fillPath))
}
});
}
const removeExistedZip = () => {
const dest = path.join(distPath, './' + fileName)
if (fs.existsSync(dest)) {
fs.unlinkSync(dest)
}
}
const zipDir = function () {
readDir(zip, distPath);
zip.generateAsync({
type: "nodebuffer", // 压缩类型
compression: "DEFLATE", // 压缩算法
compressionOptions: { // 压缩级别
level: 9
}
}).then(content => {
const dest = path.join(distPath, '../' + fileName)
removeExistedZip()
// 把zip包写到硬盘中,这个content现在是一段buffer
fs.writeFileSync(dest, content);
});
}
removeExistedZip()
zipDir(distPath)
}
return {
name: 'vite-plugin-auto-zip',
apply: 'build',
closeBundle(){
makeZip()
}
}
}
module.exports = plugin
在vite.config.js中引入插件,也可安装文件压缩插件npm i vite-plugin-compression -D:
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";
import myPlugin from './zip'
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
myPlugin(),
viteCompression({
threshold: 1024 * 500, // 对大于500kb的文件进行压缩
algorithm: 'gzip', // 采用的压缩算法,默认是 gzip
ext: '.gz', // 生成的压缩包后缀
}),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
build: {
sourcemap: false,
outDir: 'equipMonitorDist',
rollupOptions: {
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/jsEntry/[name]-[hash].js', //html引入的js文件
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
},
brotliSize: true, // 不统计
target: 'esnext',
minify: 'esbuild', // 混淆器,terser构建后文件体积更小
},
},
})
打包成功之后效果如下: