open-index/open-npm huggingface dataset:
npm package: @killblanks/prerender
Description: prerender the HTML
Author: lixichen
Latest version: 1.0.7

## 背景

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

中文 | [English](https://github.com/warpcgd/killblanks/blob/main/packages/prerender/README_EN.md)

## 原理

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

## 框架

![@killblanks_prerender_framework](./assets/@killblanks_prerender_framework.png)

## 快速开始

### 1. 安装

```sh
  npm i @kiilblank/prerender -D
```

### 2. 配置

- webpack 配置

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

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

- vue-cli 配置

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

详细参数请查看[prerender](https://warpcgd.github.io/killblanks/documents/prerender.html)

### 3. 运行

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

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

```

### 4. 预览

- 打开开发环境启动的本地页面
- 开启`dev-tools`,进入 console
- 输入`PRERENDER_PREVIEW`，即可实时预览，需要更新骨架屏页面时，请点击右上角`refresh`按钮
npm package: @killblanks/skeleton-chrome-ext
Description: > 预渲染提供的功能仅仅只能解决白屏问题，但是这个内容实际上仅仅是 css 和 html 生成的框架，存在页面的结构和实际不符合，空白过多等问题
Latest version: 1.0.6

## 背景

> 预渲染提供的功能仅仅只能解决白屏问题，但是这个内容实际上仅仅是 css 和 html 生成的框架，存在页面的结构和实际不符合，空白过多等问题

中文 | [English](https://github.com/warpcgd/killblanks/blob/main/packages/skeleton-chrome-ext/README_EN.md)

## 原理

基于[一种自动化生成骨架屏的方案](https://github.com/Jocs/jocs.github.io/issues/22)，我魔改了[skeleton](https://github.com/ElemeFE/page-skeleton-webpack-plugin/tree/master/src/script)代码，当谷歌插件加载后，注入页面中，选中当前元素，运行`outputSkeleton`，即可拿到骨架屏的 html&css

## 框架

![@killblanks_skeleleton_ext_framework](./assets/@killblanks_skeleleton_ext_framework.png)

## 快速开始

### 1. 安装

目前推荐两种方式安装

### 1.1 谷歌商店(暂未上架)

### 1.2 本地安装

- `git clone`[killblanks](https://github.com/warpcgd/killblanks)源码

```sh
  git clone https://github.com/warpcgd/killblanks.git
```

- 打开`chrome:extensions`，勾选`开发者模式`，点击`加载已解压的拓展程序`,选择 clone 源码中`killblanks/packages/skeleton-chrome-ext/dist`文件夹

- 视频教程

[skeleton-install](https://o-static.ihago.net/skeleton/4e19720a16e0f8b3057ea76958f1d542/anzhuangskeletonext.mp4)

### 2. 使用

- 打开`dev-tools`
- 切换到`Element`tab
- 点击`选择元素`按钮，选择任意元素
- 在`sidebar`中找到`SKELETON`
- 点击 render 即可

- 视频教程

[skeleton-use](https://o-static.ihago.net/skeleton/d1349a7ee99d255649b38616f26de70f/shiyongskeletonext.mp4)