首页白屏优化实践

前言

由于这三大框架都是JS驱动，在JS没有解析加载完成之前页面无法展示，会处于长时间的白屏，带来了一定的用户体验问题

SSR 方式

想到白屏问题，首先想到的解决方案一般都是服务端渲染，在服务端将渲染逻辑处理好，然后将处理好的HTML直接返回给前端展示，这样就可以解决白屏的问题，也可以解决seo的问题，因为不需要动态获取数据了

预渲染

这个方案是相对简单直接的一个解决办法，尝试成本也比较低，这里介绍如何用prerender-spa-plugin做预渲染，这样就可以在浏览器进行渲染，而不需要将Vue或者React代码部署到服务器上，以vue-cli3的官方demo为例做配置，看具体的配置文件

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
module.exports = {
  configureWebpack: config => {
    let plugins = []
    plugins.push(new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, 'dist'),
      routes: ['/', '/about'],
      minify: {
        collapseBooleanAttributes: true,
        collapseWhitespace: true,
        decodeEntities: true,
        keepClosingSlash: true,
        sortAttributes: true
      },
      renderer: new Renderer({
        renderAfterDocumentEvent: 'custom-render-trigger'
      })
    }))
    config.plugins = [
      ...config.plugins,
      ...plugins
    ]
  }
}

预渲染有什么缺点

• a、动态数据无法展示，不同的用户看到的都是同样的页面
• b、路由很多时，代码构建时间太长
• c、用户容易误操作，由于预渲染时js还没有加载，因此展示出来的内容没有js的交互逻辑，比如按钮点击，在js加载完成之前用户点击是没有反应的
• d、预加载内容很少，当页面有内容是依赖动态数据加载时，在编译时是无法加载出动态数据的，因此会导致这部分内容编译不出来

骨架屏

骨架屏的实现原理和预加载类似，都是利用了Puppeteer爬取页面的功能，Puppeteer是chrome出的一个headlessChromenode库，提供了API可以抓取SPA并生成预渲染内容，和预加载不太一样的是骨架屏技术会在Puppeteer生成内容后，利用算法将生成的内容进行替换，生成骨架页面，page-skeleton-webpack-plugin是一个用来生成骨架屏的webpack插件，接下来就来看看怎么使用

const SkeletonPlugin = require('page-skeleton-webpack-plugin').SkeletonPlugin
const path = require('path')
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  configureWebpack: config => {
    let plugins = []
    plugins.push(new SkeletonPlugin({
      pathname: path.resolve(__dirname, './shell'), // pathname为来存储 shell 文件的地址
      staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
      routes: ['/', '/about'], // 将需要生成骨架屏的路由添加到数组中
      port: '7890'
    }))
    config.plugins = [
      ...config.plugins,
      ...plugins
    ]
  },
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin('html').tap(opts => {
        console.log(opts[0])
        opts[0].minify.removeComments = false
        return opts
      })
    }
  }
}