Progressive Web Apps with React

Conditional imports

With that done, it's time to ask what conditional imports are.

Right now, we import all our dependencies at the top of each JavaScript file, as shown:

import React, { Component } from 'react';

We will always need React, so this import makes sense. It's static, in that it will never change, but the preceding means that React is a dependency of this file and it will always need to be loaded.

Currently, in App.js, we do the same with each container:

import LoginContainer from './LoginContainer';import ChatContainer from './ChatContainer';import UserContainer from './UserContainer';

Doing so means that those containers are a dependency of App.js, so Webpack will always bundle them together; we can't split them apart.

Instead, ...