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