1、压缩html、css、js 使用Brotli 比Gzip 压缩效果更好,更快。
chrome 下 Response Header content-encoding: br
2、使用rollup 打包公共基础代码比webpack 体积更小。
3、内嵌js 一定要放在link css 加载的前面,防止js 阻塞css。
4、使用框架代码和polyfill 文件可以直接引用script 标签不必打包到webpack中,利用缓存。
5、使用静态域名js、css/img突破同域名并发限制请求,并可以请求资源没带cookie 请求。
6、多使用UI自定义组件,少使用其他第三方UI组件,定义基础公共方法,如请求,缓存、工具验证模块,避免打包导致体积过大。
7、使用阿里nginx 模块 nginx-http-concat 做到多文件合并一次请求 如
<script type="text/javascript" src="/static/??vue/2.5.2/index.js,js/1.0.0/polyfill/index.js" crossorigin=anonymous></script>
8、图片使用webp和图片可以根据尺寸返回。
9、使用serviceWorker 离线缓存。
10、使用 css -webkit-touch-action: manipulation;touch-action: manipulation; 来解决300ms延迟 替代fastClick.js。
11、使用懒加载技术优化图片加载。
12、使用https 和http 2.0 加载网页,使用tcp多路复用,网页更加安全。
13、preload/prefetch/dns-prefetch 预加载、下一个页面加载、dns预解析。
14、async/defer延迟脚本加载或异步加载。
15、避免浏览器dom引起大量的重排和绘流。
16、使用svg 代替icon sprite 雪碧图。
17、使用节流和防抖来控制频繁的操作。
18、服务器端配置 Cache-Control max-age=2592000。
19、利用localStorage 缓存接口数据,根据时间半小时/1天,减少服务器请求,定时清理。
20、定制ui组件库,不使用第三方ui库