Tinymce ignoring preload css static files - redownloads them

Method

1. Constructed a simple page with TinyMce Vue component
2. Make sure the application JS imports the TinyMce Vue JS
3. Load the page

Expected Results The preload css libraries to be utilised instead of redownloading. The preload will shorten the page load times.

Actual Results The preload css libraries are downloaded again, causing;

1. Slower page load times
2. Unnecessary bandwidth usage
3. Worse Lighthouse score

My code references

The HEAD component

    <!-- tinymce -->
    <link rel="preload" href="NearBeach/tinymce/skins/ui/oxide/skin.min.css" as="style">
    <link rel="preload" href="NearBeach/tinymce/skins/content/default/content.min.css" as="style">
    <link rel="preload" href="NearBeach/tinymce/skins/ui/oxide/content.min.css" as="style">
    <script defer type="text/javascript" src="NearBeach/tinymce/tinymce.min.js"></script>

The BODY component

    <!-- MAIN COMPONENT -->
    <main class="container" role="main">
        <div id="app">
            <editor
               :init="{
                 height: 500,
                 menubar: false,
                 toolbar: 'undo redo | formatselect | ' +
                  'bold italic backcolor | alignleft aligncenter ' +
                  'alignright alignjustify | bullist numlist outdent indent | ',
               }"
            />
        </div>
    </main>

    <!-- Load NearBeach Webpack File -->
    <script defer type="text/javascript" src="NearBeach/NearBeach.min.js"></script>

The NearBeach.min.js uncompiled code can be found in my project here - https://github.com/robotichead/NearBeach/blob/main/src/js/app.js

The NearBeach mock tinymce template (referenced in the code above) can be found here - https://github.com/robotichead/NearBeach/blob/tinymce_tests/NearBeach/templates/NearBeach/temp/tinymce.html

When I load the page, I expect the preloaded CSS files will be utilised within TinyMce, instead they are not and they are re-downloaded. This can be seen within the network console

It is also noted in Chrome’s Lighthouse

[jscasca]

To the best of my knowledge, you can use skin:false and content_css:false to stop the editor from attempting to load the CSS. In that case you will need to manually load the CSS. Otherwise, the editor will try to load the files when initialising.

[exalate-issue-sync[bot]]

Ref: INT-2666