Vue CLI 开启gzip压缩

gizp压缩是一种http请求优化方式，通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩，可以减小60%以上的体积。
webpack在打包时可以借助 compression webpack plugin 实现gzip压缩，首先需要安装该插件：

下载webpack

npm install webpack@4.46.0 --save-dev

下载 compression-webpack-plugin 插件

npm install compression-webpack-plugin@6.1.1 --save-dev

//seo模块开始
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpack = require('webpack')
const path = require('path')
//seo模块结束
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    publicPath: "./",
    outputDir: "dist",
    assetsDir: "static",
    filenameHashing: true,
    productionSourceMap: false,//去掉索引
    lintOnSave: true,
    configureWebpack:config=>{
        if(process.env.NODE_ENV=='production'){
            return{
                plugins: [
                    new CompressionPlugin({
                        algorithm: 'gzip', // 使用gzip压缩
                        test: /\.js$|\.html$|\.css$/, // 匹配文件名
                        filename: '[path].gz[query]', // 压缩后的文件名(保持原文件名，后缀加.gz)
                        minRatio: 1, // 压缩率小于1才会压缩
                        threshold: 10240, // 对超过10k的数据压缩
                        deleteOriginalAssets: false, // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
                    }),
                ],
            }
        }
    },
    pages: {
        index: {
            // 入口文件
            entry: 'src/main.js',　　/*这个是根入口文件*/
            // 模板文件
            template: 'public/index.html',
            // 输出文件
            filename: 'index.html',
            // 页面title
            title: 'Index Page'
        },
        subpage: 'src/main.js'　　　　/*注意这个是*/
    },
    //打包配置结束
    devServer: {
        https: false, //协议
        open: true, //启动服务时自动打开浏览器访问
        proxy: { // 开发环境代理配置
            [process.env.VUE_APP_BASE_API]: {
                // 目标服务器地址，代理访问 http://localhost:8001
                target: process.env.VUE_APP_SERVICE_URL,
                changeOrigin: true, // 开启代理服务器，
                pathRewrite: {
                    // 将 请求地址前缀 /dev-api 替换为 空的，
                    ['^' + process.env.VUE_APP_BASE_API]: ''
                }
            }
        }
    },

    transpileDependencies: ['webpack-dev-server/client', 'swiper', 'dom7'],
    chainWebpack: config => {
        config.entry.app = ['@babel/polyfill', './src/main.js'];
    },
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        // 把px单位换算成rem单位
                        rootValue: 108, // // 设计稿宽度的1/10
                        selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                        propList: ['*'] // 需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部
                    })
                ]
            }
        }
    },

    //seo模块开始
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname, 'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }

    //seo模块结束
}