时间戳

首页 > 解决方案 > VueJS 性能问题

performance - VueJS 性能问题

问题描述

我正在开发一个使用 Vue Cli 和 Vue Bootstrap 的浏览器扩展。我已经优化了我的 Vue Bootstrap 导入，只加载我在项目中使用的组件和图标。我也有延迟加载的路由组件，但我仍然需要很长时间才能到达我的第一个组件的已创建挂钩。这是一段代码摘录：

主要入口点

console.info("Loaded in " + (new Date().getTime() - global.start) + "ms")
require("@/App.js")

应用程序.js

import Vue from "vue"
import * as Sentry from "@sentry/vue"
import { Integrations } from "@sentry/tracing"
import App from "@/App.vue"
import router from "@/common/router"
import store from "@/common/store"
import { get } from "@/common/api"
...

import {
  ModalPlugin,
  ButtonPlugin,
  TabsPlugin,
  DropdownPlugin,
  AlertPlugin,
  ToastPlugin,
  FormInputPlugin,
  FormRadioPlugin,
  ...
  BIconArrowRightShort,
  BIconArrowDownSquareFill,
} from "bootstrap-vue"

Vue.use(ModalPlugin)
Vue.use(ButtonPlugin)
Vue.use(TabsPlugin)
...

Vue.component("BIcon", BIcon)
Vue.component("BIconX", BIconX)
Vue.component("BIconArrowLeft", BIconArrowLeft)
Vue.component("BIconMailbox", BIconMailbox)
Vue.component("BIconFolderPlus", BIconFolderPlus)
Vue.component("BIconEnvelope", BIconEnvelope)
...

global.vm = new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    this.$router.push({ name: "Responses" })
...
  })
}

这是我首先加载的组件文件：

<template>
  <div>
    <div>
      ...
    </div>
  </div>
</template>

<script>
let now = new Date().getTime()
console.info("SFC file loaded in " + (now - global.start) + "ms")
import ... from "@/common/components/..."

export default {
  ...
  mounted() {
    let now = new Date().getTime()
...
</script>

<style lang="scss">
...
</style>

当我对时间进行基准测试时，这就是我得到的：

我想知道创建的钩子需要这么长时间（我没有做太多，只是检查 $route 参数）。150 毫秒来完成创建的钩子似乎很多？

这是创建的钩子：

console.info("Created Hook in " + (new Date().getTime() - global.start) + "ms")
    if (this.$route.params.xx {
      this.... = this.$store.state.xxxx.find(e => {
        return e.uuid == .......
      })
    }

加载扩展的性能对于用户体验很重要，打开扩展弹出窗口时总是感觉有点迟钝。

关于什么会延迟加载的任何想法？

谢谢！

标签： performancevue.js

解决方案

我注意到的第一件事是你正在做一个route.push应用程序创建的钩子，这意味着路由器已经解决了第一条路由（可能是'/'），然后你正在添加另一个路由（但不是立即），然后是路由器正在解决这条新路线。

为了更快地启动，为什么不向路由添加重定向：

//...routes
{
 path: '/',
 redirect: {name: 'Responses'}
}

如果您有机会改用 Vue3，那么也许您还可以感受到性能的提升，因为 Vue2 始终存在 GlobalAPI，而 Vue3 在构建后会进行摇树并忽略未使用的东西。

注意：确保您是在生产环境中测试它，因为如果您使用 vue-cli 来提供内容，那么启动将包含大量开销

推荐阅读