Loading...

How to disable minification in a React app?

question react front-end
Ram Patra Published on August 21, 2024

To disable minification in a React app created with create-react-app (CRA) using npm, you need to modify the build process. However, CRA does not directly expose Webpack configuration without ejecting, but you can still achieve this without ejecting by using the GENERATE_SOURCEMAP environment variable and a custom build script.

Steps to Disable Minification

  1. Create a .env or .env.local File: In the root of your project, create a file named .env or .env.local if it doesn’t already exist.

  2. Add the GENERATE_SOURCEMAP Variable: Add the following line to the .env file to prevent CRA from minifying your code:

    GENERATE_SOURCEMAP=false
    

    This variable instructs the build process to include source maps and can effectively disable minification, making the code more readable.

  3. Clean the dist directory: The npm build process doesn’t fully clear the dist directory so this step is essential.

    rm -rf ./dist
    
  4. Build your project:

    To build your React app without minification, run:

    npm run build
    
  5. Start your project:

    The below command may vary so please check your scripts property inside the package.json file.

    npm run dev
    

Important Notes

  • Source Maps: Disabling minification via GENERATE_SOURCEMAP=false includes source maps, making it easier to debug the code.
  • Performance: The non-minified code is not optimized for production, so this approach should only be used for debugging.

This method allows you to disable minification without ejecting or modifying CRA’s internal Webpack configuration.

Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on August 21, 2024
Image placeholder

Keep reading

If this article was helpful, others might be too

question nextjs react July 9, 2024 How to define an enum in Typescript and use it in a Next.js app?

Creating an enum in TypeScript within a Next.js project is straightforward. Enums in TypeScript allow you to define a set of named constants that can be used to represent a collection of related values. Here’s how you can create and use an enum in a Next.js application:

question typescript react September 28, 2024 How to add a custom element to a Next.js/Typescript project?

Let’s say I have a custom element setapp-badge that I want to use in my tsx files. If I go ahead and use it, the compiler will throw an error and Next.js will fail to build. It seems the problem might be a combination of how Next.js, TypeScript, and custom elements work together. Therefore, let’s try an approach that avoids the namespace/module issues while ensuring custom elements are recognized in a Next.js/TypeScript project.

question nextjs react February 9, 2024 Main advantages of using the Link component in Next.js over Anchors and Buttons

The main advantage of using the Link component in Next.js for client-side navigation is its optimized prefetching behavior, which enhances the performance and user experience of your web application. Here’s a breakdown of the key advantages:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.