Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shanamaid/archer-svgs
异步加载svg解决方案
https://github.com/shanamaid/archer-svgs
dish-cache font-icon icon load-async load-svg localstorage prefetch svg svg-icon svg-icons typescript
Last synced: 3 months ago
JSON representation
异步加载svg解决方案
- Host: GitHub
- URL: https://github.com/shanamaid/archer-svgs
- Owner: ShanaMaid
- License: mit
- Created: 2018-12-26T08:21:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T10:04:15.000Z (about 2 years ago)
- Last Synced: 2024-10-29T01:19:25.512Z (3 months ago)
- Topics: dish-cache, font-icon, icon, load-async, load-svg, localstorage, prefetch, svg, svg-icon, svg-icons, typescript
- Language: TypeScript
- Homepage: https://shanamaid.github.io/archer-svgs
- Size: 5.18 MB
- Stars: 27
- Watchers: 3
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
archer-svgs
# 背景
实际生产项目中基本都会用到`svg`，随着项目迭代`svg bundle`的体积会越来越大，在后续迭代中如果每新增或删除一个`svg`就会导致`svg`bundle的hash发生变化，用户就必须重新下载这个文件，为此会付出额外的流量开支。例如，现在有一个`svg`bundle为`100kb`，此时新增了一个`1kb`的`svg`，项目上线后，用户就需要为这`1kb`的更新重新加载整个`svg bundle`，即`101kb`，毫无疑问，这是一种非常愚蠢的行为。这种方式还存在另一个问题，当两个不同的项目拥有相同的`svg bundle`时，由于`svg bundle`资源在不同域下，用户需要下载2份资源。`archer-svgs`就是为了解决这个问题，通过它你可以更灵活、轻便地加载svg。
> 如果你觉得这个项目还不错，可以给我一个`star`和`follow`来支持我 😘
## [在线示例](https://shanamaid.github.io/archer-svgs/)
## 目录
* [安装](#安装)
* [npm](#npm)
* [yarn](#yarn)
* [script](#script)
* [性能](#性能)
* [特性](#特性)
* [兼容性](#兼容性)
* [方法](#方法)
* [set( )](#set)
* [startPrefetch( )](#startprefetch)
* [downloadSvg( )](#downloadsvg)
* [fetchSvg( )](#fetchsvg)
* [setThreadNum( )](#setthreadnum)
* [注意](#注意)
* [用法](#用法)
* [React](#react)
* Vue
* [谁在用？](#谁在用)
* [贡献者](#贡献者)
### 安装
#### npm
```bash
npm install archer-svgs
```
#### yarn
```bash
yarn add archer-svgs
```
#### script
```html
```
### 性能
`svg`资源的加载顺序为`内存->硬盘缓存->远程服务器资源`，大大提高资源加载效率。
如果想进一步提高加载速度，可以将`svg`资源放在`cdn`上。
同时由于`svg`资源是通过`url`进行加载的，因此可以跨域共享`diskCache`。
### 特性
- 使用`TypeScript`进行, 提供`d.ts`文件提高开发效率。
- 通过`XMLHttpRequest`异步加载 `svg`
- 高效率加载svg，加载顺序：内存->diskCache->远程服务器
- 体积小
- 支持预加载 `svg`
### 兼容性
`archer-svgs` 基于`XMLHttpRequest`， 只要你的浏览器支持 `xhr`，你就可以使用它!兼容性如下图所示：
如果需要在[低版本浏览器](http://caniuse.com/#feat=promises)使用，需要引入`promises poly-fill`，
推荐使用[taylorhakes/promise-polyfill](https://github.com/taylorhakes/promise-polyfill)，体积小并且兼容性很好。
你也可以使用``去加载它。
```js
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js">
```
### 方法
#### set()
必须先调用 `set()`初始化配置，然后才能使用其它的`Archer`方法!
```js
import Archer from 'archer-svgs';
const archer = new Archer();
archer.set({
'ios-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/ios-airplane.svg',
'md-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/md-airplane.svg',
})
```
config - `paramas`
```js
export interface IConfig {
[index: string]: string;
}
```
#### add()
添加配置
```jsx
archer.set({
'ios-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/ios-airplane.svg',
})
archer.add({
'md-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/md-airplane.svg',
})
/**
* config = {
* 'ios-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/ios-airplane.svg',
* 'md-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/md-airplane.svg',
* }
* /
```
#### startPrefetch()
`startPrefetch`会对`config`中的`svg`进行预加载!当你调用`svg`的时候将大大提高使用速度。
- 当`diskCache`为空时，从远程服务资源拉取资源，同时将资源缓存到`memory`和`diskCache`中。
- 当`diskCache`不为空时，将本地资源加载到`memory`中。
```js
archer.startPrefetch();
```
#### downloadSvg()
`params`是`config.svgs`的`key`, 这个方法将返回`svg`的内容。
```js
console.log(archer.downloadSvg('ios-airplane'));
```
`result:`
```js
```
#### fetchSvg()
通过`url`加载`svg`。
```js
const svg = archer.fetchSvg('https://unpkg.com/[email protected]/dist/ionicons/svg/ios-airplane.svg')
console.log(svg);
```
`result:`
```js
```
#### setThreadNum
设置预加载`svg`的最大并发下载数，默认值是`2`。
例如修改最大并发量为`5`。
```js
archer.setThreadNum(5);
```
### 注意
跨域加载svg静态资源的时候需要服务端配置`Access-Control-Allow-Origin`。
### 用法
#### React
```js
import Icon from 'archer-svgs/lib/react';
// 初始化配置
Icon.archer.set({
'ios-airplane': 'https://unpkg.com/[email protected]/dist/ionicons/svg/ios-airplane.svg',
});
// 预加载 - 根据实际需求，也可以不进行预加载
Icon.archer.startPrefetch();
```
### 谁在用
- [Yoshino](https://github.com/Yoshino-UI/Yoshino)
### 贡献者
### archer-svgs 受到以下项目启发
- [ionicons](https://github.com/ionic-team/ionicons)