在一般的SPA项目中，我们在最后打包的时候只会生成一个HTML，JS与CSS文件，或许你会采用一些方法，比如公共文件拆分，路由懒加载等等生成多个文件，但是也无法从根本上解决这个问题，所有的资源还是通过JS动态的生成渲染的。 所以，所谓的预渲染就是在单页应用中，将用户交互不多，同时需要SEO的页面单独提取出来的一种方法，提取出来的就是一个HTML文件。

如何做预渲染.

使用webpack插件prerender-spa-plugin开启预渲染模式. 使用过node插件superagent做过爬虫的应该看到prerender会比较熟悉，没错，模式还是那个模式.

安装prerender-spa-plugin npm i prerender-spa-plugin --save. 直接在webpack插件中添加prerender-spa-plugin.

//引入插件
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
//开启预渲染
      process.env.NODE_ENV=='production'? new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, '../build'),
        routes: ['/', '/home',''/tags/vue''],
        renderer: new Renderer({
          renderAfterTime: 5000
        }),
        server: {
          proxy: {
            "/api": {
              target: "https://www.nanbk.com/api/",
              secure: false,
              changeOrigin: true,
              pathRewrite: {
                "^/api": ""
              }
            }
          }
        }
      }):null

我这种配置不会打开chromium浏览器，但也会将页面内容获取到.

解读一下插件配置.

• process.env.NODE_ENV=='production'判断是否为生产环境，我们只在打包时开启预渲染.
• staticDir:打包目录.
• routes:预渲染路由.
• renderAfterTime:5000ms后去渲染.
• proxy:预渲染代理接口. 具体的配置可以查看传送门

上线配置.

我使用的Nginx.

location / {
            root   /www/build;
            index  index.html;
            try_files $uri $uri/ /index.html;
}

讲一下我所了解的利弊.

1. 由于SPA项目影响渲染速度，我们把部分页面渲染成静态页面，首屏加速速度回更快.
2. 预渲染的模式seo如果是动态数据比不过服务端渲染，静态页面的话seo是一致的.
3. 对于一般的页面，比如静态的官网，不想使用spa框架的ssr框架，使用预渲染是一个非常不错的选择.
4. 动态数据还是建议使用服务端渲染，或者ssr框架，预渲染路由不可能一个个的去/a/1 /a/2这样去匹配爬取，这是非常不明智的.