Nginx开启gzip开启极速体验

借助webpack插件compression-webpack-plugin开启gizp压缩.

上周把代码放到生产环境的时候发现首屏加载非常的慢，明明使用了webpack代码分割，但是打开速度还是需要6-7秒的时间，大部分依赖都使用了按需引入，查看服务器带宽的时候才发现，我的天，每秒只有200k左右的下载速度. 查看Nginx配置的时候，果然，缓存和gizp都没有开，配置一番后，速度果然快了很多，至于是多少呢？大概2秒左右就能加载出首屏，怎么配置？

首先我们的代码需要在打包的时候将每一份文件压缩成zip文件，这里需要借助一个webpack插件便于我们打包压缩.

先安装插件:

npm i -D compression-webpack-plugin

这个项目是使用vue-cli3做的，所以需要在vue.config.js里面使用，如果是cli2.0的项目还是需要在webpack.config.js添加配置.

webpack.config.js引入compression-webpack-plugin

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

在plugins添加:(如果需要更具体的配置，建议查看webpack文档)

new CompressionPlugin({

                    test: /\.js$|\.html$|\.css/,
                    threshold: 10240,
                    deleteOriginalAssets: false
                })

然后build一下，你会发现你的css文件和js下多了很多个名字一样的压缩包.

像我的这个react博客也同样使用了gzip压缩.

方法都是一样的，先安装，在webpack.config.js中引入compression-webpack-plugin

然后再:

new CompressionPlugin({

                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240,
                        deleteOriginalAssets: false
                    })

然后再build.

顺便贴一下我的nginx配置

在nginx.conf中的http添加如下代码:

gzip on;

        # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
        gzip_min_length 200;

        # gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间
        gzip_comp_level 2;

        # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
        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;

        # 是否在http header中添加Vary: Accept-Encoding，建议开启
        gzip_vary on;

        # 禁用IE 6 gzip
        gzip_disable "MSIE [1-6]\.";

重载配置，你会发现你的网站加载速度快了很多有没有，好了，快使用nginx开启你的极速之旅吧!