请求优化： 将第三方的类库放到 上，能够大幅度减少生产环境中的项目体积，另外 能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
缓存：将长时间不会改变的第三方类库或者静态资源设置为强缓存，将 设置为一个非常长的时间，再将访问路径加上哈希达到哈希值变了以后保证获取到最新资源，好的缓存策略有助于减轻服务器的压力，并且显著的提升用户的体验
gzip：开启 压缩，通常开启 压缩能够有效的缩小传输资源的大小。
http2：如果系统首屏同一时间需要加载的静态资源非常多，但是浏览器对同域名的 连接数量是有限制的( 为 6 个)超过规定数量的 连接，则必须要等到之前的请求收到响应后才能继续发送，而 则可以在多个 连接中并发多个请求没有限制，在一些网络较差的环境开启 性能提升尤为明显。
懒加载：当 匹配到相应的路径时，通过 动态加载页面组件，这样首屏的代码量会大幅减少， 会把动态加载的页面组件分离成单独的一个 文件
预渲染：由于浏览器在渲染出页面之前，需要先加载和解析相应的 、 和 文件，为此会有一段白屏的时间，可以添加 ，或者尽可能的减少白屏对用户的影响体积优化
合理使用第三方库： 对于一些第三方 ui 框架、类库，尽量使用，减少打包体积
使用可视化工具分析打包后的模块体积： 这个插件在每次打包后能够更加直观的分析打包后模块的体积，再对其中比较大的模块进行优化
提高代码使用率： 利用，将脚本中无需立即调用的代码在代码构建时转变为异步加载的过程
封装：构建良好的项目架构，按照项目需求就行全局组件，插件，过滤器，指令， 等做一些公共封装，可以有效减少我们的代码量，而且更容易维护资源优化
图片懒加载： 使用图片懒加载可以优化同一时间减少 请求开销，避免显示图片导致的画面抖动，提高用户体验
使用 svg 图标： 相对于用一张图片来表示图标， 拥有更好的图片质量，体积更小，并且不需要开启额外的 请求
压缩图片： 可以使用 ，在用户肉眼分辨不清的情况下一定程度上压缩图片
本文由mdnice多平台发布
友情链接：