Performance VueJS性能问题

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

主要入口点

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

App.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>

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

你知道什么会像那样延迟装货吗

---

谢谢

我注意到的第一件事是你正在做一个

路由。在App-created-hook上按

，这意味着路由器已经解决了第一个路由（可能是“/”），然后你正在添加另一个路由（但不是立即），然后路由器正在解决那个新路由

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

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

如果您有机会更改到Vue3，那么您可能也会感觉到性能提升，因为Vue2有一个始终存在的GlobalAPI，而Vue3正在做一个树抖动，并且在构建之后忽略了未使用的东西

---

注意：请确保您正在使用生产环境对其进行测试，因为如果您使用vue cli来提供内容，那么启动将包括大量开销

在创建的

钩子和安装的
钩子之间会发生更多的事情-运行的不仅仅是所有
创建的
钩子中的代码。检查Vue组件

由于您使用的是Vue SFC'c，可能还有Webpack，因此不可能进行模板编译，但在创建
后
Vue仍在执行所有组件的
render
函数（生成VDOM）并基于VDOM创建真正的DOM元素（渲染整个应用程序）。所以，根据组件和元件的数量，150ms也没那么糟糕…
谢谢大家！实际上，默认路由已经重定向到响应，删除推送不会有多大变化

不幸的是，我无法真正迁移到Vue 3，因为我依赖的依赖项并不完全支持Vue 3（Vue BS是一个重要的依赖项）

我猜这是我目前所能做的。只是想知道Vue Cli是否有任何方法可以立即打开窗口浏览器扩展弹出窗口，然后加载Vue（现在，它正在等待加载整个内容，然后打开弹出窗口，在单击和实际打开窗口之间有300毫秒的延迟）

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