问题
I'm building a single page app using webpack. Have seen several times that it is recommended to extract css from production build but didn't find the reason.
Could anyone explain why it is treated as a best practice and what the advantages of that for production?
Is it needed for caching styles and js separately on client only or there are other reasons, cons, pros?
An example of such recommendation you can find by link below
https://github.com/webpack-contrib/sass-loader
In production
Usually, it's recommended to extract the style sheets into a dedicated file in production using the ExtractTextPlugin. This way your styles are not dependent on JavaScript:
回答1:
It is recommended mostly because of two reasons that are enough to follow the practice:
1) The extracted css stylesheets can be cached separately. Therefore if your app code changes, the browser can only fetch the JS files that changed.
2) Without extracting css you may suffer from Flash of Unstyled Content (FUOC). The browser must fully interpret javascript to apply styles to your page which can cause FUOC (and likely will). It always takes a while, and only then the styles will be applied. By extracting css you allow the browser to handle the styles separately, preferably before interpreting JS (load css before js) and eliminate FUOC.
On the other hand, I don't see any pros for leaving css combined with js, I believe it was introduced in webpack only for ease of use so that works out of the box (in the development mode I presume).
来源：https://stackoverflow.com/questions/43417739/why-extract-css