优化方向

网络优化
页面渲染优化
js 优化
图片优化
打包优化
vue优化
react优化

1：网络优化

DNS预解析,link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址
使用缓存：减轻服务端压力，快速得到数据（强缓存和协商缓存）
使用CDN内容分发网络：用户与服务器的物理距离对响应时间也有影响，内容分发网络是一组分散在不同地理位置的web服务器，用来给用户更高效的发送内容，典型地，选用来发送内容的服务器是基于网络距离来衡量标准的。
压缩响应：压缩组件通过减少 HTTP 请求产生的响应包的大小，从而降低传输时间的方式来提高性能。
使用多个域名
避免图片SRC为空：SRC属性为空，浏览器任然会发起一个http请求

2、页面渲染优化

避免css阻塞：css影响renderTree的构建，会阻塞页面的渲染，因此应该尽早（将 CSS 放在 head 标签里）和尽快（启用 CDN 实现静态资源加载速度的优化)的将css资源加载
降低css选择器的复杂度：浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。
避免使用CSS 表达式：css 表达式会被频繁地计算
避免js阻塞
使用外链式的js和css
使用字体图标代替图片图标
首屏加载优化
减少重绘和回流js的性能优化
使用事件委托
防抖和节流
尽量不要使用js动画（Css动画和canvas动画性能比js动画性能好）
多线程：复杂计算开启webworker进行计算，避免页面假死
计算结果缓存：减少运算次数，如vue中的computed

3、图片优化

图片懒加载
雪碧图
使用css3代替图片
图片压缩
使用渐进式JPEG
使用webp图片

4、代码压缩

5、Tree shaking 去除死代码

依赖于ES Module的静态语法分析
在webpack实现Tree shaking有两种不同的方案：
    usedExports：通过标记某些函数是否被使用，之后通过Terser来进行优化的
    sideEffects：跳过整个模块/文件，直接查看该文件是否有副作

6、babel-plugin-transform-runtime减少ES6转化ES5的冗余

7、代码分离

将代码分离到不同的bundle中，之后我们可以按需加载，或者并行加载这些文件
默认情况下，所有的JavaScript代码（业务代码、第三方依赖、暂时没有用到的模块）在首页全部都加载，就会影响首页的加载速度
代码分离可以分出更小的bundle，以及控制资源加载优先级，提供代码的加载性能
这里通过splitChunksPlugin来实现，该插件webpack已经默认安装和集成，只需要配置即可