Styles are inserted into the head instead of css bundle about vue-js-modal HOT 4 CLOSED

Hey @piehei

It is the default behaviour of vue-loader in webpack i think: webpack/webpack#3329.

Did you do benchmarking? What is the performance fall?
I have people using it in prod. as noone mentioned about bad performance so i am curious now.

On the matter, I can prob. add a separate building task using ExtractTextPlugin.

E.g. you will have to do something like

`include('vue-js-modal/index_stripped.css')`
`include('vue-js-modal/index_stripped.js')`

Will it help?

Thanks for kind words 👍 😄

from vue-js-modal.

It causes the browser to recalculate styles if I'm not mistaken. That could cause the page to flash white and/or some jank.

The point being:

1. Browser fetches the css bundle, processes it and calculates everything
2. Browser fetches the js bundle
3. The js dynamically adds more styles to the head
4. The browser has to do recalculation

My own Vue components don't insert any css, everything is included in the single css bundle webpack generates. I don't use any other 3rd party components so cannot compare.

One thing to note: when using webpack dev server, all the styles are inserted into the DOM no matter what component is in question. But this should only happen in dev mode, not production if I'm not completely mistaken.

There shouldn't be any reason to add the css dynamically when the app is running (if we leave out all code-splitting sorcery).

Any thoughts? Am I missing something?

:-)

from vue-js-modal.

Yeah, you have a point.

I am still not sure if it is a problem though, especially for the component that should be invisible by default and if you already use some framework like Vue or React. Recalculating styles once is not a biggie in comparison to other operations your browser has to do to run 200kb+ of javascript :D

I have been using it in production for a while and never faced any problems (please consider that my home internet is 10mb/s shared between 3 ppl 😃 😢 😢 )

from vue-js-modal.

I've looked through a dozen of component to figure out how to pack it for distribution (i'm a webpack noob) and all of them supplied just .js and .js.map files in their dist.

Do you think the solution from my first answer will be useful for you?

Hope it will help you to bundle the css styles all together, but I do not want to break the plugin for other people who already have it in prod 😅

from vue-js-modal.