Feature request: Support dynamic import() for code splitting

[glennsl]

Dynamic import() is a TC39 proposal currently in stage 3 and already supported by several bundlers. Details here: https://github.com/tc39/proposal-dynamic-import.

The gist of it is: a new global function, import(), that behaves (exactly?) like require() except it returns a promise so that the module can be loaded lazily. In pseudo-OCaml:

val import : string => (module type of 'Whatever) Js.Promise.t

Problem

I don't think it's possible to use this from BuckleScript today no matter how many hacks you throw at it. You'd have to convert a toplevel module into a first-class module somehow, which I don't think is possible without type information only available to the compiler.

Proposal

module type L = module type of List (* I think you have to do this. Would be nice if this could be generated too *)

[%import (List : L)]
|> Js.Promise.then_ (fun (module List) -> List.map ...)

As far as I understand extension points, the (List : L) inside %import just needs to be valid OCaml syntax and wouldn't actually load the module. The extension point could then generate:

(import('stdlib/list').then(function (List) { return [List.map, List.filter, ...] }))

cc @kennetpostigo who brought this to me

[kennetpostigo]

First class support within bucklescript would be huge. Helps shrink initial bundle sizes by only loading what is immediately needed on the page you are on. Loading the rest as you navigate through the app. This brings a few benefits that are critical to retaining users and aggregating new users. Time to first paint and time to app interactivity.

For example, I have a relatively small application with 10 different views. The Javascript loaded on the page is 424.66kb. which accounts for the entirety of the app, however what is probably used from that bundle is a lot less. 50-70kb is probably more accurate. So the impact would be very positive if we had some first class support for this from bucklescript.

[arialpew]

I have made a package to do dynamic import with BuckleScript : https://github.com/kMeillet/bs-dynamic-import

This feature is really important and critical for web development because we can't ship the whole application bundle on first visit ... it's to big for smooth user experience on large app.

For ReasonReact application, take at look at "reason-loadable" : https://github.com/kMeillet/reason-loadable