react预渲染prerender-spa-plugin

前言:

为什么使用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的配置：github.com/chrisvfritz…

做者：沐雨芝录 连接：https://www.jianshu.com/p/5c63c07b51b6 来源：简书 简书著做权归做者全部，任何形式的转载都请联系做者得到受权并注明出处。