前端首屏加载优化总结
1. 资源压缩
我们这周把所有的 JS 和 CSS 文件都接入了 Webpack 的 Terser 插件,包体积减少了大概 40%。
2. 图片懒加载
目前商品详情页的长图已经全部替换成了 IntersectionObserver 方案进行按需加载,大大降低了首屏请求数。
3. CDN 加速
静态资源已经全量上了阿里云 CDN,测试下来华南区用户的静态文件访问延迟降到了 50ms 以内。
我们这周把所有的 JS 和 CSS 文件都接入了 Webpack 的 Terser 插件,包体积减少了大概 40%。
目前商品详情页的长图已经全部替换成了 IntersectionObserver 方案进行按需加载,大大降低了首屏请求数。
静态资源已经全量上了阿里云 CDN,测试下来华南区用户的静态文件访问延迟降到了 50ms 以内。