前言:
为何使用prerender-spa-plugin？
原因在于单页面SPA首页白屏时间长，不利于SEO优化的问题。
目前主流的解决方案：服务端渲染SSR和预渲染技术prerender-spa-plugin。
使用：
1.我们默认是创建的create-react-app项目，具体教程百度即可。
2.安装:
npm install prerender-spa-plugin --save
3.配置：
config-overrides.js中配置：
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');
module.exports = (config, env) => {
if (env === 'production') {
config.plugins = config.plugins.concat([
new PrerenderSPAPlugin({
routes: ['/'，'/home'],
staticDir: path.join(__dirname, 'build'),
}),
]);
}
return config;
};
其中的routes就是你想要配置的路由列表。
4.router路由需要采用BrowserRouter,不然打包后每个页面都是一样的预渲染界面。
5。运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 就有预渲染好的dom了。这里推荐大家一个插件serve，npm install serve ,这样你输入命令serve -s dist就可以启服务了。很方便。
痛点：
如果没有设置预渲染的页面，在刷新页面后会先闪一下首页，然后再显示我们调转的路由。此时给大家提供一个思路，就是需要建两个预渲染页面a.html（首页），b.html（loading菊花图），如果是首页就跳转a.html，如果是没有配置预渲染页面的就用b.html，这就需要nginx配置了。
参考文献：
这里有react,vue,angular的配置：https://github.com/chrisvfritz/prerender-spa-plugin/tree/master/examples/create-react-app/src
