Vue CLI 开启gzip压缩

墨蓝 2022-09-07 09:06 272阅读 0赞

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模块结束
    }