nuxt打包路劲问题_Nuxt史上最全讲解 第一章

前言

Nuxt是Vue上的SSR,也就是服务端渲染应用框架，可在很大程度上解决当前SPA和CSR的首页加载慢，不利于SEO的问题。本文就将详细介绍Nuxt的使用以及相关概念，并且实战一个Demo来方便读者理解。

1.1 SSR

首先介绍几个概念:

SSR(Server Side Rendering) ，意味服务端渲染。但是SSR 分为两大阶段，第一阶段是在Ajax还没有发展之前，网页基本上都是服务端渲染的，服务端渲染HTML页面，糅合JS和CSS文件，之后发送给浏览器，浏览器解析这个类似文档的内容，展示给用户，这就是第一阶段的SSR。第二阶段就是WEB2.0时代的SSR，在这里网页在某种程度上被当做一个APP，  而浏览器就是运行这个APP的容器，而后端渲染返回也不再是一个简单的文档，而是一个网页的快照，类似于APP的截图。

CSR(Client Side Rendering)， 意味着客户端渲染。整体过程就是服务器返回给浏览器一个htmL模板，之后通过JS的请求获取数据，重新渲染DOM 元素，以达到静态刷新的效果，这也就是现在大部分网页的样子。

SPA(Single Page Web Application) ，意味着单页面应用。也就是类似于Vue和React之流的框架，其实严格来说并不是这种框架导致的SPA， 而是使用这种框架的项目基本上都被做成了SPA。

SEO(Search Engine Optimization), 意味着搜索引擎优化。简单来说就是让搜索引擎更容易检索到网，页的内容，可以通过网站的TDK或者网页内容来更容易被搜索(准确的说应该是除了谷歌以外的搜素引擎，谷歌用的是快照)，对于展示类网站来说是十分重要的。

接下来，我们来了解下CSR和SSR网页的渲染过程。

在SSR的情况下，浏览器向服务器发送请求，之后服务器会将已经渲染好的页面发送给浏览器，这是第一步;浏览器渲染在服务器上已经渲染好的页面，同时下载js文件，这是第二步;在第三步的时候，若页面使用框架则开始执行框架，在框架执行完成之后页面就是可以交互的。至此，页面完整的展示在用户，面前。:

在CSR 的情况下，浏览器向服务器发送请求，之后服务器返回数据给浏览器，这是第一步，第二步就是浏览器下载各种js文件;第三步是浏览器对js文件进行处理，若页面使用框架会在这个时候执行框架，之后渲染页面内容。在这三步完成之后页面才是可看又可用的，因此在页面可以进行实际操作之前，用户是看不见页面的情况的，这就是CSR或者说SPA首屏加载慢的原因之一。

相比之下，SSR在第二步的时候就将页面展示出来:了，虽然页面在此时不能进行交互操作，但是用户已经可以查看页面的内容，在很大程度上优化了用户的体验，也正因如此解决了首屏加载慢的问题。关于SEO的问题，因为服务器是发送已经渲染好的页面给前端，所以页面元素可以被爬虫解析到，搜索引擎则可以查找到页面内容。还有一点十分重要的就是SSR解决了接口暴露这个问题，接口暴露就意味着任何人都可以使用这个接口，为所欲为，本次的DEMO使用的就是掘金的接口，请掘金的诸位大佬见谅。。。

但是SSR也有可能造成服务端压力过大的情况，毕竟页面都是服务器渲染的，这对服务器的性能有了一定的要求，CSR就没有这个问题，页面在客户端进行渲染，消耗的主要都是客户端的性能，对服务器端要求不大。所以说具体使用什么渲染方式因项目的不同而不同，没有最好的，只有最适合的。

1.2 Nuxt

如果各位对  React生态圈比较关注的话，应该会知道React生态圈里面的Next 就是一个React的服务端渲染应用框架,  Nuxt就是在Next发布后几个小时发布的，一个Vue的服务端渲染应用框架。两者据说是异曲同工，有兴趣的读者可以去了解下二者的原理。笔者在此不做赘述。

Nuxt默认集成了Vue ，Vue-Router，Vuex，Vue-Meta这些框架与组件库，也就是Vue全家桶，而其还自带了Webpack, 省去了一些不必要的配置，用户也无需编写webpack.config.js 文件，只需配置简化后的  nuxt.config.js文件即可。默认还带有一些常用功能，比防说ES6,ES7 啥的，还有热加载，压缩JS,CSS文件等等十分方便的功能，省去了重复性的配置，减少了开发的工作量。

集成的Vue-Router 使用了文件夹的方式来进行路由:的转义，这一点在下面的实战会讲到，个人感觉十分简明易懂，虽然使用上有一-些局限性，单但胜在条理清晰，对项目部熟悉的人一看便知，更容易理解。

Nuxt还可以通过

     nuxt generate

指令来生成对应的静态文件，这里的意义就在于静态部署，生成的静态文件会根据当前路由的结构生成对应的文件夹，保持结构的一致性。而这些静态文件可以直接被部署在站点上，  比防说  Gi thubPages，Heroku之类的站点上。这其实跟webpack的打包文件的意思差不多。生成静态文件跟大的意义在于减少服务器的压力，可以将其部署在全球性的CDN上，这样分散了对服务器的请求。也是只有JS， CSS， HTML文件可以部署在CDN上，PHP之类的动态脚本却并不可以，这也是JS框架的一大优点，虽然PHP是世界上最好的语言:)。Nuxt的官网部署在Github Pages上，这里是源码，这里是静态化后的文件，大家有兴趣可以参考下。静态文件的作用相对来说更适合展示类的网站，比防说博客或者电商的商品详情页面，在每次更新的时候，我们可以调用一.个AWS Lambda函数来进行更新文档的一系列操作，省去了重复更新静态文件内容的步骤。

如果Nuxt 项目被部署在服务器上，那么可以直接使用Nuxt指令来启动服务，服务是支持热加载和服务,端渲染的。Nuxt 的兼容性也很强，若是已有了Web服务器，可以将Nuxt当做渲染前端页面的中间件来使用，没有太多的限制。

1.3 后端

在本次的Demo中，后端使用的是Node中经典的Express框架，因为其上手比较快，搭建简单的服务十分方便。

数据部分跨域访问了掘金的首页数据，这部分笔者还是研究了挺久的，之前使用的Vue 脚手架自带的Proxy跨域，但是在Nuxt中只能自己安装组件,然后配置，稍微麻烦了一点，但是复杂程度也可以接受。Demo 的功能并不复杂，重点还是放在Nuxt的配置与部署上。

1.4 小结

以上是本次Demo的理论知识部分，占比大约30%,没有太理解的同学可以去查阅其他相关资料，以进行更深一步的了解。熟悉这部分理论之后对项目的理解会有很大的帮助。