-
-
Save anderser/7846d594b3c9f5114fa4129753ab37ed to your computer and use it in GitHub Desktop.
Above fold style tag (css) using roc webapp react
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: red; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| require('./styles/abovefold.scss'); | |
| export default true |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| {{ custom.aboveFoldCSS }} | |
| </style> | |
| </head> | |
| <body> | |
| Hello World | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = { | |
| webpack: { | |
| entry: { | |
| abovefold: './src/abovefoldentry', | |
| } | |
| }, | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // this content should be in the client entry file | |
| __DEV__? require('./styles/abovefold.scss'): {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { appConfig } from 'roc-package-web-app-react/app/shared'; | |
| import path from 'path'; | |
| import fs from 'fs'; | |
| import { getAbsolutePath } from 'roc'; | |
| // get chunks by name and extensions | |
| const getChunks = (stats, name, ext = 'js') => { | |
| let chunk = stats.assetsByChunkName[name]; | |
| // a chunk could be a string or an array, so make sure it is an array | |
| if (!(Array.isArray(chunk))) { | |
| chunk = [chunk]; | |
| } | |
| return chunk | |
| .filter((chunkName) => path.extname(chunkName) === `.${ext}`) | |
| }; | |
| let preloadContent; | |
| const getAboveFoldCSS = (settings) => { | |
| if (!preloadContent) { | |
| const assetsDirectory = getAbsolutePath(settings.build.output.web); | |
| const stats = JSON.parse(fs.readFileSync(path.join(assetsDirectory, 'webpack-analysis.json'), 'utf8')); | |
| const preloadFilename = getChunks(stats, 'abovefold', 'css')[0]; | |
| preloadContent = fs.readFileSync(path.join(assetsDirectory, preloadFilename), 'utf8'); | |
| } | |
| return preloadContent; | |
| }; | |
| export default function getTemplateValues({ reduxState, settings }) { | |
| return { | |
| bodyClass: 'main', | |
| publication: appConfig.publication, | |
| device: reduxState.contents.device.device, | |
| aboveFoldCSS: __DIST__? getAboveFoldCSS(settings): '', | |
| }; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment