vue2
-
安装
yarn add compression-webpack-plugin -D
-
使用手册
vue.config.js
// 使用webpack 压缩工具
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 判断是否是生产环境
const isProd= process.env.NODE_ENV !== 'development'
chainWebpack: (config) => {
//忽略的打包文件
config.externals({
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'axios': 'axios',
'element-ui': 'ELEMENT',
})
if (isProd) {
// 对超过10kb的文件gzip压缩
config.plugin('compressionPlugin').use(
new CompressionWebpackPlugin({
test: /\.(js|css|html)$/, // 匹配文件名
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 1, // 压缩率小于1才会压缩
threshold: 10240, // >10kb
deleteOriginalAssets: false //是否删除原文件
})
);
};
},
vue3+vite
GitHub地址: https://github.com/nonzzz/vite-plugin-compression
- 安装
yarn add vite-plugin-compression2 -D
- 使用
vite.config.js
// vite 打包压缩工具
import { compression } from 'vite-plugin-compression2'
export default defineConfig({
plugins: [
// ...your plugin
compression({ // gzip压缩
algorithm: 'gzip', // 默认使用gzip压缩
filename: '[path][base].gz', // 压缩后的文件名
threshold: 10240, // 对大于 10kb 的文件进行压缩
deleteOriginalAssets: false //是否删除原文件
})
],
});