Conditional import or alternative in JavaScript (ReactJS WebApp)?

Question

I\'m implementing internationalization for a ReactJS webapp. How can I avoid loading all language files?

import ru from \'./ru\';
import en from \'./en\';

         


        

Answer 1

Looks like I am late here, but I would like to answer the approach I am using. I have an async component:

import React from 'react';

export default (loader, collection) => (
  class AsyncComponent extends React.Component {
    constructor(props) {
      super(props);
      this.Component = null;
      this.state = { Component: AsyncComponent.Component };
    }

    componentWillMount() {
      if (!this.state.Component) {
        loader().then((Component) => {
          AsyncComponent.Component = Component;
          this.setState({ Component });

        });
      }
    }

    render() {
      if (this.state.Component) {
        return (
          
        )
      }

      return null;
    }
  }
);

And we call it using:

const page1 = asyncComponent(() => import('./page1')
  .then(module => module.default), { name: 'page1' });

and then we use it with:

This will ensure that loading is done dynamically.