项目优化

1.vue项目优化

（1）代码层面的优化

• v-if和v-show区分使用场景
• computed和watch区分使用场景
• v-for遍历必须为item添加key,且避免同时使用v-if
• 优化长列表性能和无限列表性能
• 事件销毁
• 图片资源懒加载和路由懒加载
• 第三方插件的按需引入
• 服务端渲染SSR or 预渲染

（2）webpack层面的优化

• webpack对图片进行压缩
• 减少ES6转为Es5的冗余代码
• 提取公共代码和组件的css
• 模板预编译
• 优化sourceMap
• 构建结果输出分析
• vue项目的编译优化
• 路由跳转加入进度条

（3）基础的web技术的优化

• 开启gzip压缩（需要自己配置）
• 浏览器缓存
• CDN的使用
• 使用Chrome Performance查找性能瓶颈

更为具体讲解的网址为：
https://blog.csdn.net/qq_37939251/article/details/100031285

2.项目优化讲解二

可以从客户端和服务端来说：
客户端：

• 压缩代码（css,js），压缩图片
• 合并一些小图片
• 打包的代码尽可能分割成多个chunk,减少单一，chunk过大
• 静态文件采用cdn引入
• Http的缓存头使用的合理
• 减少对第三方库的依赖
• 代码应考虑性能来写，比如使用：requestAnimationFrame绘制动画，尽可能减少页面重绘。（DoM改变）
• 渐进升级，引入preload这些预加载资源
• 看情况使用service worker来缓存资源（比如移动端打算搞PWA）

服务端：

• 带宽，域名解析，多域名解析等
• 页面做服务端渲染，减少浏览器的依赖（不用客户端解析），。
• 渐进升级，比如引入HTTP2（多路复用，头部压缩这些可以明显加快加载速度）