Обеспечить асинхронную загрузку файлов и выполнение функций - PullRequest
Новая
       57

Обеспечить асинхронную загрузку файлов и выполнение функций

0 голосов
/ 24 апреля 2020

Я захватил веб-сайт V2 Docusaurus .

Одной из особенностей нашего веб-сайта является то, что нам нужно загрузить office. js и css -vars-ponyfill.min. js, и Запустите некоторые функции в патчах . js в самом начале. Поэтому предыдущий разработчик решил использовать следующий подход.

На каждой .mdx.md странице он обернул содержимое компонентом MainWrapper: 

<MainWrapper>
    ... ...
    Real content
    ... ...
</MainWrapper>

MainWrapper/index.js определяется как следует 

import React from 'react';
import Head from '@docusaurus/Head';

function MainWrapper(props) {
    return (<>
        <Head>
            <script
                src="/lib/patches.js" 
                onload="(function(){console.log('patches.js has been fully loaded')}).call(this)" >
            </script>
            <script async defer 
                src='https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js'
                onload="(function(){console.log('css-vars-ponyfill.min.js has been fully loaded'); onCssVarsPonyfillLoad();}).call(this)">
            </script>
            <script async defer 
                src='https://appsforoffice.microsoft.com/lib/1/hosted/office.js'
                onload="(function(){console.log('office.js has been fully loaded'); onOfficejsLoad();}).call(this)">
            </script>
        </Head>
        {props.children}
    </>)
}

export default MainWrapper;

lib/Patches.js содержит реальные операции: 

var pushStateRef = history.pushState;
var replaceStateRef = history.replaceState;

console.log("already inside patches.js")
console.log("history.pushSate and replaceState have been saved")

function patch() {
    if (!history.pushState) {
        history.pushState = pushStateRef;
        history.replaceState = replaceStateRef;
        console.log("history.pushState and replaceState have been set back")
    };
}

... ...

function onCssVarsPonyfillLoad() {
    console.log("already inside patches.js > onCssVarsPonyfillLoad()")
    ... ...
}

function onOfficejsLoad() {
    Office.onReady(function () {
        console.log("already inside Office.onReady");
        patch();
    })
}

Мои тесты показывают, что иногда эта реализация может обеспечить загрузку patches.js до office.js и css-vars-ponyfill.min.js как <script async defer до. Однако иногда этот порядок не может быть обеспечен:

enter image description here

@docusarus/Head использует react-helmet. Кто-нибудь знает, как исправить эту проблему порядка загрузки? Я хочу загрузить patches.js, прежде чем что-либо еще, есть ли обходной путь?

...