携手创作，共同成长！这是我参与「掘金日新计划 · 8月更文挑战」的第3天，点击查看活动详情
前言
首屏优化是提升用户体验的一个很重要的环节，可以使用webpack-bundle-analyzer对打包后的代码体积进行分析，以下从三个角度来总结一下如何对首屏进行优化
体积优化
1.检查项目里没用到的依赖，并移除
2.将public的静态资源移入assets。因为public只会把里面的东西复制到dist，所以public里应该放不经webpack处理的东西
3.使用image-webpack-loader，在构建流程中加入压缩图片
4.使用webP图片（不兼容苹果系统的情况下），它可以代替png，jpg，性能更高。可以使用webP-converter手动变成webP图片。或使用mage-min-webp自动生成。（兼容低版本浏览器，html中使用<picture>标签，css中使用，需要用js判断是否支持）
5.使用svg-sprite-loader,优化svg图标。具体步骤：创建一个svg文件，通过webpack的require自动导入，然后创建一个全局svg组件，使用时调用
6.使用svgo-loader，进一步压缩svg
7.第三方ui库，使用时按需加载
8.一些第三方插件，找到性价比最高的解决方案，例如:使用dayjs替代moment
传输优化
9.优化分包策略，比如可以按照体积大小、共用率、更新频率重新划分我们的包，使其尽可能的利用浏览器缓存。例如：（1.基础类库（更新频率低，但每个页面都需要。比如vue-router，axios） 2.UI组件库（更新较快，内存较大）3自定义组件/函数 4.低频使用的组件 5.业务代码）
10.路由懒加载，分多个文件
11.开启HTTP2，可以在一个TCP连接分帧处理多个请求
12.Gzip压缩传输。（nginx配置gzip，可以设开关属性，支持的http版本，压缩级别1-9，压缩起点(比如文件大于多少k才传输)，压缩的文件类型），我们通常会一并上传gzip文件，让服务器直接返回压缩后的文件。
13.Prefetch预请求、Preload预加载。适用于首屏字体、大图加载
14.使用cdn
15.使用OSS（稳定，安全，高性能）
感知优化
16.loading动画
17.首屏骨架加载
18.图片可以加载占位图，或者渐进式加载
