gzip 压缩

nginx 开启静态 gzip 配合 Vue 构建

 vuecli 2.0配置

在站点配置添加如下代码：

    location ~* \.(css|js)$ {
       gzip_static on;
    }

这是 nginx 的静态 gzip功能，会自动查找对应扩展名的文件，如果存在 gzip 文件，就使用，如果没有就用原文件

 

配合 vue-cli 的构建工具，开启 config/index.js 中的

productionGzip: true

 

Vue默认没有安装相应webpack 插件，需要手动安装一下：

 

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

　　"compression-webpack-plugin": "^1.1.11", 目前这边不报错的版本

 

 

 

 

 

以上是 vuecli 2.0配置

 

vuecli3.0Gzip相关配置

1 下载loader

npm i -D compression-webpack-plugin

2 修改vue.config.js

const CompressionPlugin = require("compression-webpack-plugin")

module.exports = {
configureWebpack:config=>{
        if(progress.env.NODE_ENV === 'production'){
            return{
                plugins: [
                
                    new CompressionPlugin({
                        test:/\.js$|\.html$|.\css/, //匹配文件名
                        threshold: 10240,//对超过10k的数据压缩
                        deleteOriginalAssets: false //不删除源文件
                    })
                ]
            }
        }

    },
}