How to append code at the end of vendor.js and app.js?

Ember CLI
1

I need to do some loading performance experiment by instrumenting vendor.js and app.jswith some code at the end of the file. How should I go about doing this?

There are some conditions for the solution:

  1. Source maps are enabled, so appending the code should not break source maps.
  2. Ensure that the code is last to be included in the file.
  3. babel transformations can be disabled for the code that’s appended to the files.
  4. CSP script-src directive must not include “unsafe-inline”.

What I’ve tried:

app.import

I 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.

Addon postprocessingTree

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.

Addon treeForVendor and treeForApp

Write an addon where treeForVendor and treeForApp return trees that has code added to vendor.js and 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 vendor.js and app.js

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 vendor.js and app.js file is preferred.

2

Don’t know if it’s exactly where you want it, but you could look at ember-cli-shims. I just saw that it does something similar: ember-cli-shims/index.js at master · ember-cli/ember-cli-shims · GitHub

3

If you make an addon (or in-repo addon), it can use the contentFor method which can emit code into several places including vendor-suffix and app-suffix. See for example: