网页性能优化-gzip

小网站只有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引入依赖包，暂时还没尝试

最后

以上就是迷路画板最近收集整理的关于网页性能优化-gzip的全部内容，更多相关网页性能优化-gzip内容请搜索靠谱客的其他文章。