next.js 中iconfont Symbol 加载svg优化 方法二

一直想优化iconfont Symbol加载方法，上一次讲到找到iconfont Symbol优化（https://blog.csdn.net/qq_41211900/article/details/109570775）结果测试网站页面时，方法js业务处理时间变大，这个不愿看到了，但是解决了icon等页面加载完才慢慢显示出来等问题。

如是又想到了一种转换办法，转换成一个json数据，再读取的办法，可以减少js业务处理时间，还能提升网页速度。

1.制作一个页面储存iconfont Symbol内容

新建一个文件：../public/js/iconfont1.js,里面放置iconfont Symbol下载文件iconfont.js,复制放置里面去。并用module.exports=导出文件。

2.制作一个页面写转换成object代码：

import React,{useState,useEffect,useRef,memo, useCallback}  from 'react'
function Getsvg(){
    const svgXML=useRef(null)
    useEffect(()=>{
        const iconfont=require('../public/js/iconfont1');
        //console.log("iconfont",iconfont)
        if(iconfont){
        let listXML={}
        var parser = new DOMParser(); 
        var resXML = parser.parseFromString(iconfont,'text/xml');
        var zeroXML = resXML.querySelectorAll("symbol");
        for(let i=0;i<zeroXML.length;i++){
            let item=zeroXML[i]
            let obj={}
            obj.id=item.getAttribute("id");
            obj.viewBox=item.getAttribute("viewBox");
            obj.svg=item.innerHTML
            listXML[obj.id]=obj
            //listXML.push(obj)
        }
                //console.log("resXML",resXML)
        //console.log("zeroXML",zeroXML)
        //console.log("listXML",listXML);
        console.log(JSON.stringify(listXML))
        // if(svgXML.current){
        //     svgXML.current.innerHTML=zeroXML.innerHTML
        //     svgXML.current.setAttribute("id",zeroXML.getAttribute("id"))
        //     svgXML.current.setAttribute("viewBox",zeroXML.getAttribute("viewBox"))
        // }
          }
    },[])
  
    return (
        <h1 >
            成功，去复制吧！
        </h1>
    )
}

export default Getsvg

复制的内容，粘贴到新建的json文件中：iconfont.json

3.制作icon组件

import React, { useState, useEffect, useRef, memo, useCallback } from 'react'
import iconfont from '../data/iconfont.json'
function Getsvg({ className, name, style }) {
    let item=iconfont[name]
    return (
        <svg className={`icon ${className && className != undefined ? className : ''}`} 
             id={item.id} 
             viewBox={item.viewBox} 
             dangerouslySetInnerHTML={{__html:item.svg}}>
        </svg>
    )
}

export default memo(Getsvg)

在next.js中，通过测试发现用json文件 import导入和js module.exports导出+ import导入，在相同条件情况下，json载入更快页面size更小。我猜测是next.js将json文件看做是数据类型，而js文件则是业务逻辑。所以json会比js文件更快。