Mesure your create react app build.

How to tweak webpack config?

Create react app comes with pre-configured webpack. To add your config in Create-React-App, you have to either eject it or fork react-scripts.

Other ways to modify your webpack config

You can use libraries like react-app-rewired or customize-cra

⚠️ "Stuff can break": - Dan Abramov

---

Mesuring speed

That been said. What I wanted to be was to just see which webpack loader or plugin took how much time. So I used react-app-rewired
It is easy to configure and use. You can go through the docs to see how it is done

Now once you are done with the setup. You need a webpack plugin speed-measure-webpack-plugin. Install it by just running this command npm install --save-dev speed-measure-webpack-plugin or if you are using yarn yarn add -D speed-measure-webpack-plugin

Now we need to add this code in config-overrides.js

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin({ outputFormat: "human", outputTarget: './measur.txt' });

module.exports = function (config, env) {
  config = smp.wrap({ 
    ...config,
   })
 return config
}

Once you run your build command a measur.txt file will be generated.

Comments

[Serhiy Illarionov]

Thanks a lot! It was very useful