vue webpack 开启Gzip （配合nginx）

1.安装依赖(不加版本会报错)

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

2.打开项目中的prductionGzip选项，具体路径在config/index.js build下

增加下面配置：

    productionGzip: true,productionGzipExtensions: ['js', 'css'],

具体位置：

3.bulid/webpack.prod.conf.js 文件，

if( config.build.productionGzip ){//导入compression-webpack-pluginconst CompressionWebpackPlugin = require('compression-webpack-plugin')webpackConfig.plugins.push(new CompressionWebpackPlugin({//   asset: '[path].gz[query]',filename: '[path].gz[query]',algorithm: 'gzip',test: new RegExp('\\.(' +config.build.productionGzipExtensions.join('|') +')$'),threshold: 10240,// deleteOriginalAssets:true, //删除源文件，不建议minRatio: 0.8}))}

打包 npm run build

4.配置nginx

 #开启gzip功能
gzip on; 
#开启gzip静态压缩功能
gzip_static on; 
#gzip缓存大小
gzip_buffers 4 16k;
#gzip http版本
gzip_http_version 1.1;
#gzip 压缩级别 1-10 
gzip_comp_level 5;
#gzip 压缩类型
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;

5.测试

注意：

四、gzip_static的作用

　　nginx在设置了gzip on 后就已经打开了gzip压缩功能，不过这时候nginx所使用的是动态压缩。在动态压缩的情况下nginx会自动的将文件压缩成.gz文件(web页面也能看到gzip的标识)，这时候就算不配置webpack也能达到一样的效果。

但是动态压缩无疑会占用服务器的资源来进行此操作。

　　相对的nginx提供了静态压缩模式，也就是gzip_static，在这个模式下nginx会去寻找对应文件的.gz文件，只有.gz文件不存在的时候才会去压缩对应文件。这样就不会过度占用服务器资源。gzip_static功能依赖http_gzip_static_module 模块

我的默认已经安装了，点击下面链接检查有没有安装。
nginx|gzip_static 安装 - Window2016 - 博客园nginx中配置gzip_static on提示nginx: [emerg] unknown directive “gzip_static“ in 通过nginx配置开启解压缩静态文件gzip_stahttps://www.cnblogs.com/wujindong/p/14097253.html