webpack打包配置
开启gzip
应用场景:项目使用webpack4.x进行打包,打包后静态资源通过nginx转发配置
安装包:compression-webpack-plugin
vue.config.js配置:
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: config => {
// 开发环境不需要gzip
if (process.env.NODE_ENV !== 'production') return
config.plugins.push(
new CompressionPlugin({
// 正在匹配需要压缩的文件后缀
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大于10kb的会压缩
threshold: 10240
// 其余配置查看compression-webpack-plugin
})
)
},
}
nginx配置:
http{
gzip on;
gzip_start on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary off;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件,支持正则。此处表示ie6及以下不启用gzip(因为ie低版本不支持)
}
打包时遇到的问题:
1、Cannot read property ‘tapPromise‘ of undefined
解决方法:这是compression-webpack-plugin版本过高,安装低版本compression-webpack-plugin@5.0.1
2、Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade
解决方法: 将node_modules下面的caniuse-lite和browserslist这两个文件夹删除重新安装