css-vars-ponyfill
根据css自变量来完成网页页面焕肤的全过程中，会出現适配性的问题。
以便处理ie，qq，百度搜索访问器等适配性的问题，引进css-vars-ponyfill，可是在ie访问器下，css-vars-ponyfill 的在nextjs下主要表现欠佳，关键缺点是因为网页页面是服务端3D渲染，因而客户在见到页面后，动态性主题风格色等款式不可以迅速3D渲染好，只是有一个衔接的時间（css-vars-ponyfill 仅适用client-side），色调会存有显著更换的全过程客户感受差。根据阅读文章 源代码 能看到，cssVars必须直到访问器contentLoaded以后，才会开启，不然一直监视dom的data content恶性事件，这就造成了感受上的难题。
处理计划方案
1.分析速率
根据把立即除去 document.readyState !== 'loading' 那样的限定标准促使访问器在分析到，随后变更css-vars-ponyfill 的引进方法（旧的引进方法是在nextjs中的mainjs中引进module，随后立即启用cssVars()，那样在启用到ponyfill的脚本制作前还会继续分析别的不有关的chunk，以便迅速的分析css自变量，必须手动式挑选插进部位），变更以后的css-vars-ponyfill 根据寻找css自变量的部位（nextjs 根据将不一样部件下的style，统一装包在header里边），随后将变更后的ponyfill 插进到style 以后开展启用，这一步挑选在服务端3D渲染的 _document.tsx 文档中变更。
2.分析平稳性
根据手动式变更文档分析部位，及其对源代码的标准开启体制开展有关变更，主页色调3D渲染速率拥有一定提高。可是仍存有一个难题，即根据路由器自动跳转的页面，假如有新的style chunk，插进时不可以开展合理的css自变量分析（已试着配备cssVars的option 开启MutationObserver）。
因而，处理计划方案是根据分辨UA，来让ie等访问器下全部的路由器根据a标识自动跳转，开启css-ponyfill的再次分析实行。
export function browser() {
const UA = window.navigator.userAgent
if (UA.includes("qqbrowser")) return "qqbrowser"
if (UA.includes("baidu")) return "baidu"
if (UA.includes("Opera")) return "Opera"
if (UA.includes("Edge")) return "Edge"
if (UA.includes("MSIE") || (UA.includes("Trident") && UA.includes("rv:11.0")))
return "IE"
if (UA.includes("Firefox")) return "Firefox"
if (UA.includes("Chrome")) return "Chrome"
if (UA.includes("Safari")) return "Safari"
}
type CommonLinkProps = {
children: ReactElement
href?: string
target?: string
outerLink?: boolean
styles?: unknown
}
export default function CustomLink(props: CommonLinkProps) {
const { children, href, target, as, outerLink, styles = emptyStyles } = props
const [isIE, setIE] = useState<boolean>(false)
const cloneEl = (c: ReactElement, props?: any) =>
React.cloneElement(c, { href: as ?? href, target, ...props })
useEffect(() => {
if (["IE", "qqbrowser", "baidu"].includes(browser())) {
setIE(true)
}
}, [])
function renderLink() {
if (Children.only(children).type === "a") {
const node = cloneEl(children as ReactElement)
return node
} else {
let fn: () => void | null = null
if (outerLink) {
fn = () => {
window.open(as ?? href)
}
} else {
fn = () => {
window.location.href = as ?? href
}
}
const node = cloneEl(children as ReactElement, {
onClick: () => {
fn()
},
})
return node
}
}
return (
<>
{!href ? (
children
) : isIE ? (
renderLink()
) : (
<Link {...props}>{children}</Link>
)}
<style jsx>{styles}</style>
</>
)
}
这儿children的type 挑选了 ReactElement ，而并不是插槽中通快递常适用的 ReactNode 关键不是想考虑到立即插进标识符串这类状况，会提升难题的繁杂度，因而立即在type这层做限定。也有Fragments 都没有考虑到，且沒有寻找合理的Fragments 种类，无法在ReactNode 中把它Omit掉，nextjs 里边的Link 假如首层插进了Fragments 后，也没法一切正常自动跳转，将会缘故也是没法再Fragments 上边关联合理的恶性事件吧，现阶段Fragments（16.13.1） 只适用key特性，期待事后能够提升。
小结
到此这篇有关css-vars-ponyfill 在ie自然环境下应用难题（nextjs 搭建）的文章内容就详细介绍到这了,大量有关css-vars-ponyfill应用內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！