SPA 预渲染

发表于 |

最近在做技术选型的时候，在纠结SSR与SPA生成的静态页面的抉择中，突然发现了还有可以使用SPA预渲染这样的一个方法。

Prerender SPA Plugin

Prerender SPA Plugin是一款webpack的插件，主要用于在单页引用中预渲染页面的html文件。因为是单独的webpack插件，所以无论你是用的哪一款SPA的框架都可以在此基础上进行预渲染来优化你的站点的SEO。

首先安装插件并保存 npm install prerender-spa-plugin --save-dev。

然后在产品的配置文件build/webpack.prod.conf.js中添加对插件的引用修改

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

{
  plugins: [
    new PrerenderSpaPlugin(
      path.join(__dirname, '../dist'),
      // 预渲染的路由
      [ '/', '/test' ]
    )
  ]
}

上述栗子是针对history模式的路由的，对路由模式不清楚的可以自行百度一下。

针对hash模式的路由仅需要修改对应的路由即可

1
2
// 预渲染的路由
[ '/#/', '/#/test' ]

其中会有很奇怪的原因为什么可以这样直接的进行修改。其实这个是prerender-spa-plugin的工作原理导致的，在 webpack 构建阶段的最后，在本地启动一个 phantomjs，访问配置了预渲染的路由，再将 phantomjs 中渲染的页面输出到 html 文件中，并建立路由对应的目录。

如果对hash模式的路由配置的和history一样[ '/', '/test' ]vue在页面中打开的效果则会是http://localhost:4000/test#/最终由于vue对路由的解析的机制的原因将会造成无论配置的什么路由预渲染页面中的都将是'/'中的内容。

hi you can see me