vue项目优化

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这两个文件夹删除重新安装