killblanks

killblanks copied to clipboard

白屏一直是 CSR 项目诞生来困扰前端的一大问题，如何在低成本的情况下，增加用户的等待时间，减少跳出率，以及提高页面性能，是前端一直在解决的难题，killblanks 作为其中一种的解决方案，将页面节点直接生成骨架屏，通过预渲染让用户能在等待内容加载时显示内容的轮廓，提供了更好的用户体验，并使内容感觉更快。

中文 | English

框架 | 效果 | 安装 | 文档 | 使用 | API | Maintainers | Contributing | License

框架

• @kiilblank/example 骨架屏 demo
• @kiilblank/prerender 预渲染工具
• @kiilblank/skeleton 骨架屏核心代码
• @kiilblank/skeleton-chrome-ext 骨架屏 chrome 插件

效果

安装

@kiilblank 使用 lerna 进行包管理，可以运行以下指令构建项目

1. 安装依赖

  yarn bootstrap

2. 启动监听

  yarn watch

3. 启动开发环境

  yarn dev

4. 打包

  yarn build

文档

• Guides
• Demo

使用

@kiilblank 在项目中主要使用@kiilblank/prerender 和@kiilblank/skeleton-chrome-ext

1. 安装

  yarn add @killblanks/prerender -D

2. 配置 webpack

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

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

• 详细步骤请查看@killblanks/prerender

3. 使用@killblanks/skeleton-ext

• 详细步骤请查看@killblanks/skeleton-ext

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

• 像DEMO中所做的一样

5. 在浏览器的console输入PRERENDER_PREVIEW

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

API

• @kiilblank/prerender

• @kiilblank/skeleton

Maintainers

@warpcgd

Contributing

• Fork it!
• Create your feature branch: git checkout -b my-new-feature
• Commit your changes: git commit -am 'Add some feature'
• Push to the branch: git push origin my-new-feature
• Submit a pull request to branch dev

License

Apache-2.0 © 2021 lixichen