Search code examples
javascriptreactjsperformancepreloadcode-splitting

preloading images and fonts conflict with code splitting

I'm using react +17.0 and the craco (module bundler)

similar to this post, When I'm trying to preload some images/fonts on my index.html with:

<link rel='preload' as='image' href='assets/images/fooImage.png' crossorigin/>

I've found that preloading does not work because it needs the same image/font name in the assets directory but with code splitting after building I saw that my images and fonts will be renamed in a new name like this:

enter image description here

as a result, preloading still does not work. any help will be appropriate.

enter image description here

Solution

  • What is the problem?

    module bundler changes the assets name (adding random numbers to them) on the built version.

    so chrome lighthouse (or other performance testers) show that those assets can't find in preload link (index.html) or any related file.

    So, What to fix it?

    definitely, ejecting or switching to another module bundler like the Webpack and changing the configuration will solve the issue, but I can't do that like many projects.

    The standard solution to solve name problem:

    transfer all project's assets (static assets) like fonts and images from the frontEnd project (client-side) into a public folder in my server and use its URL in my client-side project.

    Now, it can be easily preloaded or anything else.