Loadable static import after dynamic misunderstanding?

help
1

I’ve set up my react-loadable this way in my main router, which is in the client folder:


const DynamicNotFound = Loadable({
  loader: () => import('/imports/components/system/NotFound'),
  loading: Loading
})
FlowRouter.notFound = {
  action() {
    mount(MainLayout, {
      content: <DynamicNotFound />
    })
  }
}


const DynamicHomePage = Loadable({
  loader: () => import('/imports/components/home/HomePage'),
  loading: Loading
})

FlowRouter.route('/account', {
  name: 'home',
  action (params) {
    mount(MainLayout, {
      pageClass: "page home",
      content: <DynamicHomePage mode="login" />
    })
  }
})

// ... etc.

I thought that would mean anything statically imported inside HomePage or NotFound (or MainLayout which is also a Loadable instance) would not be included in the initial bundle, but that doesn’t seem to be the case. Everything is in the bundle either way (according to the size of the bundle - 307KB - and bundle-visualizer.

Is it supposed to work like I thought - where anything statically linked after a dynamic import would be included later, and not in the initial bundle? It definitely doesn’t seem to work that way.

2

Does anyone have any idea? If it is not supposed to work the way I though, does that mean I have to start wrapping my modules in a giant function wrapper?