#pagespeed
说起 pagespeed 相信很多前端工程师都不会陌生。

pagesoeed-001.png

是的 还有 YSlow

YSlow.png

pagespeed 和 YSlow 是前端优化的神器,也是大牛们经验的宝贵积累。清晰地告诉我们开发部署的最佳实践。

我们回想一下前端工程构建部署的一些通用的方法(注意:只讨论 构建 和 部署)

build
我们可能会使用 gruntjs, gulpjs。使用哪一种我们都可以完成以下的目标

  • jshint ------------------------------  js上下文安全检查
  • amd|cmd optimizer( js ) --------------------  js 模块 合并优化
  • minify( css, html, js ) --------------------- 最小化 css html js 文件
  • optimizer( jpg | gif | png ) ------------------ 优化压缩图片文件
  • img( width + height ) ---------------------- 显式声明图片大小属性
  • merge_file(js, css) ----------------------- 合理的合并 js, css 文件
  • css splite ---------------------------- 将更多小图片合成一张大图
  • lazyload_images ------------------------- 对图片使用懒加载
  • ... and more

deploy

  • gzip() --------------------------------- 开启对文本文件的压缩
  • cache( max-age, etag, expires ) ---------------- 开启对静态文件的缓存策略
  • cdn (static file) -------------------对一些长期不会变化的文件使用cdn
  • dns prefetch --------------------- dns 预查询
  • ... and more

    以上基本是每一个项目都要进行的在 构建期 与部署期 对项目的优化。

    使得这些 方案 我们都可以通过使用 任务脚本 去自动化完成。但是 有些事情 能不能共通过 其他技术方案 更好的完成这项工作呢。 答案 是可以的。

    暂且,我们不讨论 代替 类似 与 gulpjs 要做的一些事情是否具有合理性。 因为 我们只能做到 构建期 的事情。我们力所能及的事情。但是 部署期 的事情。但是部署期的很多事 我们 的 脚本 是很难做到,也不应该做到。比如说, 使用 web server 代理缓存(nginx, squid),使我们的构建期文件在运行期长期有效。而且很多事情如果能够不写脚本 就能在 部署期自动搞定岂不是 更生开发时间了吗。

    好了废话了这么多。那么 ngx_pagespeed 到底是什么东西呢
    相信 熟悉 nginx 反向代理服务器的同学 一看见 ngx 就知道,应该是一个 nginx 扩展。
    ngx_pagespeed 是一个 nginx 的一个 扩展模块,它可以对你 部署在 nginx 上的 静态文件进行 符合 web 开发最佳实践的所有优化。 以上你看到的优化他都可以自动完成。一行代码都不用写。只需要一个简单的配置即可。

    (ngx_pagespeed 官网) (ngx_pagespeed GitHub) (ngx_pagespeed 文档)


接下来的博文 我会对 ngx_pagespeed 所有常用选项 进行 分析讲解。


东来
1.7k 声望55 粉丝

一年磨一剑,专心写程序