Creating production build
Last updated
Was this helpful?
Last updated
Was this helpful?
To create a production build of your theme, you must run the build command:
This creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables .
When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory:
main.[hash].chunk.js
This is your application code. index.js, etc.
[name].[hash].chunk.js
These files are code-splitting chunks. The code inside them includes modules that you've imported using the or following approach.
[number].[hash].chunk.js
These files are vendor chunks. The code inside them includes modules that you've imported from within node_modules. Since vendor code tends to change less often than the actual application code, the browser will be able to cache them separately, and won't re-download them each time the app code changes.
runtime-main.[hash].js
This is a small chunk of logic which is used to load and run your application. The contents of this will be embedded in your build/index.html file by default to save an additional network request.
Similarly with JavaScript in production, there are a number of .css files (called chunks) that are generated and placed in the build/static/css directory:
[name].[hash].chunk.css
[number].[hash].chunk.css
These files are vendor chunks. The code inside them includes CSS modules that you've imported from within node_modules.
main.[hash].chunk.css
This are styles imported in your application. index.js, etc.
These files are code-splitting chunks. The code inside them includes CSS modules that you've imported in JavaScript modules imported using the or following approach.