Контекст: Я начал устранять характер шрифтов, блокирующий рендеринг, как поведение браузера, провел некоторые исследования и выяснил, используя webfontloader , мы можем загружать их асинхронно.
Проблема: Мне нужно загрузить только определенные (400,500,500i) варианты Roboto, используя webfontloader , асинхронно
Метод: Я попытался решить с помощью приведенного ниже фрагмента:
class MyPage extends React.Component {
render() {
return <RootPage {...this.props}/>
}
}
const options = {
google: {
families: ['Roboto:400,500,500i']
}
}
export default WithWebFontLoaderHOC({ options })(MyPage)
ExpectedOutput: Фрагмент должен загружать только три указанных варианта Roboto.
RealOutput: Он загружает все двенадцать вариантов Roboto.
ПРИМЕЧАНИЕ : Я не упоминал нигде в кодовой базе
семейство шрифтов: Roboto;
Так это правильный путь? или что за недостающий кусок?
ExtraInfo:
const WithWebFontLoaderHOC = ({ options }) => (WrappedComponent: any) => {
class RenderComponent extends Component<WithWebFontLoaderHOCProps> {
componentDidMount() {
// This will make sure WebFont.load is only used in the browser.
if (typeof window !== 'undefined') {
const WebFont = require('webfontloader') //eslint-disable-line
WebFont.load(options)
}
}
render() {
return <WrappedComponent {...this.props} />
}
}
RenderComponent.displayName = `WithWebFontLoaderHOC(${WrappedComponent.displayName ||
WrappedComponent.name})`
return RenderComponent
}