nginx开启gzip压缩

发表于 | 阅读次数:

需求场景：

  • 最近在部署公司angularjs前端项目的时候，发现打包生成的一个main.js特别大达到了10M，感觉前端这边应该有很大的优化空间，试了好几种方式比如:加优化参数–aot, —-build-optimizer等都试过，生成的文件大小基本没有变化，于是就想从压缩静态文件入手；

  1. angularjs项目中引入打包工具gzipper：

  2. 将打包命令写入package.json,参考如下：

    1
    ng build --prod && gzipper --verbose --level 9 ./dist/my-app //level表示压缩级别：1-9(压缩率依次变高)

  3. nginx配置支持gzip压缩:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # 在nginx配置http/server/location中加入如下配置:
        gzip  on; //开启gzip
        gzip_proxied no-cache no-store private expired auth; //代理的情况
        gzip_min_length 1k; //gzip最小压缩大小
        gzip_buffers 4 16k; 
        gzip_comp_level 5; //gzip压缩级别(1-9)
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript image/jpeg image/gif image/png; //支持压缩的文件类型
        gzip_vary on;
        gzip_disable "MSIE [1-6]\."; //ie 1-6下禁用压缩
        gzip_static on; //开启本地gzip文件的压缩，要求事先生成gzip文件
        gzip_http_version   1.0; //gzip压缩版本，在多级代理的情况下默认可能会有坑

  4. 打包配置上线验证：
    响应header中包含这个说明压缩成功：Content-Encoding:gzip
    下图是对比

    Angular Build貌似还可以用其他的压缩方式