很多时候，一个vue项目打包下来，app.js 主文件都会有几兆，大点的项目都会有十几二十兆，还有app.css的打包文件可能也会很大。

对于一般的服务器来说，首次去打开部署好的平台页面，加载起来会很慢。

这样的速度肯定是不能容忍的。

当然，首要的途径是先尽量给打包文件app.js和app.css减重，让它更轻。不过，大部分时候，这个文件再怎么建你也不能从20M减到10M,5M，甚至更小。

所以，有个非常有效，直接的方法就是，给app.js和app.css压缩，build的时候，直接将app.js和app.css同步压缩，生成app.js.gz和app.css.gz文件。

效果显而易见：

直接减轻了5倍以上的容量大小。

具体怎么做：

考虑到不同版本的vue-cli和compression-webpack-plugin的不同版本，这里将三种不同的配置都列出来

一： vue-cli2.x 版本 + compression-webpack-plugin 版本 1.1.12

config目录下index.js 文件，找到“productionGzip” 将它的值由false 改成 true,productionGzipExtensions这个 的值一般默认就是js 和 css，意思就是说可以将js和css格式的文件压缩。

这里修改之后，需要在build目录下的webpack.prod.conf这个文件里，加上CompressionWebpackPlugin相关配置：

 需要注意的是:

filename: '[path].gz[query]' 这个配置使用于compression-webpack-plugin版本低于6.0，高于6.0的版本就不是这个配置了。

而且，vue-cli2.x的版本，如果子版本过，它支持的compression-webpack-plugin的版本也很低，一般使用 ^1.1.12这个版本，所以依赖安装的时候需要指定对应的版本，否则安装新的版本，打包会失败。

一： vue-cli3 + 版本 + compression-webpack-plugin 版本4.0.0以下 版本

这里的配置就比较直接，在vue.config.js文件中直接加入compression-webpack-plugin的相关配置就可以了，

引入插件，定义需要压缩的文件类型

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

  在configureWebpackp的插件plugins对象里，new出插件实例，并且加上正确的配置。

三： vue-cli3 + 版本 + compression-webpack-plugin 版本6.1.1 版本

其他和上面第二种方式一样，不一样的地方是，filename对应文件名格式配置不一样， 如果采用之前的格式，压缩出来的gz文件会有问题。

 

ps：为了省时间，没有验证compression-webpack-plugin更细的版本，比如5.x的版对应的配置，需要使用的时候测试一下。

当然，在build之前，你需要保证你安装了compression-webpack-plugin 这个插件的依赖，npm install --save-dev compression-webpack-plugin。 （记得指定对应的版本）

npm run build 之后，你会发现，dist>static 路径下js和css文件夹里都多了一个对应的app.js.gz和app.css.gz 文件,大小要比主文件小很多。

前端打包压缩文件准备好之后，把dist文件夹丢到nginx服务器相应的目录中。

然后需要配置nginx的配置文件，也就是nginx.conf文件，

在http里面加上：

gzip_static on;
gzip_proxied expired no-cache no-store private auth;

代表你要开启nginx服务的 gzip_static 模块，这样在浏览器加载项目页面时，默认会加载压缩过的文件，然后浏览器自己会解压压缩文件并正确渲染。

当然，在修改过nginx.conf文件之后，你需要重新启动nginx服务。

这时，如果你碰到这个问题：

那么恭喜你，你 没有配置nginx的gzip_static 模块，所以它不认识。

怎么办呢？很简单。

进到nginx解压之后的安装包，你会看到一个configure文件，那么你可以用它来重新安装gzip_static 模块。

运行这个命令：

./configure --with-http_gzip_static_module

然后会开始安装，装完之后，继续执行：

make

make install

到此，nginx的gzip_static 模块就安装配置完成了。

然后再重新启动nginx服务，你再去打开你的网页，会发现他加载了压缩文件，这样速度就快了很多。

当然，nginx肯能还有一个坑，那就是

你可能连configure文件都没找到， 因为有的版本它确实没有这个configure，需要你手动安装，具体过程自行搜索。我的建议是重新找一个完整的nginx安装包，重新安装nginx。

最后，记住要备份nginx.conf这个配置文件。

补充一下： 关于webpack的sourceMap这个配置选项，正常我们打包部署到生产环境，需要将sourceMap设置为false。这个打包的时候就不会生成对应的map文件，减小打包后的体积。如果需要在生产测试环境调试代码，那可以临时将这个选项设置为true。