网页性能优化-gzip

版权声明：工作和生活的点点滴滴都应该记录下来! https://blog.csdn.net/u011350541/article/details/80645702

小网站只有1M的带宽，webpack打包发现vendor.js有700kb，每次加载需要7~10秒，非常慢，于是对网页内容压缩，

第一步修改webpack的配置：

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

第二步，修改nginx配置支持gzip

    gzip on;
    gzip_static on;
    gzip_min_length  5k;
    gzip_buffers     4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 3;
    gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

重点是配置 gzip_static on;

- gzip_static on|off
    - 
    - # nginx对于静态文件的处理模块
    - # 该模块可以读取预先压缩的gz文件，这样可以减少每次请求进行gzip压缩的CPU资源消耗。该模块启用后，nginx首先检查是否存在请求静态文件的gz结尾的文件，如果有则直接返回该gz文件内容。为了要兼容不支持gzip的浏览器，启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的情况下，将会大大增加磁盘空间。我们可以利用nginx的反向代理功能实现只保留gz文件。

最后首页加载时间从10秒缩短到2秒

还有一个更好的方法，通过cdn引入依赖包，暂时还没尝试