如何实施JS前端首屏加载优化策略？

本文共计1357个文字，预计阅读时间需要6分钟。

目录 + 引用 + 打包分析 + 路由懒加载 + vue.config.js 修改 + productionSourceMap 设置为 false + 首页请求优化 + 图片压缩 + 配置使用 CDN + 方式引入资源库 + 公共代码抽离 + 开启 gzip 压缩 + 其他优化 + 引导 + 前端时间领航

目录

• 引言
• 打包分析
• 路由懒加载
• vue.config.js 修改 productionSourceMap 为 false
• 首屏请求优化
• 图片压缩
• 配置使用 CDN 方式引入资源库
• 公共代码抽离
• 开启 gzip 压缩
• 其他优化

引言

前段时间领导突然找到我，说新项目的访问怎么变得这么慢，我立马访问对应页面，果然，首页加载8、9s，这近10s的等待时间，对于用户来说，无疑是痛苦的。于是乎领导就把这个首页加载优化的任务交给我了。

在经过我的一顿折腾后，首屏加载时间基本都在2s左右，这样的首屏加载时间，对于用户来说，算是可以接受的。