HenrikJoreteg / moonboots

A set of conventions and tools for bundle and serving clientside apps with node.js
158 stars 20 forks source link

Any plan to support code splitting? #64

Closed lsm closed 9 years ago

lsm commented 9 years ago

Our current bundled javascript file is almost 3MB and it's growing very fast and takes seconds to load. But, not all scripts are being used in all pages and load dependencies on-demand based on the requirement of page is kind of really necessary for javascript heavy project. Any plan to support this in the near future?

lukekarrys commented 9 years ago

Thanks for the question! So I'm not sure if it makes sense to bake this functionality into moonboots directly.

But since moonboots uses browserify under the hood it should be possible to use a browserify plugin like factor-bundle https://github.com/substack/factor-bundle to achieve at least some of the functionality you're asking about.

Unfortunately I've never used this plugin but I would be very interested to hear how it works in conjunction with moonboots.


Luke Karrys

On Jan 10, 2015, at 4:49 PM, lsm notifications@github.com wrote:

And load on-demand based on the requirement of page?

— Reply to this email directly or view it on GitHub.

lsm commented 9 years ago

Yes, that's true. Code splitting is tied more to application structure. But, at least it might be helpful to add watchify to Moonboots and give user the option to regenerate bundles on change other than every request. It takes me couple seconds to generate the bundled javascript and I have to wait that time each time I refresh the browser. Like you said, since moonboots is based on browserify, it shouldn't very hard to add this feature to Moonboots. I'm using browserify directly now and following snippet works great for me:

var b = browserify(inputFiles, opts);
b.plugin('factor-bundle', {
  outputs: outputFiles
});

var w = watchify(b);
w.on('log', function(msg) {
  console.log('Watchify:', msg);
});

w.on('update', writeBundle);
writeBundle();

function writeBundle() {
  w.bundle().pipe(fs.createWriteStream('public/assets/js/common.js'));
}
lukekarrys commented 9 years ago

Agreed that watchify would be a great addition! There's actually a pr that I need to check out which adds it :) I'm hoping to get to it this week.


Luke Karrys

On Jan 14, 2015, at 7:48 PM, lsm notifications@github.com wrote:

Yes, that's true. Code splitting is tied more to application structure. But, at least it might be helpful to add watchify to Moonboots and give user the option to regenerate bundles on change other than every request. It takes me couple seconds to generate the bundled javascript and I have to wait that time each time I refresh the browser. Like you said, since moonboots is based on browserify, it shouldn't very hard to add this feature to Moonboots. I'm using browserify directly now and following snippet works great for me:

var b = browserify(inputFiles, opts); b.plugin('factor-bundle', { outputs: outputFiles });

var w = watchify(b); w.on('log', function(msg) { console.log('Watchify:', msg); });

w.on('update', writeBundle); writeBundle();

function writeBundle() { w.bundle().pipe(fs.createWriteStream('public/assets/js/common.js')); } — Reply to this email directly or view it on GitHub.

lsm commented 9 years ago

That's great! Will keep eyes on it. Thanks for bring such great tools to the community, Ampersand etc.