Question about including bootstrap/jquery/fontawesome stuff inside the app vs including it in index.html

[jarlah]

Hi

I dont really like the idea of including an already production ready package like fontawesome in src/index.js. Does the script remove css that is not needed? is it run through a closure compiler type of compiler that removes "dead code" etc?

I need jquery, jquery-ui, bootstrapjs and bootstrapcss and fontawesome in my app. By adding it into src/index.js i make sure that all those dependencies is loaded automatically by the bundle.js. But the problem is, I cant really see why I should have to do that. What do I save by doing it like this? what if want to add some default content inside the app div, lets say some nice landing page in case the app takes for ever to load? Or maybe the app wont start? What then?

To summarize:

What is the gain by adding all the static vendor css to index.js? What is the point of adding jquery and jquery-ui (if possible) if all it does is include it in index.js as is (it cant really make it more minimal)?

[tbillington]

You can leave it in the public folder and just reference it through the %PUBLIC_URL% variable in your html file so it will make a separate request for it as usual.

[gaearon]

what if want to add some default content inside the app div, lets say some nice landing page in case the app takes for ever to load?

How would using separate files for jQuery etc solve this problem? The browser would still wait for them to download before running your code.

As @tbillington noted, you can indeed put scripts in public folder as described in User Guide if you want to load them separately. I don't understand what problem you would be solving by this though.

[jarlah]

Thanks for the response so far. There isn't really a problem I am trying to solve here. I am merely trying to release responsibilities for the app, make it more responsible for business logic and not how the index.html wires up vendor dependencies. As I can understand, the only reason for including bootstrap and jquery from npm is convenience... and maybe loading time. But loading time is negligible.

I have planned to use a different framework besides react on the page. Maybe it will be cyclejs, maybe something else. But the point is that both react and this framework will be referencing classes defined in bootstrap and jquery. So thats the reason I am questioning why so many react apps bundle everything in one huge mega bundle. As if the bundle logic can make bootstrap and jquery smaller ...

[gaearon]

Sorry, these questions are very vague and hard to answer because it’s unclear what exactly you are asking. Maybe it would help if you tried to pick a specific question, and I could try answering that.

So thats the reason I am questioning why so many react apps bundle everything in one huge mega bundle.

Just splitting the bundle in 5 files won't necessarily make it load faster if they all have to run synchronously one after another. In fact issuing more requests often causes slower loads. This is why bundling is beneficial.

Of course the initial bundle preferably should be small, and the rest should be loaded on demand. Since we use Webpack under the hood, you can use its code splitting feature to automatically split code into multiple bundles. This still has nothing to do with manually adding libraries to index.html: Webpack will split the bundle automatically based on require.ensure calls.