Webpack’s import() will soon fetch js + css— Here’s how you do it today
A month ago Webpack’s creator,Tobias Koppers, unleashed “The big plan” for CSS in Webpack in his article “ The new CSS workflow (step1) .”
The primary takeaway — mine at least — was that code-splitting for CSS would become a first class priority. You would be able to get css files generated for each of your dynamic “code splitting” chunks, and calls to
import() would get you 2 files: JS + CSS. Here’s a quote from the article:
“The big plan
In the long term we want to make it possible to add first-class module support for CSS to webpack. This will work the following way:
- We adjust the chunk loading logic to allow loading of stylesheets. We need to wait for CSS applied or at least loaded, before executing the JS.
- When we generate a chunk load we may load the js chunk and the stylesheet chunk in parallel (combined by
The foundation of course is being able to have CSS files generated for each dynamic chunk. Currently, the extract-text-webpack-plugin does not support this. The Beta 3.0 version circulating today won’t support it . My extract-css-chunks-webpack-plugin which has been around for a while does. But that’s still not good enough.
It’s not good enough because compilation is slow and doesn’t maximize caching within the browser. The reason is because it creates 2 different JS chunks for what should be just one chunk. Those chunks are:
- one without CSS injection via style-loader
- one with CSS injection via style-loader
The reason we do all this is so so your initial serving/rendering get the most minimal set of bytes + cacheable stylesheets AND so future calls to import() aren’t missing css.
For this all to make sense, and if this is the first time you’re hearing about any of this, you probably want to check out:
Code Cracked for Code-Splitting + SSR in Reactlandia: React Universal Component + Webpack Flush Chunks
The code has been cracked for a long time now for server-side rendering and code-splitting individually. Until now … medium.com
The summary is via react-universal-component and webpack-flush-chunks you can easily universally render your app while simultaneously code-splitting. For the first time as a generally available NPM package (no framework required) . For those not in the know, the takeaway is this: SSR is a solved problem, splitting is a solved problem, doing both together hasn’t been.
You no longer have to trade SEO for code-splitting or vice versa.
That also means your primary mechanism for conserving bytes delivered to clients is code-splitting. And to get the full benefit of that you don’t want to be sending your private member panel’s CSS to your public visitors or vice versa. If you have multiple areas to your app, the problem just compounds.
In fact, through statically split CSS your sending less bytes to clients than the popular “render path” solutions du jour (since those have to send the definitions of your CSS in JS chunks in addition to css ). And perhaps more importantly, that also saves you many wasted cycles generating CSS during render on the server and client.
Being able to control what static CSS files you send to clients really is a nice way to handle this problem. It’s why @sokra came to this conclusion. Being able to automatically do it is even better.
Introducing Babel-Plugin-Dual-Import + Extract CSS Chunks Webpack Plugin 2.o
babel-plugin-dual-import transforms your request to a
Promise.all just as Sokra talked about, and as bonus it automatically comes up with a
webpackChunkName for you. “Magic comments” are so magical they’ve disappeared. Under the hood of course I use them to generate your chunk names.
extract-css-chunks-webpack-plugin , well we’ve circumvented a major performance issue in terms of build time (no more double JS chunks), and now all you’re dealing with is stylesheets your users’ browsers can cache. And yes, HMR still works (better than ever in fact).
Also note: all 4 of these packages work together. I’m tentatively calling it the “Universal” family of packages. They can all be individually used — because that’s what flexible frameworkless development is about. But they work best together. Enjoy.
There’s not much left to say today. So I won’t waste your time. Git clone the demo to see all 4 packages in action:
babel-plugin-dual-import + webpack-flush-chunks + ECCWP demo github.com
And see it all come together.
If you haven’t checked out React Universal Component + Webpack Flush Chunks , do so. They’re currently the only solution bringing it all together for React developers apprehensive about frameworks. For developers that have had these problems, you know who you are. Those days are over.
Tweets and other love are much appreciated. Find me on twitter @faceyspacey Want to stay current in Reactlandia? Tap/click “FOLLOW” next to the FaceySpacey publication to receive weekly Medium “Letters” via email :point_down|type_4: