vue性能优化-H5

原创已于 2022-07-17 18:33:00 修改 · 690 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #性能优化 #javascript

于 2022-02-10 16:30:36 首次发布

性能优化专栏收录该内容

2 篇文章

订阅专栏

本文主要介绍了针对Vue项目的性能优化策略，包括：1. 解决首屏加载慢的问题，通过动态创建script标签实现懒加载；2. 针对白屏现象，采用骨架屏提升用户体验；3. 防止页面闪烁，调整API监听位置和使用CSS loading，优化接口调用时机；4. 对于require.context引入的包大小进行优化，拆分并按需引入。

1. 首屏加载慢-按需加载

排查问题-打开chrome performance一步步调试
发现问题-业务线依赖包在index.html引入造成
解决问题-动态创建script标签实现懒加载

/**
 * @description: 动态加载js脚本
 * @param {*} srcs 数组：js脚本链接
 * @return {*}
 */
export const creactJs = (srcs) => {
  if (srcs && srcs.length > 0) {
    srcs.forEach(item => {
      let scripts = document.getElementsByTagName('script')
      let arry = [...scripts]
      let tempScript = arry.filter(t => t.src.indexOf(item) >= 0)
      if (tempScript && tempScript.length == 0) {
        let script_dom = document.createElement('script')
        script_dom.src = item
        script_dom.language = 'javascript'
        script_dom.type = 'text/javascript'
        let head = document.getElementsByTagName('head').item(0)
        head.appendChild(script_dom)
        script_dom.onload = function () {
          console.info('非ie浏览器加载完成---', srcs);
        }
      }
    })
  }
}

2. 白屏问题-骨架屏

排查问题-打开应用白屏的表现
发现问题-项目初始化时#app标签是无内容的导致初始化时白屏
解决问题-骨架屏

<body id="kuasheng-h5">
    <noscript>
        <strong>We're sorry but base doesn't work properly without JavaScript enabled. Please enable it to continue.
        </strong>
    </noscript>
    <div id="app">
        <div class="background-page">
            <div class="content-area">
                <div class="user-info">
                    <div class="user-box"></div>
                </div>
                <div class="user-name">
                </div>
            </div>
        </div>
    </div>
    <!-- built files will be auto injected -->
</body>

3. 闪烁问题-跳转、loading

排查问题
- 监听工作助手API(ks.getPushInfo)写在了main.vue列表组件，导致跳转前先渲染了列表
发现问题
- 从工作助手打开时先进入了列表才跳转到目标页面
- 发现【猴子.gif】出现了两次
- 获取详情接口调用时机太慢了，可以提前
解决问题
- 监听工作助手API(ks.getPushInfo)提前到main.js执行，用一个变量ensureEntry控制初始化状态，确保工作助手获取好数据路由跳转后再渲染App.vue

const vm = new Vue({
    store,
    router,
    data: {
        init: false,
        ensureEntry: false, // 是否确认跳转到哪个页面(解决工作助手跳转时加载首页问题)
    },
    render: h => h(App),
    }).$mount('#app')

// 跳转成功后在$router回调里面把ensureEntry = true
vm.$router.push({
    name: `apply`,
    params: {
        id,
        isRN,
        data,
    }
    }, function () {
        vm.ensureEntry = true
    })
    
<!-- App.vue 由init和xxx控制显示 -->
<div class="ksui-container"
    v-if="$root.init && $root.ensureEntry">
<!-- 需要缓存的视图组件 -->
<transition>
    <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
</transition>
<!-- 不需要缓存的视图组件 -->
<transition>
    <router-view v-if="!$route.meta.keepAlive" />
</transition>
</div>

将【猴子.gif】替换成css loading，初始化不加loading，避免loading多次出现，界面一直变化导致闪烁
获取详情接口提前到main.js（此时工作助手已返回详情id）, 获取的详情数据存到store，详情页面使用时直接从store获取,节省等待接口返回时间

vm.$http('oams.wfTask.get', 10173, {
    id: id
}).then(res => {
    vm.$store.commit('setApproveRes', res)
})

4. 优化require.context引入的包大小

各个业务线的表单都是通过require.context方法引入

    const apply = {}
    const approval = {}
    const agree = {}
    const approvalBtnDiy = {}
    const agreeDiy = {}
    const commonDetailPage = {}

    const ContextApply = require.context('./', true, /apply.vue/)
    ContextApply.keys().forEach(k => {
    let component = ContextApply(k).default
    let componentName = component.name
    apply[componentName] = component
    })

    const ContextApproval = require.context('./', true, /approval.vue/)
    ContextApproval.keys().forEach(k => {
    let component = ContextApproval(k).default
    let componentName = component.name
    approval[componentName] = component
    })

    const ContextAgree = require.context('./', true, /agree.vue/)
    ContextAgree.keys().forEach(k => {
    let component = ContextAgree(k).default
    let componentName = component.name
    agree[componentName] = component
    })

    const ContextApprovalBtn = require.context('./', true, /approval-btn.vue/)
    ContextApprovalBtn.keys().forEach(k => {
    let component = ContextApprovalBtn(k).default
    let componentName = component.name
    approvalBtnDiy[componentName] = component
    })

    const ContextAgreeDiy = require.context('./', true, /agree-diy.vue/)
    ContextAgreeDiy.keys().forEach(k => {
    let component = ContextAgreeDiy(k).default
    let componentName = component.name
    agreeDiy[componentName] = component
    })

    const ContextCommonDetailPage = require.context('./', true, /common-detail-page.vue/)
    ContextCommonDetailPage.keys().forEach(k => {
    let component = ContextCommonDetailPage(k).default
    let componentName = component.name
    commonDetailPage[componentName] = component
    })

    export {
    apply, // 新建申请表单
    approval, // 审批表单
    agree, // 同意页面表单
    approvalBtnDiy, // 审批页面-自定义按钮栏
    agreeDiy, // 自定义按钮栏-跳转页面
    commonDetailPage, // 自定义空白页
    }