https://ruby-china.org/tcstory en-us <p>其实我已经在 github 上提了一个 issue, 地址是 <a href="https://github.com/vuejs/vue/issues/12143" rel="nofollow" target="_blank">https://github.com/vuejs/vue/issues/12143</a> , 不过我还是想在这里和大家讨论一下这个问题。</p> <p>vue 的版本是 2.6.x, 可以复现的仓库地址是 <a href="https://github.com/tcstory/vue-ssr-issue" rel="nofollow" target="_blank">https://github.com/tcstory/vue-ssr-issue</a></p> <p>复现的步骤</p> <ol> <li>npm run build</li> <li>npm run start</li> <li>分别在禁用和启动 js 的情况下，访问 <a href="http://localhost:3000/page1" rel="nofollow" target="_blank">http://localhost:3000/page1</a>, 你将会发现禁用 js 的情况下，html 文件中，缺少某些 css 样式</li> </ol> <h2 id="这会导致什么问题呢?">这会导致什么问题呢？</h2> <p>其实，是否禁用 js 来浏览页面不是问题的关键，我们考虑下面的场景</p> <ol> <li>用户访问页面</li> <li>页面加载完毕后，浏览器执行了 js, 然后注入 css</li> <li>css 加载完毕后，页面更新</li> </ol> <p>主要在于，在这个过程中，用户能观察到页面在<strong>"抖动"</strong>, 原因是一开始加载页面的时候，缺少了某些 css 样式，直到 js 执行后，这个 css 样式才被加载回来。</p> <h2 id="个人分析的产生这个 bug 的原因">个人分析的产生这个 bug 的原因</h2> <p>我自己也花了很多时间来排查个问题，下面是我自己定位到的问题，和大家分享一下 (涉及到 webpack 的相关概念).</p> <p>vue 在服务端渲染的过程中，是通过 vue-loader 在组件内部生成一串 hash, 通过这一串的 hash, 在渲染过程中，vue 就能知道当前渲染的组件，所属于哪一个 chunk, 然后，再把这个 chunk 相关的 files 给注入到 html 中</p> <p>这个过程通常情况下，是没有任何问题的，除非遇到了 webpack 的 splitChunks.</p> <p>我们先假设有 page1 和 page2 两个页面，以及他们共同依赖的 btn1.vue 文件</p> <ol> <li>page1.vue 依赖 btn1.vue</li> <li>page2.vue 依赖 btn1.vue</li> <li>btn1.vue 依赖了 btn1.css</li> </ol> <p>通过构建，你能拿到下面几个文件 (省略了不相干的文件)</p> <ol> <li>page1.js</li> <li>page2.js</li> <li>page1~page2.js(这个文件包含了组件的 js 和 css 代码)</li> </ol> <p>btn1.vue 组件被打包到了 page1~page2 的 chunk 中，由于这个 chunk 包含了组件所需的 js 和 css 代码，所以，资源的注入是正常的</p> <p>但是，如果你多了一个 page3 页面，并且，这个页面也依赖了 btn1.css, 这个时候，经过构建，你将会拿到下面这些文件</p> <ol> <li>page1.js</li> <li>page2.js</li> <li>page3.js</li> <li>page1~page2.js (这个文件包含了 btn1.vue 的 js 代码)</li> <li>page1~page2 ~page3.js (这个文件包含了 btn.css 的代码)</li> </ol> <p>webpack 在打包过程当中，首先生成了 page1~ page2 的 chunk, 然后，它发现，这个 chunk 和 page3 的 chunk 都共同依赖了 btn1.css 这个模块，所以，webpack 就继续拆包，最后就生成了 page1 ~page2 ~page3 的 chunk.</p> <p>在 ssr 渲染过程中，vue 只能知道 btn1 被打包进入了 page1~page2.js, 但是却不知道 css 被抽离到别的文件中了。导致 btn.css 不会被注入到 html 中。</p> <p>其实这些被抽离出去的 chunk, 通过他的 sibling 也能拿到相关的信息，只是即使有了这些信息也不好判断哪些 sibling 应该被注入到 html 中。</p> <p><strong>其实我知道大家可能尝试过 ember 的 ssr , 或则 react 的 ssr, 想知道大家有没有遇到类似的问题</strong></p> tcstory Tue, 22 Jun 2021 10:37:18 +0800 https://ruby-china.org/topics/41395 https://ruby-china.org/topics/41395 <h2 id="求职目标">求职目标</h2> <p>前端工程师</p> <h2 id="个人信息">个人信息</h2> <p>之前在上海待了 2 年，考虑到将来也不会定居上海 (老家广西), 而且我对深圳和广州都无感，所以想找找珠海的前端工作。不知道大家有啥推荐。</p> tcstory Sun, 29 Dec 2019 22:45:44 +0800 https://ruby-china.org/topics/39384 https://ruby-china.org/topics/39384 <p>额，小弟刚做后端不久，可能有一些名词会弄错，希望大大们见谅。</p> <p>目前，我在做的一个后台的服务，涉及到一个 主播工资结算的查询</p> <p>a 表：主播个人信息表 b 表：每个月主播的工资表，b 表为主要的表</p> <p><strong>普通的查询</strong>: 先从 b 表里面拉取 20 条数据，然后在根据主播的 id 去 a 表里面把主播的信息拉回来，然后根据 id 拼接数据，然后返回给前端</p> <p><strong>条件查询</strong>: 假如我要查询的主播类型是已经<strong>签约</strong>的，我的做法是，去 a 表里面把已经签约的主播的前 20 条找回来，然后拿着这个 20 个 id 去 b 表里面把相关的工资记录找到，然后再去拿一次 a 表的数据，把主播的信息补充完整，然后返回给前端</p> <p>条件查询会遇到的问题是，假如我在 a 表里面找到前 20 条数据，刚好在 b 表里面找不到，那么就不会返回任何数据，那么会给人的感觉是<strong>"我想查看已经签约的主播的工资记录，但是却没有找到任何一条记录"</strong>,也许你会奇怪为啥在 b 表里面会找不到数据，因为 b 表里面的数据是每个主播每个月的工资，有一些主播可能是刚签约的，所以刚好缺少某一个月的数据。</p> <p>这个问题该如何解决呢？我们的数据库是拆分开的，不允许用 left join 之类的东西</p> tcstory Mon, 02 Jan 2017 11:49:49 +0800 https://ruby-china.org/topics/32037 https://ruby-china.org/topics/32037