Vue的性能优化应该怎样做?首屏优化应该怎样做?

目录

一、Vue的性能优化应该怎样做?

        1.编码优化

        2.加载优化

        3.用户体验

        4.SEO优化

        5.打包优化

        6.缓存和压缩

二、首屏优化应该怎样做?

---

一、Vue的性能优化应该怎样做?

1.编码优化

        不要把所有数据都放在data中。

        v-for给每个元素绑定事件时用事件代理。

        keep-alive缓存组件。

        尽可能拆分组件，提高复用性、可维护性。

        key值要保证唯一。

        合理使用路由懒加载，异步组件。

        数据持久化存储时尽量用防抖、节流优化。

2.加载优化

        按需加载、内容懒加载、图片懒加载。

3.用户体验

        骨架屏。

4.SEO优化

        预渲染、服务端渲染ssr。

5.打包优化

        CDN形式加载第三方模块、多线程打包、抽离公共文件。

6.缓存和压缩

        客户端缓存、服务端缓存、服务器Gzip压缩。

二、首屏优化应该怎样做?

        1.使用路由懒加载。

        2.非首屏组件使用异步组件。

        3.首屏中不重要的组件延迟加载。

        4.静态资源放在CDN上。

        5.减少首屏上Js、Css等资源的大小。

        6.使用服务端渲染。

        7.尽量减少Dom的数量和层级。

        8.使用精灵图请求。

        9.做一些loading。

        10.开启Gzip压缩。

        11.图片懒加载。