Set up ability to inline CSS into server response. #1194
Conversation
Save a round trip. Makes a big difference.
| path.join(process.cwd(), 'build', stylesHref), | ||
| ); | ||
| styleTags.push( | ||
| <style dangerouslySetInnerHTML={{ __html: contents.toString() }} />, |
There was a problem hiding this comment.
I might be mistaken, but I think recent react-helmet allows styles with text as children.
There was a problem hiding this comment.
It does, but we're really low-level here (initial server render), and Helmet isn't really designed for order-dependent stuff like styles.
The name of the chunk can be read in linkAssets, which avoids any string replacement of public path. Much safer.
| }; | ||
|
|
||
| Object.keys(assetsByChunk).forEach((name: string) => { | ||
| // The second asset is usually a source map | ||
| const jsAsset: string = getAssets(name, 'js')[0]; | ||
| const jsAsset = getAssets(name, 'js')[0]; |
There was a problem hiding this comment.
commented a bit late: most of the Flow types in this file are redundant and already inferred. I improved typing overall by getting rid of some Object ones.
| @@ -22,17 +13,17 @@ const chunkInfoFilePath = ( | |||
| return path.join(webpackConfiguration.output.path, chunkInfoFilename); | |||
| }; | |||
|
|
|||
| const getChunksInfoBody = (json: Object, publicPath: string): ChunksInfo => { | |||
| const assetsByChunk: Object = json.assetsByChunkName; | |||
| const getChunksInfoBody = (stats: Object, publicPath: string): ChunksInfo => { | |||
There was a problem hiding this comment.
ChunksPlugin is from universal-webpack and was copy/pasted in here a while ago. It tracks JS + CSS chunks and writes the information to a file. I modified it to include the original filename in addition to the URL.
|
|
||
| const React = require('react'); | ||
| const path = require('path'); | ||
| const fs = require('fs'); | ||
| // $FlowIgnore promisify is not available in this version of Flow |
There was a problem hiding this comment.
Upgrading Flow will flag this as an error. We can remove it at that time.
| const localPath = path.join(process.cwd(), 'build', 'assets', name); | ||
| const contents = await readFileAsync(localPath); | ||
|
|
||
| cache[name] = contents.toString(); |
There was a problem hiding this comment.
This will definitely increase server memory usage, but will not cause garbage collection calls. I'll monitor it after release.
There was a problem hiding this comment.
Curious how you''ll monitor this. I haven't looked into it too much on NR but do we get pretty good visibility into the health of our node instances through NR?
There was a problem hiding this comment.
I think we can leverage datadog for this.
There was a problem hiding this comment.
Today I learned that datadog exists.
| let key: number = 0; | ||
| const entryPointName: string = filterEntryName(entryPoint); | ||
| ) { | ||
| const styleTags = []; |
There was a problem hiding this comment.
I removed a lot of unnecessary Flow typing from this file. All of this is inferred.
Save a round trip for CSS. Makes a big difference when initial load times are more important than return visits.