Angular-Cli+nginx使用gzip static再次加快应用访问速度！！！

在上一篇文章中，我说过了如何通过配置nginx的gizp来加快ng2的应用访问速度，不知道的点这里。

后面有朋友评论说，可以使用gzip static呀，这样更快。首先来说下gzip static表示什么意思，就是说你可以直接将文件先压缩成gz，这样客户端访问的时候，nginx就直接返回就好了，而不像之前一样，需要nginx先压缩然后再将压缩的结果发送给客户端。

毫无疑问，使用gzip static会比之前的方式要更快。那么我们就来实现这一功能吧。

其实，在ng2的早期版本中，ng build的时候是会自动生成gz文件的，后来在某个版本之中把这个给去掉了，既然去掉了，那么使用cli就不能在生成gz了，既然cli不能生成gz，但是我们可以使用别的方式啊，对吧。因为cli里面其实是封装的webpack，那我们就知道了，webpack是有各种插件的，那想将文件压缩这种插件那是必须有的，对不对？

既然这样的话，那首先我们就得想办法把cli创建的项目转换成webpack的啊，翻看ng的命令，你会发现有个eject命令：

eject翻译过来就是发射的意思啊，看解释我们知道，运行这个命令之后，会输出webpack的配置文件出来。

在执行这个命令之前，我们来看下项目目录结构：

然后我们执行ng eject

你会发现它提示你成功了啊，然后告诉你现在需要使用下面的这些命令来构建了，就不能使用ng XXX了。这个你能理解的对不对？

命令之后，再看目录结构：

你会发现现在项目已经成为了一个webpack的项目了，那么你现在想干什么就随便你了啊。

现在我们需要引入webpack的压缩插件，执行一下命令安装：

cnpm i -D compression-webpack-plugin

然后在webpack的配置文件中使用这个插件：

首先在webpack的顶部，你会发现里面已经引入了很多其他的插件了，你直接在里面加入下面这句，引入就好：

const CompressionWebpackPlugin = require(‘compression-webpack-plugin’);

然后找到plugins属性，将上面引入的插件添加到plugins属性中去：

new CompressionWebpackPlugin()

配置到这里就算完成了，现在我们可以来使用webpack构建了：

npm run build

执行以上命令之后，dist目录内容：

你会发现里面已经生成好gz文件了。

你会发现生成的文件里并没有压缩，ng eject命令生成的webpack文件里面居然没有压缩插件，那当然得加上UglifyJsPlugin了啊。

到这里才算把gz文件准备好了，下一步开始nginx配置gzip static，让nginx支持直接返回压缩文件了：

在之前我们配置gzip的地方，加上一句配置gzip_static on：

gzip  on;gzip_static on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 2;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;gzip_disable "MSIE [1-6]\.";

这样之后，重启nginx，然后重新访问应用。

看下图：

这个是在mac下执行dtruss -p 3224 2 >&1 | grep gz命令获取到信息，你会发现nginx已经开始直接获取gz文件了。

最后：