阅读 1346

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了。这里推荐大家一个插件servenpm 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
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。


文章分类
前端
文章标签