Add chunks to html scripts that are loaded on Build Time Render #186
Conversation
| @@ -53,6 +54,8 @@ function genHash(content: string): string { | |||
| .substr(0, 20); | |||
| } | |||
|
|
|||
| const ignoreAdditionalChunks = ['main.js', 'bootstrap.js', 'runtime.js']; | |||
There was a problem hiding this comment.
runtime.js is here because the tests use it. It may be better to remove this and migrate the tests to use bootstrap.js instead.
Codecov Report
@@ Coverage Diff @@
## master #186 +/- ##
==========================================
+ Coverage 86.02% 86.04% +0.01%
==========================================
Files 41 41
Lines 1861 1885 +24
Branches 501 504 +3
==========================================
+ Hits 1601 1622 +21
- Misses 260 263 +3
Continue to review full report at Codecov.
|
| content = content.replace(/http:\/\/localhost:\d+\//g, ''); | ||
| if (this._useHistory) { | ||
| styles = styles.replace(/url\("(?!(http(s)?|\/))(.*?)"/g, `url("${getPrefix(pathValue)}$3"`); | ||
| content = content.replace(/src="(?!(http(s)?|\/))(.*?)"/g, `src="${getPrefix(pathValue)}$3"`); | ||
| script = generateBasePath(pathValue); | ||
|
|
||
| const jsCoverage = await page.coverage.stopJSCoverage(); |
There was a problem hiding this comment.
would it be possible to just query script tags for this rather than using puppeteers jscoverage? this will make it more portable for when we support jsdom again..
|
Need to fix up the tests on this, but I've updated to query script tags on the page as well as preload css files! |
Network graph for dojo-create-app with a simple block,
|
| const cssFile = this._manifest[entry.replace('.js', '.css')]; | ||
| if (cssFile) { | ||
| html = html.replace(`<link href="${prefix}${cssFile}" rel="stylesheet">`, ''); | ||
| css = `${css}<link rel="stylesheet" href="${prefix}${cssFile}" media="none" onload="if(media!='all')media='all'" />`; | ||
| css = `${css}<link rel="stylesheet" href="${prefix}${cssFile}" />`; |
There was a problem hiding this comment.
Removed media="none" onload="if(media!='all')media='all'" to improve load performance.
| @@ -124,9 +141,19 @@ export default class BuildTimeRender { | |||
| blockScripts.forEach((blockScript, i) => { | |||
| html = html.replace( | |||
| '</body>', | |||
| `<script type="text/javascript" src="${scriptPrefix}${blockScript}" async="true"></script></body>` | |||
| `<script type="text/javascript" src="${scriptPrefix}${blockScript}"></script></body>` | |||
There was a problem hiding this comment.
Removed async="true" to increase the priority of script so the browser downloads it right away.
| ); | ||
| }); | ||
| additionalScripts | ||
| .sort((script1, script2) => { |
There was a problem hiding this comment.
This sort forces main. scripts to be loaded last. If main.12345.bundle.js is loaded and executed before the additional scripts, the additional scripts have a chance to be loaded by the main bundle anyways, thus negating all this preloading.
There was a problem hiding this comment.
can we not make this an exact match? otherwise it would pick up say main.container.js?
| ); | ||
| }); | ||
| additionalScripts | ||
| .sort((script1, script2) => { |
There was a problem hiding this comment.
can we not make this an exact match? otherwise it would pick up say main.container.js?
|
@matt-gadd Done! |
|
Converted preloaded sources to use
|
Type: feature
The following has been addressed in the PR:
prettieras per the readme code style guidelinesDescription:
During a BTR build, the page may loads an additional scripts like async bundles. These additional scripts are now captured and injected into the emitted html pages if you use the
StateHistoryhistory manager.Resolves #179