Sebastian Weber
May 7, 2020 ⋅ 21 min read

An in-depth guide to performance optimization with webpack

Sebastian Weber Fell in love with CSS and JS over 20 years ago.

Recent posts:

Using Signaldb With React

Using SignalDB with React: A complete guide

SignalDB enables automatic data synchronization between your components and a local in-memory or persistent database.

Antonello Zanini
Feb 20, 2024 ⋅ 6 min read
Guide To Next Js Layouts And Nested Layouts

A guide to Next.js layouts and nested layouts

Understanding how layouts, nested layouts, and custom layouts work in Next.js is crucial for building complex, user-friendly projects.

Ibadehin Mojeed
Feb 19, 2024 ⋅ 12 min read
Extracting YouTube Video Data With OpenAI And LangChain

Extracting YouTube video data with OpenAI and LangChain

Extract YouTube video data using OpenAI and LangChain for quick, cost-effective insights without watching the videos.

Carlos Mucuho
Feb 16, 2024 ⋅ 9 min read
How To Use Css Variables Like A Pro

How to use CSS variables like a pro

By building these four simple projects, you’ll learn how CSS variables can help you write reusable, elegant code and streamline the way you build websites.

Idorenyin Obong
Feb 15, 2024 ⋅ 15 min read
View all posts

6 Replies to "An in-depth guide to performance optimization with webpack"

  1. This was a fantastic read. Thank you very much. Unfortunately I was unable to get the separate entry points going when navigating directly to …/profile. Is this not intended to work like that?

  2. Hi Daniel. Thanks for your kind words.

    Have you tried out the branch dealing with entry point code splitting? https://github.com/doppelmutzi/react-performance-strategies/tree/entry-point-splitting

    When you check it out, and execute “npm run dev:analyze” you should see that 2 bundles are created. Furthermore, when you go directly on the URL for the profile page (http://localhost:3000/profile), then it works for me. You can more about this topic in the section called “Add multiple entry points for bundle splitting”.

    Does this help you?

  3. Hi Sebastian,

    Thank you for getting back to me and apologies for the confusion. I meant to refer to the entry-point-splitting-multiple-html branch. I do see the separated bundles and html files (index.html and profile.html) and navigating to index.html directly does work when running a dev server (because only one HtmlWebackPugin instance is defined in webpack.dev.js). However, when I build in prod mode and serve the dist folder using live-serer, the index.html file is served correctly (only loads app.js and displays the page), but when I navigate to profile.html (directly), the profile.html file is served correctly and when examining the network tab, only profile.js is loaded, however, the page remains blank. Incidentally, navigating via a link from the root works. I’ve tried adding sourcemaps to the prod build and debugging but haven’t gotten very far. Navigating to /profile returns a 404 (since there is no route associated with it I assume).

    BTW you did help me shave off significant load times on https://staging.dle.dev compared to https://dle.dev. I’m not quite done optimizing yet, but I thought you’d appreciate seeing your (and Sean Larkin’s) recommendations implemented “in the wild”.

  4. Hi Daniel,
    don’t worry, I gladly answer your questions. Would you be so kind to explain what you would like to achieve in your project? If you ask because of your project https://staging.dle.dev/blog, then you obviously want to optimize a SPA.

    You can use one single HtmlWebpackPlugin (first part in section “Add multiple entry points for bundle splitting”). Your question aims at an MPA approach. I just explained in the article how to generate multiple bundles (with multiple entry points) and how to automatically add them into different html files. However, how to serve these html files was not part of this article. I would recommend you to strive for the approach I explained in section “Lazy loading on the route level”. Then you still have one single bundle to include and when the user navigates to another

    Furthermore, I have to admit that I have not made sure that every performance optimization step (i.e., every branch) leads to a runnable demo app for development and production mode. To be more precise, I had also not set myself the goal that the production build could be used in the demo app – I did not add an http-server and a workflow for this. As an example, when you open the production build (that uses react router) just from the file system, it does not work. My goal was mainly to have demo code and different versions of webpack configurations and discuss the output (bundle content, bundle sizes, etc.).

    Feel free to reach out for me here or on Twitter to help you further.

Leave a Reply