前端优化

优化

目标：让用户感觉好
感觉加载快：

• 加快首屏的加载速度
• 加载提示
  提示
  骨架屏

优化手段

1. 图片懒加载
   lazyload
2. js懒加载
   component：（）=import(xxx.vue)
3. js css按需加载
   动态导入vant需要的组件
4. prefetch 提前加载
5. 缓存
   a. vue缓存
   b. 浏览器缓存 get
   c. 内容(hash)缓存
   （二次加载速度的支持）
   d. 当内容发生更改的时候，文件更改（不缓存）
   当内容不发生更改，文件名保持一致（缓存）

三个要求

• 提高首屏加载速度（按需加载）
  异步加载
  预加载，prefetch
• 优化图片，懒加载图片
• 减少http请求
  合并js
  合并css
  合并背景图片
  base64图片格式
  代码敲的
• 减少http请求的大小
  压缩js
  压缩图片
  压缩css
  开启gzip
  减少cookie大小
• 提示加载
  加载提示
  进度条
  骨架屏

路由懒加载

路由动态加载，上面的import要注释掉,备注也是有用的，打包后显示的名字，不能删