gzip压缩
vue-element-admin配置
安装依赖
npm install compression-webpack-plugin --save
在vue.config.js添加:
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['html','js', 'css']
然后继续在vue.config.js下面的configureWebpack中添加
这里有两种形式 configureWebpack: {}
// gzip压缩
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: false // 删除原文件
})
]
configureWebpack: (config)=>{}
// gzip压缩
const productionGzipExtensions = ['html', 'js', 'css']
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' + productionGzipExtensions.join('|') + ')$'
),
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
deleteOriginalAssets: true // 删除原文件
})
)
- filename:目标资源名称, [file] 会被替换成原始资源,[path] 会被替换成原始资源的路径, [query] 会被替换成查询字符串,默认值是 “[path].gz[query]”。
- algorithm:可以是 function(buf, callback) 或者字符串,对于字符串来说依照 zlib 的算法(或者 zopfli 的算法),默认值是 “gzip”。
- test:所有匹配该正则的资源都会被处理,默认值是全部资源。
- threshold:只有大小大于该值的资源会被处理,单位是 bytes,默认值是 0。
- minRatio:只有压缩率小于这个值的资源才会被处理,默认值是 0.8。
代码压缩
安装依赖:
cnpm i -D uglifyjs-webpack-plugin
在vue.config.js 最上边引入依赖
// 代码压缩
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
在vue.config.js module.exports configureWebpack 里配置
// 代码压缩
config.plugins.push(
new UglifyJsPlugin({
uglifyOptions: {
//生产环境自动删除console
compress: {
warnings: false, // 若打包错误,则注释这行
drop_debugger: true,
drop_console: true,
pure_funcs: ['console.log']
}
},
sourceMap: false,
parallel: true
})
)