原创

vue项目开屏页加载优化

前端优化

一、页面级优化
  1. 减少 HTTP请求数

        2. 将外部脚本置底(将脚本内容在页面信息内容加载后再加载)

        3. 异步执行 inline脚本(其实原理和上面是一样,保证脚本在页面内容后面加载。)

        4. Lazy Load Javascript(按需加载)

        5. 将 CSS放在 HEAD中

        6. 异步请求 Callback

        7. 减少不必要的 HTTP跳转

        8. 避免重复的资源请求

二、代码级优化

        1. DOM  尽量减少不必要的DOM操作

        2. 慎用 with

        3. 避免使用 eval和 Function

        4. 减少作用域链查找

VUE 项目优化

    一、对路由组件进行懒加载

                import Vue from 'vue'

                import Router from 'vue-router'

                import api from "./api/index";
                // views..
                const mall = resolve => require(["./mall"], resolve)
                const mallList = resolve => require(['./views/mallList'], resolve)
                const goodDetail = resolve => require(['./views/goodDetail'], resolve)
                const payStatus = resolve => require(['./views/payStatus'], resolve)......

    二、合理运用vue指令

          1. v-if和v-show

              2. v-for时设置唯一key值

              3. 细分vue组件

              4. 减少watch的数据

              5. 视频图片的懒加载

              6. 若项目过大,可选择SSR(服务端渲染)

    三、项目代码压缩处理

              代码压缩可以有效提高传输和访问速度。

正文到此结束
本文目录