splits.js

// before 
// index.js 
import React from 'react'
import { render } from 'react-dom'
import App from './app'


render(<App/>, window.root)

// and assume you've done some import() shenanigans in app.js and/or other files 




// after 
// index.js
import React from 'react'
import { render } from 'react-dom'
import { gimme } from './pages'

import App from './app'

gimme('home', () => {   // you'd have some conditional here matching window.location.href with names 
  // don't even do anything with the recived module here, just render App
  render(<App/>, window.root)
})

// and in your app.js / other files, use `gimme(name)` instead of import(path) 


// pages.js 
let mapping = {
  'home': () => import('./home'),
  'list': () => import('./list'),
  'details': () => import('./details')
}
let modules = {}
export function gimme(name, cb){
  if(modules[name]){ // check cache, possibly sync 
    return cb(modules[name])
  }
  
  let fn = mapping[name]
  fn().then(m => {
    // populate cache for 
    modules[name] = m
    cb(m)
  })  
}