浅谈Vue SSR中的Bundle的具有使用

前言

写过Vue SSR的都知道,Vue通过提供server和client的webpack插件生成bundle josn,从而实现类似服务端的热更以及客户端资源的优化注入。那么这两个个bundle到底有什么神奇的呢?OK,话不多说,进入正题

客户端 vue-ssr-client-manifest.json

首先看看客户端的json,明显看到,里面借助webpack插件,把spa用到的文件进行了分类, publicPath 是公共路径,all 是所有的文件, initial 是入口文件依赖的js和css, async 是首屏不需要的异步的js,分析这些出来有什么用呢,主要是用来优化生成的html的资源注入,这个在后面会讲到

服务端 vue-ssr-server-bundle.json

然后我们再康康服务端生成的json, entry 是服务款入口的文件, files 是服务端依赖的文件列表, maps 是sourcemaps文件列表,这里暂时是空

如果把files展开,会看到里面是一堆文件列表,文件名跟key一样,然后value里面,对的,你没看错,是一段js,里面就是服务端渲染需要的代码,那道理我都懂,为什么有这段就可以实现服务端代码的热更以及sourcemap的定位呢

服务端的热更和sourcemap

带着这个问题,我去看了一下vue服务端的源码,左边框的三个文件就是实现这些神奇效果的关键之处了,其中右边框的entry、files就是我们上面服务端对应的json

接下来我们再去看看createBundleRunner里面这个方法,最关键是evaluateModule 里面调用getCompiledScript这个方法,其中evaluateModule 还会把执行的结果缓存到evaluatedFiles里面去

getCompiledScript里面通过调用vm.Scirpt把我们在entry里面的代码丢进vm创建的沙箱里面,同时也是要compiledScripts把生成的script片段缓存起来

vm.Script创建沙箱,我们还可以传入sandbox上下文,如果entry创建的沙箱依赖其他文件,还可以递归创建沙箱,通过这样做,我们就可以监听服务端文件变化的时候创建新的服务端json,再创建新的沙箱来执行,从而达到nodejs热更的效果

其中我们知道runInNewContext决定是否创建新的上下文,我们知道如果设置为false,则会使用runInThisContext创建沙箱,但是会容易污染全局global,如果我们使用runInNexContext来创建,同时传入我们预先传入的sandbox,就可以隔离上下文,但是这样有个坏处,就是创建新的上下文会有一定的资源消耗,

如果我们使用once来创建,就不会每个请求都创建新的隔离上下文,而是创建一个新的隔离上下文公用,这样就可以最大限度避免V8创建的消耗,可以看到,只有在没有runner的情况下才才会创建sandbox

至于sourcemap,通过使用mozilla这个 source-map npm库,在堆栈出错的时候,把错误的文件和函数进去,通过消费sourcemap来还原定位源文件的具体的位置和行数 可以说,脑洞真的很大,但这就完了吗,不止~

前面我们只讲了服务端的json,那客户端也生成了一份呢,那个有什么用呢?我们再次进入vue源码去挖掘, 很快就找到了答案

客户端的注入优化

我们知道服务端渲染会返回一个html,然后接下来客户端会走一次hydration,客户端需要的文件,例如js和css,我们需要在写在html里面,然后通过http去请求文件回来,不然怎么hydration啊

但这里有个维度,哪些是入口文件,哪些是异步文件,vue服务端自带client-plugin已经帮我们抽离出来了,OK,回到我们构建html,对于入口文件和css,我们会做preload的优化,对于异步的会做prefetch优化,同时对于入口的js还会做个script标签的defer加载提高并发数

总结

Vue SSR就是这么巧妙地利用两个webpack插件提取项目的关键信息生成bundle,从而达到服务器热更以及前端加载优化,真的可以说脑洞很大

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Vue SSR 组件加载问题

    Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return

  • 详解Vue2 SSR 缓存 Api 数据

    本文介绍了Vue2 SSR 缓存 Api 数据,分享给大家,具体如下: 1. 安装缓存依赖: lru-cache npm install lru-cache --dev 2. api 配置文件 config-server.js var LRU = require('lru-cache') let api if (process.__API__) { api = process.__API__ } else { api = process.__API__ = { api: 'http://loca

  • 从0到1构建vueSSR项目之路由的构建

    vue开发依赖的相关配置 Vue SSR 指南 今天先做客户端方面的配置,明天再做服务端的部分. 那么马上开始吧~ 修改部分代码 脚手架生成的代码肯定是不适合我们所用的 所以要修改一部分代码 //App.vue <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default

  • 通过vue-cli3构建一个SSR应用程序的方法

    1.前沿 1.1.什么是SSR SSR(服务端渲染)顾名思义就是将页面在服务端渲染完成后在客户端直接展示. 1.2.客户端渲染与服务端渲染的区别 传统的SPA模式 即客户端渲染的模式 Vue.js构建的应用程序,默认情况下是有一个html模板页,然后通过webpack打包生成一堆js.css等等资源文件.然后塞到index.html中 用户输入url访问页面 -> 先得到一个html模板页 -> 然后通过异步请求服务端数据 -> 得到服务端的数据 -> 渲染成局部页面 ->

  • 理解vue ssr原理并自己搭建简单的ssr框架

    前言 大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如果是把一个SPA应用改造成SSR应用,成本还是有些高的,这工作量无异于重构前端.另外对前端的技术要求也是挺高的,需要对Vue比较熟悉,还要有Node.js 和 webpack 的应用经验. 引入 Vue是一个构建客户端应用的框架,即vue组件是在浏览器中进行渲染的.所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们

  • 最后说说Vue2 SSR 的 Cookies 问题

    本来想前面写点什么的, 还是算了, 直接说思路吧. 从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext 之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路 因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 a

  • 浅谈Vue SSR 的 Cookies 问题

    一个网站一旦涉及到多用户, 就很难从 Cookies 中逃脱, Vue SSR 的 cookies 也真算是遇到的一个不小的问题, 从开始玩 SSR 开始到现在, 一共想出了3种方案, 从最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到现在的将 Cookies 注入到组件的 asyncData 方法. 随着 Vue 的升级, 第一种方案已经不再适用, 第二种也有不少的限制, 于是想到第三种方案, 下来就说说具体实现的方法: 第一种方案 第一种方

  • Vue基于NUXT的SSR详解

    本文介绍了Vue基于NUXT的SSR,分享给大家,也给自己留个笔记. SSR 首先说下 SSR,最近很热的词,意为 Server Side Rendering(服务端渲染),目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容,也就是用户搜不到此网站的相关信息. 抓取页面的前提是 html 含有被抓取内容,我们不妨看看基于 vue 的线上 SPA 页面请求时返回了什么 <!DOCTYPE html> <ht

  • 详解vue服务端渲染(SSR)初探

    前言 首先来讲一下服务端渲染,直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJAX 获取然后js动态添加 服务端渲染的优劣 首先是seo问题,前端动态渲染的内容是不能被抓取到的,而使用服务端渲染就可以解决这个问题.还有就是首屏加载过慢这种问题,比如在SPA中,打开首页需要初始加载很多资源,这时考虑在首屏使用服务端渲染,也是一种折中的优化方案.但是使用SSR时,势必会增加服

  • 基于vue-ssr服务端渲染入门详解

    第一部分 基本介绍 1.前言 服务端渲染实现原理机制:在服务端拿数据进行解析渲染,直接生成html片段返回给前端.然后前端可以通过解析后端返回的html片段到前端页面,大致有以下两种形式: 1.服务器通过模版引擎直接渲染整个页面,例如java后端的vm模版引擎,php后端的smarty模版引擎. 2.服务渲染生成html代码块, 前端通过AJAX获取然后使用js动态添加. 2.服务端渲染的优劣 服务端渲染能够解决两大问题: 1.seo问题,有利于搜索引擎蜘蛛抓取网站内容,利于网站的收录和排名.

  • 简单的Vue SSR的示例代码

    前言 最近接手一个老项目,典型的 Vue 组件化前端渲染,后续业务优化可能会朝 SSR 方向走,因此,就先做些技术储备.如果对 Vue SSR 完全不了解,请先阅读官方文档. 思路 Vue 提供了一个官方 Demo,该 Demo 优点是功能大而全,缺点是对新手不友好,容易让人看蒙.因此,今天我们来写一个更加容易上手的 Demo.总共分三步走,循序渐进. 写一个简单的前端渲染 Demo(不包含 Ajax 数据): 将前端渲染改成后端渲染(仍然不包含 Ajax 数据): 在后端渲染的基础上,加上 A

随机推荐