Killblanks

  • Help you solve the problem of white screen
  • Better user experience
  • Content loads faster
GitHub forks GitHub stars npm downloads GitHub license

简单配置⚙️

通过简单的配置即可为页面添加预渲染和骨架屏

预渲染+骨架屏💀

你可以只使用预渲染,也可以预渲染+骨架屏组合使用

提升页面性能⚡

通过使用预渲染和骨架屏可以明显提升页面FCP和LCP

Quick start 🦴

# 1. 安装

  yarn add @killblanks/prerender -D

# 2. 配置

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

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

# 3. 使用@killblanks/skeleton-ext

# 4. 将生成的骨架屏组件使用在项目中

# 5. 在浏览器的console启用PRERENDER_SKELETON

 在Chrome console中输入`PRERENDER_SKELETON`启动骨架屏预览