SPA预渲染


在一般的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这样去匹配爬取,这是非常不明智的.

声明:Web前端小站 - 前端博客 - 南岸有归的个人博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - SPA预渲染


行路有良友,便是捷径。带上我吧,一起去看更大的世界。