Fuse-box: Code Splitting API

[tomitrescak]

The arithmetic expressions are a powerful way of creating several bundles in the project. Combined with lazy loading they can deliver similar results then the API I would like to propose, but

• having this new API would significantly reduce the complexity of lazy loading.
• most probably would allow hot-reloading of split bundles as well

GOAL: Automatically split application into several bundles and lazy-load bundles by module reference during run time.

API: Extend FuseBox.import function with following overload:

FuseBox.import(modulePath: string, fileName: string, callback: (loadedModule: any) => void): Promise<loadedModule: any>

e.g.

const module = await FuseBox.import('../../my_module', 'split_1.js');

BUNDLER BEHAVIOR:

• When bundler detects the new FuseBox.import it starts to create a new bundle with name 'fileName'.
• modules that are only referenced from the split point up are kept in the split bundle
• modules SHARED with MAIN bundle are kept only in the main bundle
• modules SHARED between two or more split bundles are also kept in MAIN bundle

LOADER BEHAVIOUR:

• I think that this is only a slight modification of what currently exists
• When loader executes the proposed import, it will check whether the module was already loaded and cached. If not, it will load the module asynchronously from the defined file name.
• Since all shared code exists in APP bundle, there is nothing else we need to do

What do you think? Would you consider implementing such API?

[nchanged]

@tomitrescak absolutely. Love the idea!
I do, however, few notes on that.

I would not mess with FuseBox.import. You see if you want to automatically bundle (create a new one at build time) and load at runtime, that would probably require introducing a new API.

FuseBox.lazy("./mylazy-module").then( module => {
})

• At build time AST detects lazy method. Extract parameters and initiates a separate process that bundles it. Configuration?! we need to think of that. Probably in the main config - like isolated dependencies and stuff. Or like that?!

FuseBox.lazy("./mylazy-module", `> + [entry.ts]`).then( module => {
})

• At run time it just makes an HTTP request to a file ( basically behaves like import). We would change the code to FuseBox.import("./mylazy-module") (just an idea to make it simpler)

IMHO that would make it more explicit, as the lazy method will point to an instruction at build time.

To summarise, i would introduce _Build Time Process Instructions_

[leon-andria]

He re we go
Fuse Code Splitting proposal.pdf

Please give us your feedbacks.

[nchanged]

312

[devmondo]

This is now awesomely available in version 2.0

we will close it, but feel free to open it otherwise :)