Blog

Blog

PHODAL

Nginx ngx_pagespeed nginx前端优化模块编译

偶然间在网上发现这样一个扩展,用于对前端页面而进行服务器端的优化。

Ngx_pagespeed 简介

关于Nginx Pagespeed

ngx_pagespeed speeds up your site and reduces page load time by automatically applying web performance best practices to pages and associated assets (CSS, JavaScript, images) without requiring you to modify your existing content or workflow. Features include:

  • Image optimization: stripping meta-data, dynamic resizing, recompression
  • CSS & JavaScript minification, concatenation, inlining, and outlining
  • Small resource inlining
  • Deferring image and JavaScript loading
  • HTML rewriting
  • Cache lifetime extension
  • and more

ngx_pagespeed 是 Nginx 的一个扩展模块,主要的功能是针对前端页面而进行服务器端的优化,对前端设计人员来说,可以省去优化css、js以及图片的过程。ngx_pagespeed对nginx自身负载能力的提升基本是看不到的,甚至会因为进行服务器端的优化而使系统增加负载;但从减少客户请求数的角度去看,牺牲部分服务器性能还是值得的。

主要功能包含:

  • 图像优化:剥离元数据、动态调整,重新压缩
  • CSS和JavaScript压缩、合并、级联、内联
  • 小资源内联
  • 推迟图像和JavaScript加载
  • 对HTML重写、压缩空格、去除注释等
  • 提升缓存周期
  • 以及其他config_filters

Ngx_pagespeed编译

默认的CentOS似乎包含了某些依赖。没有的话。。

一、 安装Ngx_pagespeed依赖

对于CentOS来说

 sudo yum install gcc-c++ pcre-dev pcre-devel zlib-devel make

pcre和必须的,如果没有装的话,你可能会在编译的时候遇到问题,参见下面的编译选项

Ubuntu的话应该是

  sudo apt-get install build-essential zlib1g-dev libpcre3 libpcre3-dev

二、编译Ngx_pagespeed

下载Ngx_pagespeed

一开始没按照官方写的文档,于是就报错了。

ngx_pagespeed: pagespeed optimization library not found:

 You need to separately download the pagespeed library:

 $ cd /path/to/ngx_pagespeed
 $ wget https://dl.google.com/dl/page-speed/psol/1.7.30.3.tar.gz
 $ tar -xzvf 1.7.30.3.tar.gz # expands to psol/

Or see the installation instructions: https://github.com/pagespeed/ngx_pagespeed#how-to-build

正确的步骤应该是


    $ cd ~
    $ wget https://github.com/pagespeed/ngx_pagespeed/archive/v1.7.30.4-beta.zip
    $ unzip v1.7.30.4-beta.zip # or unzip v1.7.30.4-beta
    $ cd ngx_pagespeed-1.7.30.4-beta/
    $ wget https://dl.google.com/dl/page-speed/psol/1.7.30.4.tar.gz
    $ tar -xzvf 1.7.30.4.tar.gz # expands to psol/

编译Nginx

官方的步骤如下:

$ cd ~
$ # check http://nginx.org/en/download.html for the latest version
$ wget http://nginx.org/download/nginx-1.6.0.tar.gz
$ tar -xvzf nginx-1.6.0.tar.gz
$ cd nginx-1.6.0/
$ ./configure --add-module=$HOME/ngx_pagespeed-1.7.30.4-beta
$ make
$ sudo make install

但是这个是我的步骤及编译选项

$ cd ~
$ wget http://nginx.org/download/nginx-1.7.0.tar.gz
$ tar -xvzf nginx-1.7.0.tar.gz
$ cd nginx-1.7.0/
$./configure --user=www --group=www --add-module=../nginx-static-etags --add-module=../ngx_pagespeed-1.7.30.4-beta --prefix=/usr/local/nginx --with-pcre --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6
$ make
$ sudo make install

感觉似乎添加的选项比较多,然后我们可以用nginx -V来查看是否编译成功。

查看nginx详细配置

[root@CentOS62 conf]# nginx -V
nginx version: nginx/1.7.0
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-3) (GCC)
TLS SNI support enabled
configure arguments: --user=www --group=www --add-module=../nginx-static-etags --add-module=../ngx_pagespeed-1.7.30.3-beta --prefix=/usr/local/nginx --with-pcre --with-http_stub_status_module --with-http_ssl_module --with-http_gzip_static_module --with-ipv6

查看是否编译成功

直接打开网站看js和css是否有类似于下面带有pagespeed之类的。

jquery.js,qver=1.11.0.pagespeed.jm.ocognCjcS2.js

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Engineer, Consultant, Writer, Designer

ThoughtWorks 技术专家

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《前端架构:从入门到微前端》、《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 最新技术分享

标签