background

Currently, most of the component libraries use font-family ICONS to load font files. A big problem is that developers may only use a few ICONS, but eventually package the entire font file, even if compression is enabled for packaging and gzip is enabled for file transfer. The cost of introducing a few hundred kilobytes and a few megabytes is still high compared to a few ICONS.

But if you offer the Icon component and developers don’t use it, why not?

If pages can be loaded on demand, why does the Icon component load ICONS on demand?

implementation

Ionicons is a very stable library of ICONS that has been maintained for a very long time, and a recent review of readme.md and a search for Issue Demand Load showed that the project already supports loading of the ICONS on demand in 4.x.

Related issue: ionic-team/ionicons#499 ionic-team/ionicons#611

Here is the official description

If you’re using Ionic Framework, Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following <script> near the end of your page, right before the closing tag, to enable them.

< script SRC = "https://unpkg.com/[email protected]/dist/ionicons.js" > < / script >Copy the code

If you are importing Ionicons without using the Ionic framework, you can load the examples on demand by importing the following script tags: jsbin.com/rozujasegi/… Or simply copy the following code into a local HTML file and open the preview

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <ion-icon name="heart"></ion-icon> </body> <script SRC = "https://unpkg.com/[email protected]/dist/ionicons.js" > < / script > < / HTML >Copy the code

The principle of loading on demand is to finish loadingionicons.jsWill automatically parse the HTMLion-iconTag, readnameThen load the corresponding. SVG file dynamically, and insert SVG and style into the corresponding DOM node, as shown in the following figure

React allows Icon ICONS to load on demand

This is how I used it in the beginning

import * as React from 'react'; import { Component } from 'react'; import 'ionicons/dist/ionicons.js'; export default class Icon extends Component { render() { const html = '<ion-icon name="ios-heart"></ion-icon>'; return ( <i dangerouslySetInnerHTML={{__html: html}}/> ); }}Copy the code

Is clearly wrong, because this first ionicons/dist/ionicons js is packaged into bundles, icon component has not been inserted into the dom, ionicons parsing is over.

After improvement, it is as follows:

import * as React from 'react'; import { Component } from 'react'; import 'ionicons/dist/ionicons.js'; export default class Icon extends Component { componentDidMount() { const script = document.createElement('script'); Script. The SRC = 'https://unpkg.com/[email protected]/dist/ionicons.js'; script.id = id; script.onload = () => { document.body.removeChild(script); }; document.body.appendChild(script); } render() { const html = '<ion-icon name="ios-heart"></ion-icon>'; return ( <i dangerouslySetInnerHTML={{__html: html}}/> ); }}Copy the code

That is, after the Icon component is rendered and inserted into the real Dom tree, we will create a script label to dynamically load ionicons.js to parse the ion-icon label, and remove it after the script label is loaded.

At first glance, there seems to be no problem, okay?

Yoshino – github. IO /#/docs/comp… Yoshino – github.

This is when the above Icon on demand loading scheme is problematic.

We assume that the Icon component document page has 800 ICONS, that is, 800 Icon instances are created. When these 800 Icon components are inserted into the DOM tree and triggered componentDidMount, 800 script tags are created to load ionIcons.js. In this case, the browser page appears in the suspended animation state, that is, cannot respond to requests.

Therefore, we need to determine if the body already has a script tag to load ionicons.js.

The final transformation results are as follows: github.com/Yoshino-UI/…

If you like Yoshino component library, click star, welcome PR! 🚀