Some things should be done when you take your app from the development to the production environment.

For example, the code needs to be compiled, bundled, minified, and code split.

Let's understand these terms.

Compiling

Let's understand it with an example.

Suppose you have an app written in nextJs.

You wrote the code in JavaScript or TypeScript and Jsx. But the browser doesn't understand the code you wrote in TypeScript or jsx. We write code using these because it improves our confidence, productivity, and efficiency.

Compiling is a process of taking code in one language and converting it to another language or another version of that language such that the machine or the browser in this example can understand the code.

Here the compilation happens during the development as you're typing the code and at the build, step to prepare your app for the production environment.

Minifying

Sometimes the code we write or the developers write is written in a way that could be easy for humans to understand. We write comments in between, indents, and some space in between, or write the code in multiple lines for better readability.

But the machine doesn't need it.

That's why the code is minified by removing unnecessary things like comments, space, multiple lines, and indents without affecting the code's functionality.

The purpose of minifying the code is to reduce file size to increase the app's performance.

In this example, for a Next.js app, JavaScript, and CSS files are automatically minified for production.

Bundling

When developing an app in nextJs we break our code into modules, components, utils, and functions which could be used to build other pieces of the app. We export and import modules, and third-party packages.

That's why bundling is done by resolving the web dependencies and merging or packaging the files and modules into optimized bundles for the browser to reduce the number of requests for files when the user visits the app on the web.

Code Splitting

In nextJs, we create different files in the pages folder for each path to render on the specific URL.

Code splitting is the process of splitting the app's bundled code into smaller chunks for each entry point or URL path to improve the app's load time by only loading the required code to run that page.

NextJs has built-in code splitting. Each file inside your pages/ folder will be automatically code split into its own JavaScript bundle during the build step.

Any code shared between pages is also split into another bundle to avoid re-downloading the same code when a user visits those other pages.

Build Time VS Runtime

Build time (or build step) is a series of steps that prepare your app's code for production.

When you build your app, Next.js transforms your code into production-optimized files that can be deployed on the server and consumed by users. The files include:

• HTML files for statically generated pages

• JavaScript code for rendering pages on the server

• JavaScript code for making pages interactive on the client

• CSS files

Runtime (or request time) is when your app runs in response to a user’s request on his device after your application has been built and deployed.

You can share and give this a like if you want.