Vue-cli3 打包优化

1.开启gzip
使用compression-webpack-plugin插件
安装依赖（npm install --save-dev [email protected] 或者 yarn add [email protected] --dev）

    // 在vue.config.js配置
    // gzip 压缩
    const CompressionWebpackPlugin = require("compression-webpack-plugin");
    const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
    module.exports = {
        configureWebpack: config => {
            const plugins = [];
            // Begin 生成 gzip 压缩文件
            plugins.push(
                new CompressionWebpackPlugin({
                    filename: "[path].gz[query]",
                    algorithm: "gzip",
                    test: productionGzipExtensions,
                    threshold: 10240, // 大于10k就压缩（只处理比这个值大的资源，按字节计算）
                    minRatio: 0.8 // 只有压缩率比这个值小的资源才会被处理
                })
            );
            // End 生成 gzip 压缩文件
            config.plugins = [...config.plugins, ...plugins];
        },
        // 其他配置代码
    }

    // 在nginx配置
    http {
        gzip  on;   #开启gzip
        gzip_min_length 10k; #低于10kb的资源不压缩
        gzip_comp_level 3; #压缩级别【1-9】，越大压缩率越高，同时消耗cpu资源也越多，建议设置在4左右。
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;  #需要压缩哪些响应类型的资源，多个空格隔开。不建议压缩图片
        gzip_disable "MSIE [1-6]\.";  #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
        gzip_vary on;  #是否添加“Vary: Accept-Encoding”响应头
        gzip_static on; #检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容，不存在则先压缩再返回
        // 其他配置代码
    }

查看gzip是否生效
    浏览器文件请求的请求头(Request Headers)包含字段Accept-Encoding: gzip代表浏览器支持gzip压缩文件
    文件响应头(Response Headers)包含字段Content-Encoding: gzip代表返回的是压缩文件
    同时NetWork一栏还可以查看到文件的size实际大小和实际的请求（gzip）文件大小
判断gzip是否使用前端打包的gz文件
    浏览器请求的响应头(Response Headers)包含字段ETag的值开头是否有W/，有表示这是nginx压缩的，没有就是使用前端提供的gz文件

2.index.html缓存问题

// 在nginx配置
    http {
        server {
            location = /index.html {
                add_header Cache-Control "no-cache";
            }
            // 其他配置代码
        }
        // 其他配置代码
    }

3.使用cdn

// 在vue.config.js配置（配置好后，在index.html头部加上对应的cdn）
    module.exports = {
        chainWebpack: (config) => {
            //忽略的打包文件
            config.externals({
                'vue': 'Vue',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios',
                'element-ui': 'ELEMENT',
            })
        }
        // 其他配置代码
    }

4.图片过大时记得压缩（ https://tinypng.com/ ）
5.productionSourceMap
如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建