Styles are inserted into the head instead of css bundle

[piehei]

Hi

I'm using the plugin as suggested but for some reason the styles are inserted straight into the head inside style tags when my app starts. I'm using Webpack for bundling my app. All other CSS gets correctly into the css bundle but vue-js-modal css only appears to be added dynamically when the app runs.

I think this is a bug since the browser needs to do more work this way and the performance suffers.

Could something be done so that the styles would be included in the css bundle and no runtime styles manipulation would be necessary?

Thanks for the awesome plugin!
BR
Pietari

[euvl]

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 👍 😄

[piehei]

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?

:-)

[euvl]

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 😃 😢 😢 )

[euvl]

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 😅