當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

浏览器svg插件_Archer-svgs: 异步加载svg方案

發(fā)布時(shí)間：2024/7/23 HTML 48 豆豆

生活随笔收集整理的這篇文章主要介紹了浏览器svg插件_Archer-svgs: 异步加载svg方案小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Github地址： ShanaMaid/archer-svgs

哇哦!無(wú)限的svgs!你可以使用archer-svgs去異步加載svg并將它緩存在localStorage里，當(dāng)你再次使用已經(jīng)加載過(guò)的svg時(shí)將不需要再發(fā)起http請(qǐng)求。將svgs從你的js-bunlde里移除，并且永遠(yuǎn)減小js-bunlde的體積。（例子: 不需要因?yàn)?kb的svg更新而重新加載整個(gè)100kb的svg模塊。）
如果你覺(jué)得這個(gè)項(xiàng)目還不錯(cuò)，可以給我一個(gè)star和follow來(lái)支持我
ps：archer命名取自fate里面archer的技能無(wú)限劍制

在線示例

安裝

npm

npm install archer-svgs

yarn

yarn add archer-svgs

特性

使用TypeScript進(jìn)行, 提供d.ts文件提高開(kāi)發(fā)效率。
異步加載 svg
緩存 svg 在 localstorage 或者 disk-cache
已經(jīng)緩存svg在再次使用的時(shí)候不用發(fā)起http請(qǐng)求
體積小
預(yù)加載 svg

設(shè)計(jì)思路

配置初始化

預(yù)加載

兼容性

archer-svgs 基于fetch和localStorage.針對(duì)fetch, 采用了 whatwg-fetch去做兼容!換句話(huà)說(shuō), 只要你的瀏覽器支持 xhr和localStorage，你就可以使用它!他們的兼容性如下圖所示：

方法

init()

必須先調(diào)用 init()，然后才能使用其它的Archer方法!

import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},'md-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/md-airplane.svg',version: 1,cache: false,},} })

config - paramas

export interface IConfig {svgs: ISVG; }export interface ISVG {[index: string]: {version: number | string; // svg versionurl: string; // svg urlcache?: boolean; // default: true. false: not cache svg in localStorage } }

startPrefetch()

startPrefetch會(huì)對(duì)config中的svg進(jìn)行預(yù)加載!當(dāng)你調(diào)用svg的時(shí)候?qū)⒋蟠筇岣呤褂盟俣取?/p>

原因： - disk cache - localStorage cache

import Archer from 'archer-svgs';Archer.init(...); Archer.startPrefetch();

downloadSvg()

params是config.svgs的key, 這個(gè)方法將返回svg的內(nèi)容。

import Archer from 'archer-svgs';Archer.init({svgs: {'ios-airplane': {url: 'https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg',version: 1,},} })console.log(Archer.downloadSvg('ios-airplane'));

result:

clearSvgCache()

清理掉localStorage中svg的緩存。

import Archer from 'archer-svgs';Archer.clearCache();

setMaxSize()

設(shè)置localStorage中svg的緩存最大值，單位是kb。

import Archer from 'archer-svgs';Archer.setMaxSize(1024); // 1024kb

setMax()

設(shè)置localStorage中svg的緩存數(shù)量。

import Archer from 'archer-svgs';Archer.setMax(10); // 你可以在loaclStorage中緩存10個(gè)svg

fetchSvg()

通過(guò)url加載svg。

import Archer from 'archer-svgs';const svg = Archer.fetchSvg('https://unpkg.com/ionicons@4.4.2/dist/ionicons/svg/ios-airplane.svg')console.log(svg);