打包构建优化

1、vite.config.js使用gzip压缩代码：

（1）确保你的项目是通过Vite创建的，或者已经将Webpack迁移至Vite。

（2）npm install --save-dev vite-plugin-compression

（3）vite.config.js文件配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteCompression from 'vite-plugin-compression';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteCompression({
verbose: true, // 是否启用详细打印
disable: false, // 是否禁用 gzip 压缩
threshold: 10240, // 压缩预设文件大小
algorithm: 'gzip', // 压缩算法
ext: '.gz', // 压缩文件后缀名
}),
],
build: {
// 其他构建配置
rollupOptions: {
output: {
entryFileNames: `assets/[name].[hash].js`,
chunkFileNames: `assets/[name].[hash].js`,
assetFileNames: `assets/[name].[hash].[ext]`
}
}
}
});

（4）在终端中运行以下命令来构建项目：npm run build

2、使用webpack打包压缩：在vue.config.js文件或者webpack.config.js中配置