panter / manul-admin-ui

Miau (Manul Interface for Administrative Users)
http://panter.ch
MIT License
0 stars 0 forks source link

find a way to leaverage meteor 1.5. code splitting #4

Open macrozone opened 7 years ago

macrozone commented 7 years ago

you can lazy load components with meteor 1.5 (rc.5 is out):


import("/path/to/mycomponent").then(default => (
  <default />
))

there is even this cool https://github.com/thejameskyle/react-loadable:

import Loadable from 'react-loadable' ;
const LazyLoadedAdminApp = Loadable({
   LoadingComponent: () => <div>Loading</div>,
   loader: () => import("./path/to/mycomponent')
})

<LazyLoadedAdminApp /> // now loads when mounted!

for our admin-ui there is one gotcha, because this approach needs Loadable to be in your "app-space", not sure if it works properly when done inside an npm-package:

// app space code
import Loadable from 'react-loadable' ;

// your admin context:
adminComponents: {
   // that would work properly, but we would need to import every single component this way :-(
    list: Loadable({loader: () => import("/path/to/list.jsx")}) 
}

it would be cool if we could do this somehow in the package! Maybe we can use Loadable in the package directly, but i don't know how meteor behaves, if you load someting lazily inside an npm package

remolueoend commented 7 years ago

Sounds great, I'm working on it. In a first step, what if I try to dynamically import the UI module into the boilerplate like: const manulAdminUI = await import('@panter/manul-admin-ui')? This should already decrease the bundle size of the app itself and speed up initial loading. We could do the same for manul-admin etc. without touching the actual npm modules.