<aside> 🧑‍🎓 The critical request chain will update as a result of making i18n non-blocking. Learn more how to identify it:

How to identify critical request chain?

</aside>

The i18n chunk (with translations) may be blocking. Consider the following request chain (unoptimized):

Making i18n non-blocking will have the following effect:

To achieve this effect, following actions are required:

1. Override i18n component to always render

<aside> 🧠 The i18n logic is located in @scandipwa/webpack-i18n-runtime extension. The problematic file is I18n.component – returning null if translations are not yet loaded.

</aside>

Create a new file src/@scandipwa/webpack-i18n-runtime/component/I18n/I18n.component.js (to override the i18n component implementation), add the following content:

import i18n from '@scandipwa/webpack-i18n-runtime/src/util/i18n';
import PropTypes from 'prop-types';
import { PureComponent } from 'react';

export class I18nComponent extends PureComponent {
    static propTypes = {
        children: PropTypes.node.isRequired
    };

    constructor(props) {
        super(props);

				// Remount the application on locale change
        i18n.init(this.forceUpdate.bind(this));
    }

    render() {
        const { children } = this.props;
        const currentLocale = i18n.getCurrentLocale();

        return (
            <div
              block="LocalizationWrapper"
              elem={ currentLocale }
              key={ currentLocale }
            >
                { children }
            </div>
        );
    }
}

export default I18nComponent;

<aside> 🎉 This is how you fix blocking i18n!

</aside>