对于加载性能要求高的页面（如首页），一般的 Web 开发我们有很多解决方案（如服务端渲染，服务端缓存，SSR 等）。
但是也有一些环境不能使用这种技术（如微信小程序）。
Super Cache 提供了一个中间数据缓存的解决方案：
思路：
当你需要获取一个数据的时候，如果有缓存，先把旧的数据给你。
然后再从服务端获取新的数据，刷新缓存。
如果一开始没有缓存，则请求服务端数据，再把数据返回。
下一次请求缓存，从第一步开始。
这种解决方案，舍弃了一点数据的实时性（非第一次请求，只能获取上一次最新数据），大大提高了前端的加载性能。
适合的场景：
数据实时性要求不高。
服务端接口耗时长。
使用
import { BtApp } from '@beautywe/core'; import cache from '@beautywe/plugin-cache'; const app = new BtApp(); app.use(cache({ adapters: [{ key: 'name', data() { return API.fetch('xxx/name'); } }] }));
假设 API.fetch('xxx/name') 是请求服务器接口，返回数据：data_from_server
那么：
app.cache.get('name').then((value) => { // value: 'data_from_server' });
更多的配置，详情看：@beautywe/plugin-cache
日志 Logger
由 @beautywe/logger-plugin 提供的一个轻量的日志处理方案，它支持：
可控的 log level
自定义前缀
日志统一处理
使用
import { BtApp } from '@beautywe/core'; import logger from '@beautywe/plugin-logger'; const page = new BtApp(); page.use(logger({ // options }));
API
page.logger.info('this is info'); page.logger.warn('this is warn'); page.logger.error('this is error'); page.logger.debug('this is debug'); // 输出 // [info] this is info // [warn] this is warn // [error] this is error // [debug] this is debug
Level control
可通过配置来控制哪些 level 该打印：
page.use(logger({ level: 'warn', }));
那么 warn 以上的 log （info, debug）就不会被打印，这种满足于开发和生成环境对 log 的不同需求。
level 等级如下：
Logger.LEVEL = { error: 1, warn: 2, info: 3, debug: 4, };
更多的配置，详情看： @beautywe/plugin-logger
BeautyWe Framework
@beautywe/core 和 @beautywe/plugin-... 给小程序提供了：
开放原生，支持插件化 —— by core
各种插件 —— by plugins
但是，还有很多的开发中实际还会遇到的痛点，是上面两个解决不到的。
如项目的组织、规范、工程化、配置、多环境等等
这些就是，「BeautyWe Framework」要解决的范畴。
它作为一套开箱即用的项目框架，提供了这些功能：
集成 BeautyWe Core
NPM 支持
全局窗口
全局 Page，Component
全局配置文件
多环境开发
Example Pages
正常项目需要的标配：ES2015+,sass,uglify,watch 等
以及我们认为良好的项目规范（eslint，commit log，目录结构等）
也是由于篇幅原因，挑几个有趣的来讲讲，更多的可以看看官方文档：BeautyWe
快速创建
首先安装 @beautywe/cli
$ npm i @beautywe/cli -g
创建应用
$ beautywe new app > appName: my-app > version: 0.0.1 > appid: 123456 > 这样可以么: > { > "appName": "my-app", > "version": "0.0.1", > "appid": "123456" > }
回答几个问题之后，项目就生成了：
my-app ├── gulpfile.js ├── package.json └── src ├── app.js ├── app.json ├── app.scss ├── assets ├── components ├── config ├── examples ├── libs ├── npm ├── pages └── project.config.json
创建页面、组件、插件
页面
主包页面：beautywe new page <path|name>
分包页面：beautywe new page --subpkg <subPackageName> <path|name>
组件
beautywe new component <name>
插件
beautywe new plugin <name>
自定义模板
在 ./.templates 目录中，存放着快速创建命令的创建模板：