Bundle dependencies

[chrismcv]

I've moved to a jspm style having been used to the brunch approach (of watching and concatting all js into app.js).

For my basic example app, I've nearly 350 requests (using react + react bootstrap + a few images from a theme). This is yielding the network graph below in chrome - which is showing about a 2.5s page load - which when auto reloading is a significantly worse experience than with brunch.

I also noticed that because of the structure of react-bootstrap

import TabbedArea from 'react-bootstrap/TabbedArea'
import TabPane from 'react-bootstrap/TabPane'

yields nearly 50 less requests than

import {TabbedArea, TabPane} from 'react-bootstrap'

Has anyone else encountered anything similar? Are there ways to improve on this? Would serving with express-spdy or something similar make a difference?

Thanks,
Chris

[guybedford]

How much of your codebase is ES6? Caching compilations of ES6 is one improvement that can be made. Also if you're using plugins those compilations can be cached too. Cutting down the dependency tree is always good. I'm planning to see if we can make React a smaller load next week myself.

Ideally the codebases would be written so that you are just requiring exactly what is needed for your use cases, loading just the tab pane like you're doing. Looking into how these packages are requiring would help to see if this is possible, and if so a custom override with some map config may help.

If you want to load it from a single bundle you can always create a bundle with jspm bundle app/main -i or whatever your primary require is. Use jspm bundle app/main -is to skip source map creating and go for the quickest bundling process.

[matthewp]

I've encountered this before, it's at least partially due to browsers parallel request limit. If there were a way to disable this (does spdy do this) in development it would be less of an issue.

[matthewp]

@chrismcv I think using spdy would probably help a lot. If you want to try it and let us know that would be fantastic.

[chrismcv]

Had a go there. Spdy hasn't made a significant difference - unless there is
something I need to configure in SystemJS to use it. I'm still seeing the
"back-off" style delay in chrome after the first 100 or so requests.

chrome://net-internals/#spdy
HostProxyIDProtocol NegotiatedActive streamsUnclaimed pushedMaxInitiated
PushedPushed and claimedAbandonedReceived framesSecureSent settingsReceived
settingsSend windowReceive windowUnacked received dataErrortwitter.com:443
direct://8474spdy/3.100100400012truetruetrue6252110485760220880
localhost:3333 direct://21447spdy/3.100100302000967truetruetrue1048576
1048576099750

On Fri, Feb 6, 2015 at 6:33 PM, Matthew Phillips notifications@github.com
wrote:

@chrismcv https://github.com/chrismcv I think using spdy would probably
help a lot. If you want to try it and let us know that would be fantastic.

—
Reply to this email directly or view it on GitHub
#482 (comment).

[matthewp]

That's unfortunate. It shouldn't take a browser 2 and a half seconds to make 350 requests to localhost. I'd file a bug with the browser. I'd be curious as to how long it takes to load the same amount of files in Node.

[RonnyPfannschmidt]

an option to just make one bundle of all dependencies for injection would be most helpfull

[matthewp]

@guybedford It would be cool if jspm could automatically create bundles for just your package dependencies some how. I'm not sure how this could work but essentially what you would want is a "React bundle", a "lodash bundle", etc. This way your own code would still appear in the debugger as separate files but your package dependencies (which you are probably not going to debug very often) would be in bundles.

[guybedford]

I think it would be useful to have a:

  jspm bundle --deps app/main

That will just create a bundle containing the jspm_packages dependencies of that code.

This way we would only load our current code as separate files.

[darcnite3000]

you can do jspm bundle react + react-bootstrap lib/react-bundle.js so as i've done in my test setup for a angular jspm seed i setup a gulp task using gulp-shell to put together and create these bundles (http://github.com/darcnite3000/ngserver see build/tasks/bundle.js and build/jspm-bundles.js)

I know what you're asking is for an easier feature, but it's not too difficult to implement

[guybedford]

This will be possible with the new bundle changes via jspm bundle app/* - [app/*].

[2fd]

👍

[RonnyPfannschmidt]

when is the release?

[guybedford]

This is now possible in the beta with jspm bundle app/**/* - [app/**/*] as mentioned above.

[Psvensso]

jspm bundle src/main - [src/*/] dist/deps.js

Wow this was a huge performance boost for my dev flow, really helpful,
perhaps highlight this in the documentation under a "development workflows"?

[mwq27]

When I try jspm bundle app/**/* - [app/**/*] I immediately get a zsh: no matches found [app/**/*] error. Is there something that I'm missing?

[RonnyPfannschmidt]

@mwq27 you need to escape the * in zsh - ts more pedantic/correct about missed + matches

putting ' around should do

[mwq27]

Thanks @RonnyPfannschmidt , that was the trick. Now that the bundle runs, it does give me an error:

Error: EISDIR, read
         at Error (native)
    Error loading file:///Projects/jspm_packages/npm/babel-core@5.6.17

My exact command is jspm bundle 'src/js/**/*' - '[src/js/**/*]' dev-deps.js. Have you run into this before?