Vue.js、Vuex、Vue-Router SPA 以及扩展应用程序客户端与服务器端

标签 vue.js vuejs2 vue-router vuex server-side-rendering

  1. 我正在重写一个非常非常大且复杂的应用程序
  2. 我正在使用 Vue/Vuex/Vue 路由器
  3. 这是一个单页应用程序,具有持久的类似桌面的 UI。
  4. 它有超过 150 种“形式”,对应于大约那么多的对象。
  5. 我们必须定期添加新表单。
  6. 假设我将在模态中显示每种形式(我不会,但很容易想象)
  7. 该应用程序已约为 15mb。

关于这些表单,在选择在服务器上渲染它们并将它们加载到模式中,还是将组件包含在应用程序中并保持客户端和服务器之间的责任分离时,我应该考虑什么?

我的意思是,要么我们支付时不时重新下载的成本,要么我们支付客户端和服务器之间职责分离以及随之而来的服务器负载的成本。我非常想将应用程序和后端分开,因为目前后端只是一个 api。但我担心应用程序的大小会增加,以至于我们拒绝发布新的表单(功能)。

不幸的是,如果没有在 Vue 中创建这种规模的东西的经验,我无法预测(即使我已经尝试过)我是在谈论常规 20mb 更新,还是 200mb 更新......

感谢您的想法。

谢谢

最佳答案

共有三种选择:

  • 1 - 在服务器上渲染它们,比如在 Laravel/blade 或类似的东西中,然后将它们呈现在 vue 应用程序中。
  • 2 - 在 vue 中将它们渲染到服务器上。
  • 3 - 将它们合并到应用中。

决策标准是:

  • 1 - 封装:保持应用程序和 API 的分离或打破它。
  • 2 - 体验:随着新功能(API 服务)的提供,以更频繁的下载为代价保留水疗中心的体验。或者相反。

尽管大小有所增加,但我们还是选择增加下载频率,以保持 UI 和 API 的分离以及用户体验。此外,它维护了我们相对简单的构建和部署流程。

关于Vue.js、Vuex、Vue-Router SPA 以及扩展应用程序客户端与服务器端,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49137465/

相关文章:

internet-explorer - Vue.js 严格模式下不允许多个属性定义

vue.js - vue mixin 在实例和组件之间共享

javascript - 将 Vue.JS 项目转换为 Nuxt.JS 项目

javascript - 如何在Vue JS中过滤数组元素

javascript - Vue.js v-for 循环的正确随机排序

javascript - 在 vue 项目中使用 blob 和 FileSaver.js 下载 excel(.xlsx) 已损坏

vue.js - 如何在 vuejs 中通过 <router-link/> 将 props 传递给命名 View ?

vue.js - 如何在 Nuxt 2 和 3 中获取当前路由名称?

vue.js - 我怎样才能删除 vue cli 2?

javascript - Vue.js - 单击按钮时迭代数据对象