harttle / harttle.github.io

Harttle Land 的源码和文章
https://harttle.land
Creative Commons Attribution 4.0 International
122 stars 32 forks source link

2020/02/10/deep-into-vue-ssr #160

Open utterances-bot opened 2 years ago

utterances-bot commented 2 years ago

Vue 服务器端渲染(SSR)源码分析 | Harttle Land

本文从框架开发者而非使用者的角度,学习和探讨 Vue SSR 的源码。希望能让更多人理解 SSR 魔法的工作原理和实现思路。因此本文不会介绍最终接口的详细参数,如 createRenderer() 的具体参数、createBundleRenderer...

https://harttle.land/2020/02/10/deep-into-vue-ssr.html

guyskk commented 2 years ago

博主你好,我最近研究Vue状态管理,发现了这篇好文章!有个想法想探讨一下:

在 Vue 3, Vuex 4 以及 Pinia 当中,都是用 useStore() 的方式,在 setup 内创建 store 实例,而不是创建全局单例,import之后直接使用。这样用起来就稍微麻烦一些,也不方便用在 Vue 2 options 写法中。

出于好奇,我在官方讨论区提了这个问题,得知是因为 SSR 需要避免有状态的单例: https://github.com/vuejs/rfcs/discussions/270#discussioncomment-1751815

之后我发现,Vue SSR 提供 runInNewContext 选项,可以解决有状态单例的问题,只是渲染速度比较慢。继续深入,发现是 vm.createContext 这个调用慢了:https://zhuanlan.zhihu.com/p/285808027

那么,如果把 context 做成 context pool ,每个 context 用完之后重置全局对象的状态,放回 pool 重复使用,不就可以显著提高性能吗?全局对象基本就是 Vue app 和 Vuex store,重置状态也很好实现。

大致看了一下 Vue SSR 的部分源码,似乎也不难实现。你觉得这个思路如何?欢迎拍砖。 https://github.com/vuejs/vue/blob/dev/src/server/bundle-renderer/create-bundle-runner.js