Prefetching/Preloading modules

[ram-you]

Hi, can you please implement Prefetching/Preloading modules to have something like this in the header tag :
<link rel="prefetch" href="login-modal-chunk.js">
?

Thank you.

[mubaidr]

This should be working by default. But I will review and post here the results.

[mubaidr]

Confirmed. There are two use cases;

• If the asset you want to prefetch is an static asset, place it in static directory and link it in index.html

<link rel="prefetch" href="./static/login-modal-chunk.js">

• If asset is dynamic (means requires compilation sass, js etc) then:
  update your import:

import("LoginModal")

to:

import(/* webpackPrefetch: true */ "LoginModal")

^ it will prefetch the asset.

• Another more customizable option is to use this web-pack plugin:
  https://github.com/numical/script-ext-html-webpack-plugin

I Hope this helps.

[ram-you]

Thanks a lot.
Your second solution works fine.

new ScriptExtHtmlWebpackPlugin({
      async: /\.js$/,      
      prefetch: {
        test: /\.js$/,
        chunks: 'async'
      }
})

[mubaidr]

Great! 👍