-
Notifications
You must be signed in to change notification settings - Fork 9.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
core: add inline scripts to Scripts artifact #7065
Changes from 1 commit
fac5bed
a67cccb
a8debfb
8535f0b
a959a03
13067d4
0c28f25
7a2a75b
554d398
f02e0b6
9321d6a
0fe823a
80a062e
b5a0912
a38a548
9fc4e6d
cc8e401
e78d8b5
98509ba
8610f78
c01ca17
54f416c
9abd2f9
5c133cb
28bfe98
b9f82ae
0ecd754
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -78,20 +78,24 @@ class UnminifiedJavaScript extends ByteEfficiencyAudit { | |
const items = []; | ||
const warnings = []; | ||
for (const requestId of Object.keys(artifacts.Scripts)) { | ||
const scriptContent = artifacts.Scripts[requestId]; | ||
const scriptContentEntry = artifacts.Scripts[requestId]; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. PSA: typescript doesn't support type guarding for expressions like
|
||
const scriptContents = Array.isArray(scriptContentEntry) ? | ||
scriptContentEntry : [scriptContentEntry]; | ||
const networkRecord = networkRecords.find(record => record.requestId === requestId); | ||
if (!networkRecord || !scriptContent) continue; | ||
if (!networkRecord || !scriptContents) continue; | ||
|
||
try { | ||
const result = UnminifiedJavaScript.computeWaste(scriptContent, networkRecord); | ||
// If the ratio is minimal, the file is likely already minified, so ignore it. | ||
// If the total number of bytes to be saved is quite small, it's also safe to ignore. | ||
if (result.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT || | ||
result.wastedBytes < IGNORE_THRESHOLD_IN_BYTES || | ||
!Number.isFinite(result.wastedBytes)) continue; | ||
items.push(result); | ||
} catch (err) { | ||
warnings.push(`Unable to process ${networkRecord.url}: ${err.message}`); | ||
for (const scriptContent of scriptContents) { | ||
try { | ||
const result = UnminifiedJavaScript.computeWaste(scriptContent, networkRecord); | ||
patrickhulce marked this conversation as resolved.
Show resolved
Hide resolved
|
||
// If the ratio is minimal, the file is likely already minified, so ignore it. | ||
// If the total number of bytes to be saved is quite small, it's also safe to ignore. | ||
if (result.wastedPercent < IGNORE_THRESHOLD_IN_PERCENT || | ||
result.wastedBytes < IGNORE_THRESHOLD_IN_BYTES || | ||
!Number.isFinite(result.wastedBytes)) continue; | ||
items.push(result); | ||
} catch (err) { | ||
warnings.push(`Unable to process ${networkRecord.url}: ${err.message}`); | ||
} | ||
} | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,8 @@ | |
|
||
const Gatherer = require('./gatherer'); | ||
const NetworkRequest = require('../../lib/network-request'); | ||
const getElementsInDocumentString = require('../../lib/page-functions.js').getElementsInDocumentString; // eslint-disable-line max-len | ||
const URL = require('../../lib/url-shim.js'); | ||
|
||
/** | ||
* @fileoverview Gets JavaScript file contents. | ||
|
@@ -20,7 +22,7 @@ class Scripts extends Gatherer { | |
async afterPass(passContext, loadData) { | ||
const driver = passContext.driver; | ||
|
||
/** @type {Object<string, string>} */ | ||
/** @type {LH.Artifacts['Scripts']} */ | ||
brendankenny marked this conversation as resolved.
Show resolved
Hide resolved
|
||
const scriptContentMap = {}; | ||
const scriptRecords = loadData.networkRecords | ||
.filter(record => record.resourceType === NetworkRequest.TYPES.Script); | ||
|
@@ -34,6 +36,23 @@ class Scripts extends Gatherer { | |
} catch (e) {} | ||
} | ||
|
||
/** @type {string[]} */ | ||
const inlineScripts = await driver.evaluateAsync(`(() => { | ||
${getElementsInDocumentString}; | ||
|
||
return getElementsInDocument('script') | ||
.filter(meta => !meta.src && meta.text.trim()) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. seems like this one isn't a |
||
.map(meta => meta.text); | ||
})()`, {useIsolation: true}); | ||
if (inlineScripts.length) { | ||
const mainResource = loadData.networkRecords.find( | ||
request => URL.equalWithExcludedFragments(request.url, passContext.url)); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. the other instances of finding the main resource mention Agreed it'd be much preferable to call a centralized version of this. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done. after the two merge PRs merge maybe we should just move that check into There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
yeah it's a bit different to do generically because in these cases we know for a fact there are no fragments on the network records but agreed we should not have to do these things, the URL.* methods should just be fast by default :) |
||
if (!mainResource) { | ||
throw new Error('could not locate mainResource'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm a teensy bit worried that this is going to start throwing errors into our perf category on edge cases we previously didn't really care about. We don't actually need a request ID for the whole thing to work. WDYT about making There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. sounds alright, but what are these edge cases? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If I knew them I would fix them :) I just meant that we have seen this error popup in peoples reports before and it's mostly 🤷♂️and move on since it wasn't that big a deal. Now it'll be a bit more user-facing. I actually had to tackle this for canonical though and think it'll be solid. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done. thoughts on handling reporting of unminified scripts in the JS audit? I just put There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. also, one of us should extract that function to somewhere else (whoever merges last) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. extract it off of though if you mean we should finally move There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Ideally we'd try to provide a snippet of the code like we do for CSS, but I'm OK with this for now until we see how common it is. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe when the fancy code snippet preview (#6901) lands we can do something cool here :D There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yeah having it in 💯 to snippets |
||
} | ||
scriptContentMap[mainResource.requestId] = inlineScripts; | ||
} | ||
|
||
return scriptContentMap; | ||
} | ||
} | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
now takes into account these two inline scripts
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
could we assert more in here to give insight about which 3 these should be? (shouldn't be exhaustive, but presumably the sort should be stable so could do urls)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done. the data was stable too so I include it.