前端渲染方式

(Updated: )
笔记 › Javascript

单页面应用

只要一个web页面的应用，单页面跳转仅刷新局部资源，公共资源（css、js）仅需加载一次。
如图：

image

多页面应用

多页面应用跳转需刷新所有资源，每个公共资源需选择性重新加载。

image

具体分析对比：

单页面应用 多页面应用
组成 一个外壳页面和多个页面片段组成 多个完整页面组成
资源共用（css、js） 资源共用，只需在外壳页面加载 不共用，每个页面都需要加载
刷新方式 页面局部刷新或更改 整页刷新
url模式 a.com/#/pageone
a.com/#/pagetwo		 a.com/pageone.html
a.com/pagetwo.html
用户体验 页面切换速度快，用户体验好 页面切换加载缓慢，流畅度不够，用户体验比较差

单页面应用就是只有一个主页面的应用，浏览器需要一开始就加载所有必须的html，css，js。所有的页面内容都包含在这个主页面中，但在写的时候还是分开写页面片段，然后在交互的时候由路由动态载入，单页面的页面跳转，仅刷新局部资源。

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新

客户端渲染

用户访问url，请求html文件，前端根据路由动态渲染页面内容，关键链路较长，有一定的白屏时间

服务端渲染

用户访问url，服务端根据访问路径请求所需数据，拼接成html字符串，返回给前端，前端接收到html已有部分内容

预渲染

构建阶段生成匹配预渲染路径的html文件（每个需要预渲染的路由都有一个对应的 html），构建处理的html已有部分内容

服务端渲染：发送请求-服务器请求数据渲染html-包含首屏的html
预渲染：发送请求-包含首屏的html
客户端渲染：发送请求-html-js加载并动态渲染

prerender-spa-plugin ：一个 webpack 插件用于在单页应用中预渲染静态 html 内容

安装插件：

1
npm install prerender-spa-plugin --save-dev

配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

{
  // ...
  plugins: [
    // ...
    new PrerenderSpaPlugin(
      // 输出目录的绝对路径
      path.join(__dirname, '../dist'),
      // 预渲染的路由
      [ '/new', '/hot' ]
    )
  ]
}

实例化 PrerenderSpaPlugin 需要至少两个参数，第一个参数是单页应用的输出目录，第二个参数指定预渲染的路由，这里执行了两个路由 /new 和 /hot

npm run build构建后：

1
2
3
4
5
6
7
8
9
10
dist
│  index.html
│  
├─hot
│      index.html
│      
├─new
│      index.html
│      
└─static

预渲染的目录多了两个文件 new/index.html, hot/index.html

prerender-spa-plugin 原理:

在 webpack 构建阶段的最后，在本地启动一个 phantomjs，访问配置了预渲染的路由，再将 phantomjs 中渲染的页面输出到 html 文件中，并建立路由对应的目录。