Duplicate entry of script files which are configured for preloading

[pratyushj]

This is my webpack configuration for ScriptExtHtmlWebpackPlugin

 new ScriptExtHtmlWebpackPlugin({
        async : [/app/],
        preload : [/manifest/,/vendor\.bundle/]
    }),

I want to preload my vendor files and asynchronously load my app build file. But the html generated has the entry for manifest and vendor files twice, one for preload hint and the other as a script tag

Prior apologies if the configuration has been done wrong ).

[numical]

Hi Pratyush,

ScriptExt is doing the right thing. There are two seperate instructions going on - there are the core <script> elements that instruct the browser to download and then run their defined javascripts; and there are preload hints that suggest to the browser that it may want to download some resources (in this case the self-same javascripts) for later use.
So you can read you html as the following set of instrctions: (though remember, in reality, a modern browser will paralllize most of this):

• download th 'styles.xxx.css' stylesheet to apply later on the DOM content loaded event;
• optionally download and cache the 'manifest.xxx.js' file
• optionally download and cache the 'vendor...js' file
• render the body (not much there!)
• download (or fetch from cache) and run script file 'manifest...js' prior to emitting Dom Content loaded event
• download (or fetch from cache) and run script file 'vendor...js' priot to emitting prior to emitting Dom Content loaded event;
• download (or fetch from cache) and run script file 'app...js' but don't bother to wait for this before emitting Dom Content loaded event.

The net effect is that the page will load and accept user input before your app is loaded so the user could see a blank screen for a few moments. If you are planning to add some html for this prior state, that's great - else I wouldn't bother with the async. Moreover, as your configuration currently stands, I don't think the preload will offer you any benefit as nothing of long duration happens before the <script> tags are processed. In other words, I think you might not need ScriptExt at all!