Vue 常见性能优化

Vue 常见性能优化

可以从六个方面考虑:
1. 代码层面
2. 用户体验
3. 加载优化
4. SEO
5. 打包
6. 缓存与压缩

代码层面

1. 不要将所以数据放到data里面，比如静态数据、定时器；

2. 合理使用object.freeze冻结数据；

3. v-for时事件绑定用代理，key保持唯一；

4. v-if和v-show合理使用；

5. 合理使用路由懒加载、异步组件；

6. 单页面使用keep-alive缓存组件；

7. 组件拆分，提高复用、可维护性；

8. 防抖、节流、闭包合理使用；

9. 尽量使用runtime的版本；

用户体验方面

1. 使用骨架屏;
2. app-shell(app壳);
3. 渐进式Web应用程序PWA;

app-shell: 页面能够展现所需的最小资源集合，即支持用户界面所需的最小的 HTML、CSS 和 JavaScript 等静态资源集合。采用 App Shell 的站点，每个页面都会先加载 App Shell 的内容，再由 App Shell 根据当前页面 URL 渲染对应的主体内容

加载优化

1. 按需加载；
2. 可视区域动态加载；
3. 图片懒加载；

SEO

1. 语义化标签；
2. 服务端渲染ssr；
3. 预渲染插件prerender-spa-plugin;

打包（webpack）

1. 使用cdn加载第三方包；
2. 多线程打包happypack；
3. splitChunks抽离公共文件;
4. sourceMap生成；

缓存与压缩

1. 客户端缓存、服务端缓存；
2. 服务端gzip压缩；