I need to do some loading performance experiment by instrumenting
app.jswith some code at the end of the file. How should I go about doing this?
There are some conditions for the solution:
- Source maps are enabled, so appending the code should not break source maps.
- Ensure that the code is last to be included in the file.
- babel transformations can be disabled for the code that’s appended to the files.
- CSP script-src directive must not include “unsafe-inline”.
What I’ve tried:
app.import but I can’t seem to append the code at the end of the
vendor.js file - only in the middle of the file. Appending to
app.js doesn’t seem to be supported.
Write an addon that inserts the code in postprocessingTree. Doing so would ensure that the appended code is last, however, source maps would be broken.
Write an addon where
treeForApp return trees that has code added to
app.js. The problem is how to ensure that the addon runs last so the code is included last.
Inline JS into index.html after each
<script> tag for
This would work if CSP script-src directive has “unsafe-inline” or adding a manually-generated sha hash from the inline JS and added to the script-src directive. This approach could work but there are manual steps I’d like to get away from. There might also be an issue with parsing/execution order that impacts performance so instrumenting within the
app.js file is preferred.