Critical Style Loader
Dynamically generate critical path css by gathering all imported CSS modules used during a SSR request. Obtain the resulting CSS as a string to be rendered by your server application to avoid FOUC in the client.
Includes utilities to avoid duplicated styles in the browser by filtering any style-loader handled CSS that has been pre-rendered as critical CSS.
Inspirations
- https://github.com/kriasoft/isomorphic-style-loader
- https://github.com/shuboc/critical-css-style-loader
Install
npm install critical-style-loader
Usage
webpack.server.js
moduleexports = module: rules: test: /\.css$/ use: loader: 'critical-style-loader' loader: 'css-loader' options: modules: true ;
webpack.client.js
moduleexports = module: rules: test: /\.css$/ use: loader: 'style-loader' options: transform: 'node_modules/critical-style-loader/lib/filterCriticalCss.js' loader: 'css-loader' options: modules: true ;
server.js
;;;;; const app = ;// ... configure express app; app;
app.ejs
<!doctype html><html lang="en"><head> <style id="critical-css"><%- criticalCss %></style></head><body><div id="root"><%- html %></div> <script id="preload"> <%- criticalCssMap %>;</script></body></html>
components/app.js
;;; const App = <h1 style=stylesheading>Hello World!</h1> ; const wrapWithStyles = ;App;
client.js
;;; ReactDOM;