Killblanks

# 背景

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

# 原理

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

# 框架

@killblanks_prerender_framework

# 快速开始

# 1. 安装

  yarn add @killblanks/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_SKELETON，即可实时预览，需要更新骨架屏页面时，请点击右上角refresh按钮

@killblanks/skeleton-ext