Chrome Warning message regarding not using preloaded chunks

[stevenfitzpatrick]

Just trying out this plugin for two chunks generated by webpack code splitting, everything seems to working fine but in console I am getting these warnings.

The resource http://localhost:8080/98196ebdaabca2c98261.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.

Now the error makes sense, but it could take the user a few seconds to navigate to the route which requires these chunks. Is there anyway to stop this error message ?

I.e I preload these code-splitting chunks as follows

<link rel="preload" href="98196ebdaabca2c98261.js" as="script">
<link rel="preload" href="0f4f2b938549bee12ab7.js" as="script">

but they are not loaded on "home" route, only when the user navigates to i.e. "favourites"

Edit : I guess I should be using prefetch

[addyosmani]

Thanks for asking a good question. Unused preloads in Chrome will trigger a console warning ~3 seconds after onload. This happens when the resource isn't being consumed (e.g you're not trying to use a script you've preloaded) in a timely manner.

If the resource is needed for the current navigation & will be used, go for preload. If the resource is needed beyond that (and you're not using in the current nav), I'd go for prefetch.

[stevenfitzpatrick]

Thanks for replying, I was just going to try and close this before I saw your reply, as I felt stupid after reading more about the difference between prefetch and preload.

My first impression was preload was the cool new thing in town to replace prefetch. But I guess there is still a need for both.

Thanks for the answer.

[josephrexme]

I get these warnings too. What I think of the problem is that it preloads all my routes defined for react router since I use the router-based code splitting. Can I have it only preload the ones specific to a page and perhaps prefetch the rest or do nothing at all? Here's a sample of what my code looks like:

// router.jsx
const Notifications = lazy(() => import('./components/Notifications'));
const Messages = lazy(() => import('./components/Messages'));
const Settings = lazy(() => import('./components/Settings'));
function AppRouter() {
  return (
    <Router>
      <Suspense fallback={Fallback}>
        <Switch>
          <Route path="/notifications" render={() => <Notifications />} />
          <Route path="/messages" render={() => <messages />} />
          <Route path="/settings" render={() => <Settings />} />
        </Switch>
      </Suspense>
    </Router>
  );
}

// webpack
module.exports = {
  ....
  plugins: [
    new ExtractTextPlugin({ filename: 'bundle.css', allChunks: true }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App',
      template: HtmlWebpackTemplate,
      inject: false,
      hash: true,
      mobile: true,
      favicon: 'assets/favicon.ico',
      appMountId: 'app',
    }),
    new PreloadPlugin(),
    new webpack.EnvironmentPlugin(['NODE_ENV', 'HOST', 'API_KEY']),
  ].concat(prodPlugins)
};

Any recommendations?

[designarti]

Thanks for asking a good question. Unused preloads in Chrome will trigger a console warning ~3 seconds after onload. This happens when the resource isn't being consumed (e.g you're not trying to use a script you've preloaded) in a timely manner.

If the resource is needed for the current navigation & will be used, go for preload. If the resource is needed beyond that (and you're not using in the current nav), I'd go for prefetch.

How about preloaded local fonts? They should be preloaded, not prefetched, right?
They trigger the same warning a few seconds after page load.

<link rel="preload" as="font" href="<?php echo get_template_directory_uri(); ?>/fonts/merriweather-v20-latin-regular.woff2" type="font/woff2" crossorigin>