背景

预渲染是解决白屏问题的核心，通过Purpeteer读取请求内容，能直出有更多内容的html,从而干掉白屏

中文 | English

原理

利用Purpeteer能模拟浏览器请求页面的功能，在页面 onload 成功后，读取并输出 html

框架

快速开始

1. 安装

  npm i @kiilblank/prerender -D

2. 配置

• webpack 配置

// webpack.config.js
const prerender = require('@killblanks/prerender')

export default {
  ...
  plugins: [new prerender()]
  ...
}

• vue-cli 配置

// vue.config.js
module.exports = {
  ...
  chainWebpack: config => {
    const prerender = require('@killblanks/prerender')
    config.plugin('prerender').use(prerender.default, [])
  }
  ...
}

详细参数请查看prerender

3. 运行

• 启动开发环境
• 看到prerender server listen at port:xxxx即成功运行

...
  prerederSkeleton: prerender server listen at port:xxxx
...

4. 预览

• 打开开发环境启动的本地页面
• 开启dev-tools,进入 console
• 输入PRERENDER_PREVIEW，即可实时预览，需要更新骨架屏页面时，请点击右上角refresh按钮