Rat's

宝塔面板LNMP开启Brotli压缩,可提高网站加载速度
说明:Brotli是Google推出的开源压缩算法,通过变种的LZ77算法、Huffman编码以及二阶文本建模等方...
扫描右侧二维码阅读全文
13
2019/06

宝塔面板LNMP开启Brotli压缩,可提高网站加载速度

说明:BrotliGoogle推出的开源压缩算法,通过变种的LZ77算法、Huffman编码以及二阶文本建模等方式进行数据压缩,与其他压缩算法相比,它有着更高的压缩效率,性能也比我们目前常见的Gzip17-25%,可以帮我们更高效的压缩网页中的各类文件大小及脚本,从而提高加载速度,提升网页浏览体验。博主目前也给开启了Brotli压缩,体验还行吧,这里就说下宝塔面板的开启方法。

安装

1、下载Brotli

cd /www/server
#下载brotli
git clone https://github.com/google/ngx_brotli.git
cd ngx_brotli
#更新brotli
git submodule update --init

2、编译Nginx

提示:手动编译只测试过Nginx 1.15,部分版本好像会提示缺少模块,建议使用后面的宝塔脚本编译方法。

先查看目前的Nginx版本信息,使用命令:

nginx -V

大概会输出以下信息:

[root@rats ~]# nginx -V
nginx version: nginx/1.15.10
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-36) (GCC) 
built with OpenSSL 1.1.1b  26 Feb 2019
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/www/server/nginx --with-openssl=/www/server/nginx/src/openssl ... --with-ld-opt=-ljemalloc

nginx版本为1.15.10configure arguments:后面的为你nginx的编译参数,下面会用到。

然后重新下载nginx,并开始编译,使用命令:

#下载nginx,这里下载的1.15.10版本,如果是其它版本,把下载链接的1.15.10改成你的版本号即可
wget http://nginx.org/download/nginx-1.15.10.tar.gz
#解压并删除压缩包
tar -xvzf nginx-*.tar.gz && rm -rf nginx-*.tar.gz
#进入nginx目录
cd nginx*
#生成Makefile,./configure后面的参数直接复制上面看到的,然后在后面额外加一个--add-module=/www/server/ngx_brotli
./configure --user=www --group=www --prefix=/www/server/nginx ... --add-module=/www/server/ngx_brotli
#编译nginx
make && make install

不出意外的话,就编译完成了,然后继续使用命令查看信息:

nginx -V

返回参数后面多了个--add-module=/www/server/ngx_brotli就编译成功了。
请输入图片描述

除了手动编译外,还一种更加方便,且出错率很低的方法,使用宝塔自带的Nginx安装脚本进行编译安装,大致步骤:

1、编辑nginx安装脚本,路径/www/server/panel/install/nginx.sh,找到Install_Configure(){...}或Install_Nginx(){...}字段,然后找出你要安装的nginx版本号,在下面一行的./configure --user=www ...后面添加--add-module=/www/server/ngx_brotli即可,记得之间间隔一个英文空格。

2、在ssh客户端使用命令开始编译,根据自己的版本,将后面数字改为1.10、1.12、1.14、1.15、1.17、1.8、openresty等
sh /www/server/panel/install/nginx.sh install 1.16

3、安装好了使用nginx -V查看是否含有模块即可。

3、开启Brotli压缩
接下来点击面板左侧软件商店-Nginx设置-配置修改,在http段内添加以下内容来启用Brotli压缩。

brotli on;
brotli_comp_level 6;
brotli_min_length 512;
brotli_types text/plain text/javascript text/css text/xml text/x-component application/javascript application/x-javascript application/xml application/json application/xhtml+xml application/rss+xml application/atom+xml application/x-font-ttf application/vnd.ms-fontobject image/svg+xml image/x-icon font/opentype;
brotli_static always;

最后点击Nginx设置里的重载配置生效即可。

Brotli全部参数详解:

brotli on;              #启用
brotli_comp_level 6;    #压缩等级,默认6,最高11,太高的压缩水平可能需要更多的CPU
brotli_buffers 16 8k;   #请求缓冲区的数量和大小
brotli_min_length 20;   #指定压缩数据的最小长度,只有大于或等于最小长度才会对其压缩。这里指定20字节
brotli_types text/plain application/javascript application/x-javascript text/javascript text/css application/xml text/html application/json image/svg application/font-woff application/vnd.ms-fontobject application/vnd.apple.mpegurl image/x-icon image/jpeg image/gif image/png image/bmp;   #指定允许进行压缩类型
brotli_static always;   #是否允许查找预处理好的、以.br结尾的压缩文件,可选值为on、off、always
brotli_window 512k;     #窗口值,默认值为512k

全部配置好了,就可以使用谷歌浏览器查看下是否开启成功,看到br字段即为成功。
请输入图片描述

最后博主感觉压缩效果还行,有兴趣的可以开一下,对于其它的安装环境,安装方法都差不多,这里默认是BrotliGzip共存,并且都启用了,好处就是部分老旧的浏览器不支持Brotli的时候会自动变成Gzip压缩。

Vultr注册就送$50,可开日本/新加坡等机房,【点击注册】。
最后修改:2019 年 06 月 14 日 03 : 24 PM

发表评论 取消回复

52 条评论

  1. mlch911

    老哥,怎么看是否应用成功了啊?我开你的网页都是 gzip

    1. Rat's
      @mlch911

      这个可以看Nginx编译的参数有不有ngx_brotli,或者打开网页右键查看控制台。至于我这个,我博客搬家了,还没开启。

      1. mlch911
        @Rat's

        我换了win就有了,mac下还是gzip

  2. realme

    appnode 根本不用编译,直接设置就ok了。

    1. Rat's
      @realme

      这个面板好久没用过了

  3. ./configure: error: no srclib/ngx_devel_kit/config was found怎么解决。。。

    1. Rat's
      @凯

      指定的模块编译路径不对,如果系统没这种模块文件夹,不过可以自己手动下载,给个下载地址你:https://github.com/simplresty/ngx_devel_kit,编译的时候--add-module=/ngx_devel_kit,后面路径自行修改。

      1. Menlonpi
        @Rat's

        下载解压ngx_devel_kit后,生成Makefile时./configure: error: no srclib/ngx_devel_kit/config was found

        ./configure --user=www --group=www --prefix=/www/server/nginx ... --add-module=/www/server/ngx_devel_kit --add-module=/www/server/ngx_brotli

        1. Rat's
          @Menlonpi

          你的编译命令模块--add-module=/www/server/ngx_devel_kit ,指的是/www/server/ngx_devel_kit文件夹,所以需要把ngx_devel_kit放到/www/server/文件夹。

          1. Menlonpi
            @Rat's 我是用宝塔6.9.8搭建的lnmp环境 是不是宝塔快速安装的nginx有问题 (用宝塔编译nginx安装试了一次失败了)

            我的确把ngx_devel_kit文件夹放到/www/server下面了 编译时还是跳出那句话
            https://zhuanlan.zhihu.com/p/60908834
            看着这篇文试着用动态加载
            ./configure --with-compat --add-dynamic-module=/usr/src/ngx_brotli
            make modules
            然后宝塔修改nginx.confg加载模型保存时报错nginx: [emerg] module "/www/server/nginx/modules/ngx_http_brotli_filter_module.so" is not binary compatible in /www/server/nginx/modules.conf
            网上说原因是第三方模块的编译中包含的签名和使用的nignx不一致这又回到ngx_devel_kit 模块问题

            1. Menlonpi
              @Menlonpi

              6.9.8版本宝塔 1.15版本安装的nignx 文件里面没有./configure

              1. Rat's
                @Menlonpi

                看来宝塔各种版本都有变动,不通用了,只能你辛苦点,百度/谷歌找文档慢慢解决了。

  4. 妖怪

    宝塔安装的nginx 1.6 Install_Jemalloc(){}中有这这样

    ./configure make && make install

    是直接粘贴到 ./configure 后面吗

    1. Rat's
      @妖怪

      不是,这个不是编译Nginx的地方。

  5. 瞎折腾

    刚刚等到墙稳了想买小鸡,斯巴达的全没活了

    1. Rat's
      @瞎折腾

      找老板发个工单要一个

  6. K

    怠惰啊(你懂的

    1. Rat's
      @K

      不懂

  7. ruan

    dalao能不能出一个这个的安装教程
    https://github.com/zeit/hyper

    1. mlch911
      @ruan

      hyper很好用,你直接下载安装就行了啊

    2. Rat's
      @ruan

      好的,我先看看

  8. 磨米窝

    对了大佬,用了CF的br压缩,本地还要不要在配置一下。

    1. Rat's
      @磨米窝

      这个可以不用配置,想配置的话也行。

  9. 磨米窝

    大佬现在把网站放那个小鸡上去了

    1. Rat's
      @磨米窝

      一直就在Spartanhost。

  10. 55555

    宝塔自带的脚本编辑失败,已多次尝试,博主能否把示范的截图发出来,谢谢

    1. Rat's
      @55555

      是编辑后安装失败吗?大致过程就是在nginx.sh安装脚本里面找到对应版本的编译参数信息,基本上都是这种./configure --user=www ...,然后在你需要的版本的编译参数后面加上--add-module=/www/server/ngx_brotli,也就是brotli模块的绝对路径。

  11. 梓瑜

    宝塔1.16版本安装的nignx 文件里面没有./configure 。。

    1. Rat's
      @梓瑜

      不会吧,脚本里面应该都有这个命令选项的。

  12. 猴哥

    求一款在线看图的web程序,比方说我把图片放到服务器里面,怎么在线看,就是带后台的那种,

    1. Rat's
      @猴哥

      直接用Filebrowser试试,地址:https://www.moerats.com/archives/316

  13. 帐篷

    编译完成后能不能把那个解压出来的nginx文件夹删除,就是执行make && make install命令所在的整个文件夹能删除吗?

    1. Rat's
      @帐篷

      可以,编译好了后,那个文件夹就没啥用了。

  14. 想试一下怕出状况,出错又要捣鼓半天

    1. Rat's
      @恰

      么事,我又加了个新方法,使用宝塔脚本安装,你可以试试,基本不会出错了。

  15. fa

    博主,github pages可以搭建Google镜像吗?

    1. Rat's
      @fa

      没试过,应该不行。

  16. jerry

    root@VM-0-16-debian:~/nginx-1.16.0# make && make install
    make -f objs/Makefile
    make[1]: Entering directory '/root/nginx-1.16.0'
    cd pcre-8.42 \
    && if [ -f Makefile ]; then make distclean; fi \
    && CC="cc" CFLAGS="-O2 -fomit-frame-pointer -pipe " \
    ./configure --disable-shared
    /bin/sh: line 0: cd: pcre-8.42: No such file or directory
    objs/Makefile:2334: recipe for target 'pcre-8.42/Makefile' failed
    make[1]: * [pcre-8.42/Makefile] Error 1
    make[1]: Leaving directory '/root/nginx-1.16.0'
    Makefile:8: recipe for target 'build' failed
    make: * [build] Error 2
    root@VM-0-16-debian:~/nginx-1.16.0#
    怎么回事额

    1. 帐篷
      @jerry

      我也遇到了这个问题,假如你要按这种方法安装的话要先把那个pcre-8.42的源码下载下来,然后在--with-pcre=后面添加源码路径,之前的是--with-pcre=pcre-8.42,没有路径。现在改成类似这个样子--with-pcre=/root/pcre-8.42,源码在/root/pcre-8.42中,再次执行make && make install即可

    2. Rat's
      @jerry

      缺少模块,好像1.16版本方法不同,我改了下文章,你可以使用宝塔脚本编译。

  17. zgm

    我想要apache的

    1. Rat's
      @zgm

      Apache可以参考下这个文档:https://httpd.apache.org/docs/2.4/mod/mod_brotli.html

  18. 奶爸de笔记

    你们一天都这么折腾,我跟不上啊。

    1. Rat's
      @奶爸de笔记

      折腾才能进步

  19. 小李子

    请问下如果是反代的话

    是装在源站还是反代站

    1. Rat's
      @小李子

      应该是源站。

  20. ReimuRin

    ./configure: error: no /home/ann/nginx/src/ngx_devel_kit/config was found
    这个咋回事啊

    1. Rat's
      @ReimuRin

      什么版本的nginx?

  21. 萌娜

    还不错的样子

  22. Rhilip

    建议把标题改成Nginx,因为和面板无关。我还以为是bt面板直接提供相关功能开关。

    1. 奶爸de笔记
      @Rhilip

      知道搜nginx的都是老鸟,不是这篇文章的目标用户。

    2. Rat's
      @Rhilip

      这个以宝塔为参考的,其它方式安装的可能有小区别。