网络优化篇:
https://mp.weixin.qq.com/s/VBizeUtmQE2vdyeS2MJEuw
性能与体验优化-工具和指标介绍:
https://mp.weixin.qq.com/s/SL_PDTFKUEQcOC9zJDgsoA
1.骨架屏 / 更友好loading。
2.图片字体,缩小字体,懒加载图片,渐进式图片,响应式图片。
3.尽可能少的http请求,本地状态缓存。
4.与客户端协商,做离线包,预先缓存页面需要加载的资源。
5.打包时候,利用uglifyjs/terserjs压缩包体积,uglifyjs和terserjs都是js压缩。但是terserjs支持es6格式代码压缩,uglifyjs并不支持。htmlWebpackPlugin、mini-css-extract-plugin
6.splitChunks,拆包,分chunk打包,避免单个包体积过大,也方便异步加载组件。
7.把静态资源放在cdn,减小服务器压力,分离公共资源。
8.tree-shaking,可以学习vue3的代码组织方式,各模块独立,擦除无用的JavaScript和CSS。
9.在nginx层开启gzip压缩,cache-control缓存。
10.在 vue 里面的优化方法:
- 使用 keep-alive 缓存复用组件;
- v-for 写 key,不要用index,和没写一样;
11.预加载资源 preload、prefetch || 懒加载资源
12. ssr
13. 减少页面dom元素,或者隐藏页面上多余的dom元素